Kita telah mempelajari definisi dasar dari HTML pada postingan sebelumnya. Kita juga telah mempelajari struktur dasar, elemen, dan atribut HTML. Setelah mempelajari materi tersebut, saya berharap sobat sudah mengerti maksud dari tag-tag dasar yang menyusun sebuah halaman website. Tag-tag dasar tersebut terdiri dari tag <html>, <head>, <title>, dan <body>.
Penulisan tag yang berpasangan tidak boleh saling bertumpang tindih dengan pasangan tag lain. Contoh penulisan tag yang benar :
<u>
<i>
........
</i>
</u>
Contoh penulisan tag yang saling bertumpang tindih atau tidak benar :
<u>
<i>
........
</u>
</i>
Penulisan tag yang berpasangan tidak boleh saling bertumpang tindih dengan pasangan tag lain. Contoh penulisan tag yang benar :
<u>
<i>
........
</i>
</u>
Contoh penulisan tag yang saling bertumpang tindih atau tidak benar :
<u>
<i>
........
</u>
</i>
Pada materi ini sobat akan belajar tentang fungsi tag-tag tambahan yang ada di HTML, tentunya selain tag-tag dasar yang telah saya sebutkan di atas. Tag ini adalah tag sederhana yang secara umum digunakan oleh seorang pemula atau newbie untuk belajar HTML. Perhatikan tag-tag di bawah ini :
Tag | Fungsi | Contoh |
<b> . . . </b> | Teks Bold/ Cetak tebal | <b>Contoh kalimat bold</b> |
<i> . . . </i> | Teks Italic/ Ctak miring | <i>Contoh kalimat italic</i> |
<u> . . . </u> | Teks Underline/ Garis bawah | <u>Contoh kalimat underline</u> |
<br> | Enter/ Ganti baris | <br> |
<p> | 2 enter/ Paragraf baru | <p> |
<hr> | Membuat garis horizontal | <hr> |
Sobat telah melihat perbedaan setiap hasil tulisan dari setiap tag yang ditulis. Mulai dari format bold, italic, dan underline. Kemudian tag <hr> untuk membuat sebuah garis horizontal. Sedangkan tag <br> adalah untuk enter satu baris dan tag <p> untuk enter dua baris. Kita bisa menyimpulkan bahwa tag <p> sama dengan dua kali tag <br>.
| Tag | Fungsi | Contoh |
| <big>. . . . </big> | Membuat text lebih besar | <big>Contoh kalimat big</big> |
| <small>. . . </small> | Membuat text lebih kecil | <small>Contoh kalimat small</small> |
| <strike>. . </strike> | Membuat text strike/ tercoret | <strike>Contoh kalimat strike</strike> |
| <pre>. . . . .</pre> | Menampilkan text seperti apa adanya | <pre>Contoh kalimat preformated</pre> |
| <sup>. . . . .</sup> | Membuat text superscript | <sup>Contoh kalimat superscript</sup> |
| <sub>. . . . .</sub> | Membuat text subscript | <sub>Contoh kalimat sub script</sub> |
Selain tag <big> dan tag <small> yang menampilkan ukuran besar atau kecil pada text, terdapat pula tag header yang menampilkan berbagai ukuran text. Silahkan sobat lihat tabel di bawah ini :
Tag | Fungsi | Contoh |
<h1>. . . .</h1> | Membuat heading h1 | <h1>Contoh heading-1</h1> |
<h2>. . . .</h2> | Membuat heading h2 | <h2>Contoh heading-2</h2> |
<h3>. . . .</h3> | Membuat heading h3 | <h3>Contoh heading-3</h3> |
<h4>. . . .</h4> | Membuat heading h4 | <h4>Contoh heading-4</h4> |
<h5>. . . .</h5> | Membuat heading h5 | <h5>Contoh heading-5</h5> |
<h6>. . . .</h6> | Membuat heading h6 | <h6>Contoh heading-6</h6> |
Sobat telah mengetahui perbedaan ukuran antara heading 1 sampai heading 6. Perlu sobat ketahui bahwa ukuran text normal yang sering kita pakai adalah sama dengan heading 4. Sedangkan ukuran heading 5 dan heading 6 adalah ukuran text normal dikurang 1 dan 2. Dan ukuran heading 3, 2, dan 1 adalah ukuran text normal ditambah 1, 2, dan 3. Untuk lebih detailnya, saya akan membahas materi ini pada postingan selanjutnya karena materi ini termasuk kedalam materi atribut lanjut HTML.
Sekian materi yang saya sampaikan hari ini. Silahkan sobat pelajari semua materi dasar HTML supaya lebih mudah nantinya dalam mempelajari materi yang lebih mendalam. Saya akan mencoba menulis materi-materi ringan terlebih dahulu kepada sobat. Silahkan tulis pertanyaan jika ada materi yang kurang jelas di kolom komentar. Terimakasih :)
No comments:
Post a Comment