HTML Dasar : Paragraf
Hello Mates 🍻!!!
Kali ini Gw akan memberikan materi tentang HTML dasar yaitu pada paragraf. Tag yang kita gunkan adalah tag <p></p>. Tapi sebelum itu kita buat dulu folder baru didalam folder html kita yang udh kita buat. Kita beri nama folder tersebut latihan 3
Setelah itu kita masuk ke Sublime Text atau anwriter nya.
Sebelum kita mengetikan apapun biasakan kita save dulu file nya. Save ke dalam folder latihan 3 dengan nama paragraf.html
Kemudian kita buat struktur html nya,seperti di part sebelumnya dengan cara, ketik html lalu pencet tab jika anda menggunakan sublime text, untuk di anwriter kita pencet tombol < yang sudah disediakan di situ, lalu ketik html (kalau kalian menggunakan di hp agak lumayan manual )
Untuk title kita tulis : HTML paragraf
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
</body>
</html>
Lalu di body nya kita tambahin tag <p></p> kemudian ketik ini adalah paragraf 1
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
</body>
</html>
Lalu save untuk yang pake pc (ctrl+s). Tapi kalau anwriter langsung. Oke kita bisa lihat hasilnya dengan cara klik kanan pada bagian kosong lalu klik open in browser(sublime text). Untuk di anwriter kalian pencet tanda yang dibawah kanan seperti panah Yang tidak ada ekornya.
Nah anda hanya mengetikan perintah tadi aja kalian bisa membuat satu buah paragraf. Untuk membuat paragraf selanjutnya kalian bisa ketik lagi tag <p></p> kemudian ketik
ini adalah paragraf 2.
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<p>Ini paragraf 2</p>
</body>
</html>
Lalu kalian ke browser lagi dan lihat hasil nya dengan merefresh browser maka akan terlihat
dua buah paragraf yang kalian buat tadi
Html otomatis membuatkan jarak dan sepasi kebawah untuk tag paragraf berikutnya
Kalau kalian rasa jaraknya kurang banyak atau jaraknya kurang, kalian bia menggunakan bantuan
tag <br> dan <hr>
<br></br> ini adalah tag untuk membuat baris baru
<hr></hr> ini adalah tag untuk membuat garis horizontal
Kita akan coba tambahkan baris baru dengan menggunakan tag <br>
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
</body>
</html>
Lalu kalian refresh browser kalian, pastinya paragraf tadi jaraknya akan bertambah
Tag <br> tag ini meski kita tidak tempat kan di tag page seperti tadi, misal gw mau simpan
di dalam paragraf
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<br>
<p>Ini <br>paragraf 2</p>
</body>
</html>
Lalu kita refresh. Dan lihat hasilnya !!!
Tag <hr> untuk tag horizontal, kita coba tambah kan
Lalu kita lihat hasilnya, akan muncul sebuah garis horizontal
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
<hr>
</body>
</html>
Dan kita refresh. Inilah hasilnya
Tag selanjutnya yang kita bahas adalah 3 buah tag ini <b></b> , <i></i> , <u></u>
Tag yang <b> ini untuk bold (mempertebal), Tag <i> untuk membuat tag menjadi italic
dan <u> untuk menambahkan under line
contoh :
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
<hr>
<p>Selamat <b>datang Di</b> <i>Blog Angels</i> <u>Cyber Moon</u></p>
</body>
</html>
Dan kita lihat hasil nya :
Kalau kalian ingin membuat paragraf yang didalam nya ada makna misal ada penekanan atau membuat text itu
penting kalian gunakan dua tag ini <strong></strong> dan <em></em>
Tag <em> untuk memberikan sebuah penekanan dan <strong> untuk memberikan penekanan
yang lebih kuat lagi. Hasilnya <em> membuat text menjadi miring seperti italic dan <strong> menjadikan text cetak tebal
contoh :
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
<hr>
<p>Selamat <b>datang Di</b> <i>Blog Angels</i> <u>Cyber Moon</u></p>
<hr>
<p><strong>Gw GANS </strong> kalian semua <em>buriq thanks :v</em></p>
</body>
</html>
Efeknya sama persis sama <b> dan <i> tapi di paragraf yang terakir ini text Gw GANS
sama buriq thanks, itu memiliki makna yang berbeda dari hanya sekedar esetika atau hanya dekorasi
di paragraf sebelumnya
Kalau kalian lihat saya mempunyai 3 buah paragraf dan sebaiknya kita berikan komentar <!--ini tag commentar-->
contoh :
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<!-- contoh tag p, br dan hr -->
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
<hr>
<p>Selamat <b>datang Di</b> <i>Blog Angels</i> <u>Cyber Moon</u></p>
<hr>
<p><strong>Gw GANS </strong> kalian semua <em>buriq thanks :v</em></p>
</body>
</html>
atau Sublime Text sudah menyediakan shortcut atau tombol cepat nya, yaitu kalian tinggal pencet
ctrl+/
Dan ini lah materi yang telah kalian dapat
<!DOCTYPE html>
<html>
<head>
<title>Html Paragraf</title>
</head>
<body>
<!-- contoh tag p, br dan hr -->
<p>Ini paragraf 1</p>
<br>
<p>Ini paragraf 2</p>
<hr>
<!-- contoh tag b, i dan u -->
<p>Selamat <b>datang Di</b> <i>Blog Angels</i> <u>Cyber Moon</u></p>
<hr>
<!-- contoh tag strong dan em -->
<p><strong>Gw GANS </strong> kalian semua <em>buriq thanks :v</em></p>
</body>
</html>
Tag Commentar tadi tidak akan muncul di browser, tag itu hanya untuk menandai saja contoh kek klip kertas, Nah kek gitu trs lu biasa tulisin bab 1 misal. Tag commentar sama seperti itu cuk, dia hanya muncul di codingannya.
Sekian Dari saya, jika ada kesalahan mohon maaf dan dimaklumi karna apa? GW JUGA MANUSIA BIASA YANG TAK SEMPURNA YANG KADANG SALAH, NAMUN HATI KU HANYA SATU CINTA UNTUK MU LUAR BIASA BOHONG NYA EA :v
Thanks To :
- ANGLES CYBER MOON
- TANGGERANG CYBER ARMY
- X-SPYPOISON COMMUNITY
- CLOWNSEC TEAM
- INDOSEC NETWORK
- MALANG XPLOIT CYBER
Belum ada Komentar untuk "HTML Dasar : Paragraf "
Posting Komentar