Pada artikel sebelumnya kita mengetahui bahwa HTML tersusun atas tag-tag dengan format seperti ini:
<tag>(Inner HTML)</tag>
di mana <tag>
merupakan tag pembuka, dan </tag>
merupakan tag penutup. Rangkaian yang kita tulis ini disebut sebagai elemen.
Element
Perhatikan contoh berikut ini:
<h1 align="center">Hello or Goodbye?</h1>
<p>
<b><i>안녕</i></b> <i>(an-nyeong)</i> memiliki dua makna, yaitu "halo" dan "sampai jumpa". Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
</p>
Hello or Goodbye?
안녕 (an-nyeong) memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
Pada dasarnya, setiap elemen memiliki tiga aspek, yakni tag, attribute, dan Inner HTML.
<h1 align="center">Hello or Goodbye?</h1>
Pada contoh di atas, h1
merupakan tag elemen, align
adalah nama atribut, center
adalah nilai atribut tersebut, dan Hello or Goodbye?
merupakan Inner HTML dari elemen tersebut.
Mari kita lihat fungsi dari masing-masing aspek elemen tersebut.
Tag
Tag pada elemen berfungsi untuk menentukan jenis dari elemen.
Tag | Fungsi |
h1 | Membuat judul (heading) tingkat 1 |
p | Membuat paragraf |
b | Cetak tebal (bold) |
i | Cetak miring (italic) |
Harap diingat bahwa urutan penutup tag harus sesuai dengan urutan pembuka tag. Seperti contoh tulisan “안녕” di atas, jika urutan pembuka tag adalah B lalu I, maka penutupnya harus I terlebih dulu diikuti oleh B.
Inner HTML
Seluruh isi yang tertera di dalam elemen disebut Inner HTML. Inner HTML bisa berupa teks, elemen lain, maupun gabungan keduanya.
Jika dijabarkan, susunan elemen-elemen dari kode HTML contoh diatas adalah:
- <H1>
- Hello or Goodbye?
- <P>
- <B>
- <I>
- 안녕
- <I>
- <I>
- (an-nyeong)
- memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah.
- <B>
Elemen | Inner HTML |
H1 | Hello or Goodbye? |
P | <b><i>안녕</i></b> <i>(an-nyeong)</i> memiliki dua makna, yaitu “halo” dan “sampai jumpa”. Sehingga kata ini diucapkan baik saat bertemu maupun saat berpisah. |
B | <i>안녕</i> |
I | 안녕 |
I | (an-nyeong) |
Attribute
Atribut merupakan parameter tambahan yang bisa kita berikan pada suatu elemen untuk mengubah perilaku elemen tersebut atau untuk menyimpan data tertentu terkait dengan elemen tersebut. Setiap jenis elemen memiliki atribut-atribut yang berbeda.
Pemberian atribut align="center"
seperti pada elemen H1 di atas menjadikan isi tulisan berada di tengah. Jika ingin membuat tulisan rata kanan, bisa kita ubah nilainya dengan "right"
.
Di samping atribut-atribut yang berlaku secara umum (dapat diterapkan pada hampir semua elemen), ada juga atribut yang spesifik hanya untuk tag-tag tertentu. Mengenai atribut-atribut apa saja yang didukung oleh masing-masing tag akan dibahas pada kesempatan berikutnya.