<!-- -->
1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.
Berikut ini daftar tag yang wajib ada di HTML:
<!DOCTYPE html> — untuk deklarasi type dokumen;<html> — tag utama dalam HTML;<head> — untuk bagian kepala dari dokumen;<title> — untuk judul web;<body> — untuk bagian body dari dokumen.
2. Gunakan Huruf Kecil
Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja.
Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.
Tapi khusus untuk tag <!DOCTYPE html>.. ia ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.
Tapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.
Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.
Apa itu Elemen?
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.
Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan Node teks.
Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan beberapa atribut
Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi berupa teks, yakni Hello World!.
Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita sebut dengan nested element atau elemen di dalam elemen.
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:
Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk multimedia, script, tabel, metadata, dll. Nanti kita akan pelajari ini secara bertahap.
Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen <a>, <img>, <video>, dll.
Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link.
Jumlah atribut pada elemen bisa lebih dari satu.
Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atrubut width dan height adalah atribut yang mengatur ukurannya.
Jenis-jenis Atribut HTML
Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.
Berikut ini jenis-jenis atribut yang harus diketahui:
1. Atribut Global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.
Berikut ini daftar atribut global dan fungsinya:
| Nama Atribut | Deskripsi atau fungsi |
|---|
accesskey | Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen |
class | Menentukan class CSS yang akan digunakan |
contenteditable | Menentukan isi elemen bisa diedit atau tidak |
data-* | Digunakan untuk menyimpan data |
dir | Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya) |
draggable | Menentukan apakah elemen bisa di drag atau tidak |
hidden | untuk menyembunyikan elemen |
id | Menentukan id unik untuk elemen |
lang | Menentukan bahasa yang digunakan untuk isi elemen |
spellcheck | Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak |
style | Menentukan inline CSS untuk elemen |
tabindex | Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan) |
title | Menentukan informasi tambahan tentang elemen |
translate | Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak |
2. Atribut Event
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman Javascript.
Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:
| Nama atribut | Nilai | Fungsi: Menjalankan script |
|---|
onafterprint | kode javascript | setelah dokumen dicetak |
onbeforeprint | kode javascript | sebelum dokumen dicetak |
onbeforeunload | kode javascript | sebelum saat dokumen tidak ter-load |
onerror | kode javascript | saat terjadi error |
onhashchange | kode javascript | saat terjadi perubahan pada bagian anchor di URL |
onload | kode javascript | setelah loading selesai |
onmessage | kode javascript | saat ada pesan |
onoffline | kode javascript | saat tiba-tiba offline |
ononline | kode javascript | saat tiba-tiba online |
onpagehide | kode javascript | saat user tidak sedang membuka halaman web |
onpageshow | kode javascript | saat user membuka kembali halaman web |
onpopstate | kode javascript | saat history browser berubah |
onresize | kode javascript | saat ukuran jendela browser berubah |
onstorage | kode javascript | saat area penyimpanan (Web Storage) di-update |
onunload | kode javascript | saat web browser ditutup |
3. Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain.
Contoh:
| Nama atribut | Bisa dipakai di tag |
|---|
src | <audio>, <embed>, <iframe>, <img>, dll |
href | <a>, <link> |
action | <form> |
autoplay | <audio>, <video> |
Penulisan atribut sebenarnya gampang.
Namun, ada beberapa hal yang perlu diperhatikan agar penilisannya benar dan valid:
1. Gunakan Huruf Kecil
Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C.
Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga mudah terbaca.
2. Guanakan Tanda Petik
Gunkan tanda petik untuk mengisi nilai atribut yang mengandung teks.
Mengapa?
Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.
Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal (').
Nah untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.
Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan boleh tidak.
3. Penggunaan Spasi
Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan spasi.
Lalu, spasis juga digunakan untuk memisahkan dua atau lebih atribut.
Komentar
Posting Komentar