Kita telah melihat beberapa tag HTML dan penggunaannya seperti tag heading <h1>, <h2>, tag paragraf <p> dan tag lainnya.
Sejauh ini kita masih menggunakan tag dalam bentuk yang paling sederhana, tetapi sebagian besar tag HTML juga dapat memiliki atribut, yang merupakan tambahan sedikit informasi.
Atribut digunakan untuk mendefinisikan karakteristik elemen HTML dan ditempatkan di dalam elemen tag pembuka.
Semua atribut terdiri dari dua bagian, yaitu nama dan nilai:
- Nama adalah properti yang ingin Anda tetapkan. Misalnya, elemen paragraf <p> contoh attribut align, digunakan untuk mengatur rataan dari paragraph, apakah Anda ingin tulisan rata kiri, tengah atau kanan.
- Nilai adalah apa yang Anda inginkan dari nilai properti yang akan ditetapkan. Nilai ini selalu dimasukkan dalam tanda kutip. Contoh di bawah ini menunjukkan tiga nilai dari atribut align: left, center dan right.
Nama atribut dan nilai atribut bersifat case-insensitive (tidak dipengaruhi huruf besar atau kecil). Namun, World Wide Web Consortium (W3C) merekomendasikan atribut / nilai atribut ditulis menggunakan huruf kecil dalam rekomendasi HTML 4 mereka.
Contoh :
<! DOCTYPE html> <html> <head> <title>Contoh Penggunaan Atribut Align </ title> </head> <body> <p align = "left"> Ini adalah tulisan rata kiri</p> <p align = "center"> Ini adalah tulisan rata tengah</p> <p align = "right"> Ini adalah tulisan rata kanan</p> </body> </html>
Code ini akan menampilkan hasil sebagai berikut :
Ini adalah tulisan rata kiri
Ini adalah tulisan rata tengah
Ini adalah tulisan rata kanan
Atribut Inti
Empat atribut inti yang dapat digunakan pada sebagian besar elemen HTML (meskipun tidak semua) adalah:
- Id
- Title
- Class
- Style
Atribut Id
Atribut id dari tag HTML dapat digunakan untuk mengidentifikasi secara unik setiap elemen di dalam halaman HTML. Ada dua alasan utama mengapa Anda mungkin ingin menggunakan atribut id pada elemen:
- Jika sebuah elemen membawa atribut id sebagai pengidentifikasi unik, adalah mungkin untuk mengidentifikasi hanya elemen dan isinya.
- Jika Anda memiliki dua elemen dengan nama yang sama dalam halaman Web (atau style sheet/), Anda dapat menggunakan atribut id untuk membedakan antara elemen yang memiliki nama yang sama.
Kita akan membahas style sheet pada tutorial terpisah. Untuk saat ini, mari kita gunakan atribut id untuk membedakan antara dua elemen paragraf seperti yang ditunjukkan di bawah ini.
Contoh :
<p id = “html”>Paragraf ini menjelaskan apa itu HTML </ p>
<p id = “css”> Paragraf ini menjelaskan apa itu Cascading Style Sheet </ p>
Atribut title
Atribut judul memberikan judul yang disarankan untuk sebuah elemen. Sintaks ini berguna untuk memberikan “judul” pada elemen mirip seperti atribut id:
Perilaku atribut ini akan bergantung pada elemen yang membawanya, meskipun sering ditampilkan sebagai tooltip (keterangan) ketika kursor muncul di atas elemen atau saat elemen sedang dimuat.
Contoh :
<! DOCTYPE html> <html> <head> <title> Contoh Pengunaan Atribut title </ title> </head> <body> <h3 title = "Halo HTML!"> Contoh Tag Judul Heading </h3> </body> </html>
Code ini akan menampilkan hasil sebagai berikut :
Contoh Tag Judul Heading
Sekarang coba arahkan kursor ke kalimat “Contoh Tag Judul Heading” di atas, Anda akan melihat bahwa judul apa pun yang Anda gunakan dalam kode title Anda keluar sebagai keterangan pada kursor.
Atribut class
Atribut class digunakan untuk mengaitkan elemenHTML dengan style sheet, dan menentukan class elemen.
Anda akan mempelajari lebih lanjut tentang penggunaan atribut class ketika Anda mempelajari Cascading Style Sheet (CSS).
Jadi untuk sekarang sambil lewat saja dulu.
Nilai atribut juga dapat berupa daftar nama class yang dipisahkan dengan spasi. Sebagai contoh:
Atribut style
Atribut style memungkinkan Anda untuk menentukan aturan Cascading Style Sheet (CSS) dalam elemen.
<! DOCTYPE html> <html> <head> <title> Atribut style </title> </head> <body> <h3 title = "Halo HTML!"> Contoh teks ... </ p> </body> </html>
Code ini akan menampilkan hasil sebagai berikut
Contoh teks …
Oke, pada saat ini kita belum belajar CSS, jadi mari kita belajar sambil lewat saja. Yang penting Anda perlu memahami apa itu atribut HTML dan bagaimana mereka dapat digunakan saat memformat sebuha konten.
Atribut internationalization
Ada tiga atribut internasionalisasi, yang tersedia untuk sebagian besar (meskipun tidak semua) elemen XHTML.
Atribut dir
Atribut dir berguna untuk memberitahu browser arah penulisan teks. Atribut dir memilki 2 nilai seperti yang Anda lihat dalam tabel berikut:
Value |
Arti |
ltr | Left to right/Kiri ke kanan (nilai default) |
rtl | Right to left/Kanan ke kiri (untuk bahasa seperti Ibrani ata Arab yang dibaca dari kanan ke kiri) |
Contoh :
<! DOCTYPE html> <html dir = "rtl"> <head> <title> Arah Tampilan </title> </head> <body> Beginilah cara IE 5 menerjemahkan teks dari arah kanan ke kiri. </body> </html>
Ketika atribut dir digunakan dalam tag <html>, itu menentukan bagaimana teks akan ditampilkan dalam seluruh dokumen. Ketika digunakan dalam tag lain, itu menampilkan arah teks hanya untuk konten dari tag tersebut.
Atribut lang
Atribut lang berfungsi untuk menunjukkan bahasa utama yang digunakan dalam dokumen.
Nilai-nilai atribut lang adalah kode bahasa standar dua karakter ISO-639. Periksa Kode Bahasa HTML: ISO 639 untuk daftar lengkap kode bahasa.
Contoh :
<! DOCTYPE html> <html lang = "en"> <head> <title> Halaman Bahasa Inggris </title> </head> <body> This page is using English Language </body> </html>
Atribut xml: lang
Atribut xml: lang adalah pengganti XHTML untuk atribut lang. Nilai atribut thexml: lang harus berupa kode negara ISO-639 seperti yang disebutkan di bagian sebelumnya.
Atribut Generik
Berikut adalah tabel dari beberapa atribut lain yang dapat digunakan dengan banyak tag HTML.
Attribute | Options | Fungsi |
Align | right, left, center | Mengatur perataan teks |
Valign | top, middle, bottom | Mengatur perataan tag secara vertical dalam elemen HTML |
Bgcolor | Numeric, hexadecimal, nilai RGB | Mengatur warna latar belakang dalam sebuah elemen |
Background | URL | Mengatur gambar alatar belakang dala sebuah elemen |
Id | Diatur pengguna | Memberi nama pada sebuah elemen untuk digunakan dengan CSS |
Class | Diatur pengguna | Mengklasifikasikan elemen untuk penggunaan CSS |
Width | Nilai numeric | Menentukan lebar dari table, gambar atau sel pada table |
Height | Nilai numeric | Menentukan tinggi dari table, gabar atau sel pada table |
title | Diatur pengguna | Memberi “informasi” judul pada elemen |
Kita akan melihat contoh terkait setelah melanjutkan untuk mempelajari tag HTML lainnya.