Apa itu Tag?
HTML adalah sebuah markup yang membentuk struktur tubuh halaman web. HTML tersusun dari berbagai element. Dan tiap element, selalu ditulis dengan sebuah tag pembuka <nama-tag>
dan tag penutup </nama-tag>
. Meskipun ada beberapa tag yang hanya perlu dibuka, dan tidak perlu ditutup.
Jadi, tag adalah teks yang berada di antara tanda <..>
dan juga </...>
.
Dan, tag di dalam HTML bertugas untuk membuat atau membangun sebuah elemen [1].
Di antara contoh-contoh tag dalam HTML:
<html>
- elemen root dari dokumen HTML<head>
- untuk mendefinisikan meta data, judul, styles, dan lain-lain dari dokumen HTML<body>
- untuk mendefinisikanbody
dari dokumenHTML
(body adalah bagian yang terlihat oleh user)<p>
- untuk membuat elemen paragraf<a>
- untuk membuat elemen link<button>
- untuk membuat elemen tombol
Apa itu Elemen?
Elemen dalam HTML adalah sebuah komponen HTML. Elemen juga bisa dikatakan sebagai node atau simpul yang membentuk hirarki pohon dokumen HTML [2].
Bayangkan kita memiliki dua buah tombol html seperti berikut:
Berarti, kita memiliki 2 buah elemen HTML berupa tombol.
Cara membuatnya pun dengan menuliskan dua buah tag dengan nama <button>
.
Sebagaimana dalam kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Elemen Pada HTML</title>
</head>
<body>
<button>Tombol Kiri</button>
<button>Tombol Kanan</button>
</body>
</html>
Seperti yang telah dijelaskan di atas, tiap elemen HTML akan membentuk satu node (simpul) tersendiri dalam susuan hirarki HTML. Sehingga jika kita gambar dalam bentuk pohon diagram, penampakan dari 2 tombol di atas adalah seperti ini:
NB: elemen <head>
dan turunannya adalah elemen yang tidak tampak secara langsung pada user. Berbeda dengan elemen <body>
yang mana hasilkan akan langsung terlihat oleh user.
Apa itu Atribut?
Selain dua unsur penting di atas HTML juga memiliki sebuah istilah lain yang tidak kalah penting, yaitu atribut.
Apa itu atribut?
Atribut adalah sebuah tambahan argumen atau aksesoris terhadap suatu elemen HTML. Atribut hanya ditulis pada tag pembuka. Dan atribut berfungsi untuk menambahkan informasi tambahan pada suatu elemen HTML [3].
Contoh:
<img src="https://jagongoding.com/images/jagongoding-logo-full.png">
Kode di atas akan menampilkan sebuah gambar berikut:
Kita juga bisa mengatur panjang dan tinggi dari elemen gambar dengan menambahkan atribut width
dan atribut height
. Perhatikan contoh berikut:
<img
src="https://jagongoding.com/images/jagongoding-logo-full.png"
width="120"
height="40">
Hasilnya:
Penjelasan
- Tag
<img>
bertugas untuk membuat elemen gambar - Tag
<img>
termasuk tag yang hanya perlu pembuka, tanpa tag penutup - Tag
<img>
memiliki atributsrc
,height
danwidth
- Atribut
src
berfungsi untuk menambahkan informasi url gambar yang akan ditampilkan oleh elemen<img>
- Atribut
height
memberikan informasi tinggi gambar - Atribut
width
memberikan informasi lebar gambar
Kesimpulan
Setelah melakukan beberapa percobaan di atas, kita bisa memetik beberapa kesimpulan kunci. Di antaranya:
- HTML adalah dokumen yang tersusun dari berbagai macam elemen
- Elemen didefinisikan dengan menuliskan tag pembuka dan tag penutup (kecuali beberapa elemen yang tidak perlu tag penutup)
- Tag adalah apa yang ada di antara tanda
<...>
dan</...>
- Elemen bisa memiliki atribut, yang berfungsi untuk memberikan informasi tambahan pada suatu elemen
Kode Program Lengkap
Untuk kode program lengkap dari tutorial ini, bisa kalian akses pada repository github html-dasar.
Jangan lupa kasih ⭐⭐
Pertemuan Selanjutnya
Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang struktur dasar dokumen HTML.
Stay tune!
Referensi
[1] https://developer.mozilla.org/en-US/docs/Glossary/Tag - diakses tanggal 14 Februari 2021
[2] https://en.wikipedia.org/wiki/HTML_element - diakses tanggal 14 Februari 2021
[3] https://www.w3schools.com/html/html_attributes.asp - diakses tanggal 14 Februari 2021