Tag dan Atributnya
Tag
Sebuah web browser membaca sebuah dokumen HTML dari atas ke bawah, kiri ke kanan. Setiap kali browser menemukan tag, maka akan ditampilkan seadanya (paragraf tampak seperti paragraf, tabel tampak seperti tabel, dll). Tag memiliki 3 bagian utama: tag pembuka, konten, dan tag penutup. Ingatlah bahwa selesai tag disebut elemen.
Ketika Anda akan belajar, mungkin ada ratusan tag HTML. Tabel, gambar, daftar, formulir, dan segala sesuatu yang ditampilkan pada halaman web memerlukan penggunaan satu atau dua tag atau bahkan lebih.
Seperti telah disebutkan pada materi Pengenalan HTML, bahwa tag terdiri dari tag pembuka dan tag penutup dan tetap terdiri dari 3 bagian (tag pembuka, konten dan tag penutup). Tapi ingatlah bahwa tidak semua tag mutlak memerlukan tag penutup, namun sebagian besar tag memerlukan tag penutup.
Perhatikan bahwa format penulisan tag yang diikuti tag penutup haruslah seperti berikt.
<tagPembuka>konten</tagPenutup>
Sebagai bahan contoh lihat source code berikut.
<p>hai... lihat,
aku adalah paragraph dan <b>aku tampak dicetak tebal di layar browser</b></p>
Ada tag yang secara otomatis akan membuat tag penutupnya, yakni tag <P>, namun saya anjurkan untuk selalu memberi tag penutup jika memang tag tersebut memiliki tag penutup karena kekurangan satu tag penutup saja tampilan dan layout webpage Anda akan menjadi berantakan.
Ada beberapa tag yang tidak mengikuti cetakan atau pola yang telah saya sebutkan di atas. Beberapa contohnya adalah <BR>, <IMG>, dll. Dalam satu hal, mereka masih memiliki 3 bagian (pembuka, penutup dan konten). Namun tag ini tidak memerlukan tag penutup melainkan cukup dengan memberi versi modifikasi. Alasannya adalah bahwa tag ini tidak benar-benar memerlukan konten. Ada pula sebagian dari mereka hanya butuh URL sumber dan ini adalah informasi yang sudah cukup bagi web browser untuk menampilkan tag dengan benar (image tag). Mari kita lihat satu baris tag berikut.
<BR>
Untuk memberitahu browser tentang apa yang kita inginkan untuk menempatkan sebuah break line (carriage return) ke suatu lokasi, kita tidak perlu mengetik <br> linebreak </br>. Jika setiap baris tag break line memerlukan tiga komponen, akan menjadi mubazir dengan banyak tag. Sebaiknya solusi yang lebih baik adalah menggabungkan tag pembukaan dan penutupan ke dalam satu format. Tag lain juga telah dimodifikasi seperti tag gambar dan input tag. Caranya cukup memberikan slash (/) pada akhir tag, misalnya <BR />, <IMG src=... />, dan lain-lain.
<IMG src="mypic.jpg" /> - Image Tag
<BR /> - Line Break Tag
<INPUT type="text" size="12" /> - Input Field
Seperti yang dapat Anda lihat dari tag gambar di atas, browser Anda benar-benar mampu menafsirkan tag ini selama kita mengirim informasi ke browser di mana gambar tersebut ditemukan dengan menggunakan atribut src.
Atribut
Atribut digunakan untuk memperkuat tag. Yang di maksud memperkuat di sini adalah bahwa ketika sebuah browser web menerjemahkan sebuah tag, itu juga akan mencari dan menetapkan atribut dan kemudian menampilkan elemen (tag + atribut) secara keseluruhan. Pada titik tertentu Anda mungkin ingin memberikan elemen body warna latar belakang atau mungkin mengubah lebar tabel. Semua hal ini hanya dapat dicapai dengan menggunakan Atribut.
Banyak tag HTML memiliki keunikan dalam mengatur atribut mereka sendiri. Ini akan saya dibahas karena setiap tag diperkenalkan di seluruh tutorial. Sekarang kita akan memfokuskan pada satu set atribut generik yang dapat digunakan pada hampir setiap tag HTML yang ada.
Atribut ditempatkan dalam tag pembuka dan mereka mengikuti sintaks (format) yang tepat. Berikut tabel atribut lain yang mudah digunakan dengan banyak tag HTML.
Lebih jelasnya, atribut adalah perintah yang diberikan di dalam sebuat tag. Sebagai contoh kita ambil sebuah tag image seperti berikut:
<IMG src="..." width="200" height="200" />
Dari contoh di atas, IMG adalah bagian yang disebut sebagai tag sedangkan atribut pada tag IMG tersebut terdiri dari src, width dan height. Mengenai atribut yang berlaku pada tiap-tiap tag akan dibahas di setiap bagian.
| Atribut | Pilihan | Nilai Default | Fungsi |
|---|---|---|---|
| align | right, left, center | left | Perataan horizontal |
| valign | top, middle, bottom | middle | Perataan secara vertikal |
| bgcolor | numeric, hexidecimal, RGB values | Warna latar pada konten sebuah elemen (tag) | |
| background | URL | Gambar latar pada konten sebuah elemen (tag) | |
| id | User Defined | Nama sebuah elemen yang menggunakan CSS (Cascading Style Sheets) | |
| class | User Defined | Class sebuah elemen yang menggunakan CSS (Cascading Style Sheets) | |
| width | Numeric Value | Spesifikasi lebar tabel, gambar, sel, elemen, dll dapam satuan pixel atau persen (%) | |
| height | Numeric Value | Spesifikasi tinggi tabel, gambar, sel, elemen, dll dapam satuan pixel atau persen (%) | |
| title | User Defined | Tooltip pada elemen |
Sebenarnya masih banyak atribut yang berlaku sebara global dalam sebuah tag, namun saya kira atribut-atribut di atas adalah atribut yang sering digunakan dalam menggunakan tag pada dokumen HTML.