Sebelumnya di part intro saya sedikit menjelaskan tentang HTML dan sebuah contoh struktur file HTML. Di postingan ini kita akan membahas tag-tag yang berhubungan dengan teks. Saat membuat web page, kita membungkus konten web page kita dengan tag atau biasa juga disebut dengan markup. Tag ini nantinya memberikan informasi tambahan dan memberi tahu browser agar menunjukkan conten yang sesuai dengan struktur.
Ada 2 jenis markup pada HTML (di part ini dalam konteks teks), yaitu
-
Structural markup, elemen yang digunakan untuk menjelaskan apakah teks yang kita ketik merupakan heading atau paragraf
-
Semantic markup, elemen yang memberi informasi tambahan untuk menambahkan teks emphasis, teks yang mengandung arti tertentu, kalimat kutipan, dan sebagainya
Heading
HTML mempunyai 6 level heading, mulai dari <h1> sampai <h6>. <h1> digunakan untuk main heading, atau judul besar, <h2> digunakan untuk subheading. Jika kita ingin menambahkan section tertentu pada subheading, kita harus menggunakan <h3>, dan seterusnya.
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Secara default, browser akan menampilkan <h1> sebagai heading dengan ukuran font paling besar, dan <h6> akan ditunjukkan dengan font yang paling kecil dibanding heading lainnya. Namun, kita bisa mengatur ukurannya sesuai dengan yang kita inginkan dengan CSS, yang akan dibahas di lain waktu.
Paragraf
Untuk membuat paragraf, bungkus teks dengan opening <p> tag dan closing </p> tag. Secara default browser akan menunjukkan tiap paragraf ada di baris baru, dan membuat jarak diantara tiap paragraf.
<p>Ini adalah contoh paragraf</p>Bold dan Italic
Untuk membuat tulisan cetak tebal (bold), kita bisa membungkus teks dengan tag <b> dan </b>. Sementara untuk tulisan cetak miring (italic) bisa dengan menggunakan tag <i> dan </i>.
<p>Ini adalah contoh paragraf dengan tulisan cetak <b>tebal</b> dan cetak <i>miring</i> di dalamnya</p>Ini adalah contoh paragraf dengan tulisan cetak tebal dan cetak miring di dalamnya
Superscript dan Subscript
Jika teman-teman ingin menulis formula matematika sebagai contoh 2 pangkat 3, teman-teman bisa membungkus angka tiga dengan tag <sup> dan </sup>. Nantinya akan menjadi seperti ini: 23. Jika teman-teman ingin menunulis teks seperti CO2, teman-teman bisa menggunakan tag <sub> dan </sub>.
Itu saja untuk postingan ini, jika teman-teman punya pertanyaan, silahkan tinggalkan di kolom komentar. Selanjutnya, kita akan membahas Semantic Markup pada HTML.
Tidak ada komentar:
Posting Komentar
comments...