Dengan Atribut, kita bisa menyajikan sebuah elemen HTML menjadi lebih lebih beragam dan lebih fleksibel. Kita bisa menambahkan berbagai informasi kedalam sebuah elemen sehingga browser bisa menyajikan dokumen HTML sesuai dengan keinginan kita.
Jadi apa itu Atribut ?
Jika di kaitkan dengan Elemen HTML, atribut ini adalah merupakan fitur yang akan membentuk karakteristik elemen tersebut. Sehingga sebuah elemen yang sama jika diberikan atribut yang berbeda akan memiliki ciri-ciri khusus antara satu dan lainnya saat di tampilkan oleh browser.
Atau..., merujuk w3schools.com, atribut dijabarkan seperti ini :
- Semua Elemen HTML bisa memiliki Atribut
- Atribut memberikan informasi tambahan terhadap suatu elemen
- Atribut ditulis pada tag pembuka (start tag)
- Atribut biasanya terdiri dari nama dan nilainya (name=”value”)
Begini, Misalnya saja kita akan memuat image pada web page dengan elemen <img> dengan script sebagai berikut :
<img src=”gambar.jpg”>
Maka image gambar.jpg akan dimuat oleh browser sesuai dengan ukuran asli file gambar.jpg. Bagaimana kalau kita ingin mengatur agar ukuran image yang dimuat sesuai dengan keinginan kita ?
Kita bisa menentukan tinggi dan lebarnya seperti ini :
Maka gambar.jpg akan dimuat dengan lebar 400 pixel dan tinggi 600 pixel, nah src, width, dan height inilah yang disebut Atribut.
Sekarang kita lihat contoh-contoh Atribut yang sering digunakan dalam Elemen HTML :
Atribut href
Untuk membuat hyperlink pada dokumen HTML, kita menggunakan tag <a>. Agar tag <a> ini bisa membentuk sebuah hyperlink yang sempurna, harus menyertakan atribut href.
Melalui Atribut href ini lah ditentukan URL tujuan dari page link yang kita buat. Contohnya seperti ini :
<a href=”https://easyclasstutorial.blogspot.com/”>Visit Kelas Tutorial</a>
Setelah di jalankan, saat anda klik pada link Visit Kelas Tutorial, maka anda akan dialihkan ke halaman depan blog easyclasstutorial.
Jika kita membuang atribut href pada elemen <a> diatas, maka kata “Visit Kelas Tutorial” tidak akan berfungsi sebagai hyperlink, tapi hanya sebatas kata biasa saja.
Gampang nya anda bisa mencoba script HTML berikut :
<!DOCTYPE html>
<html>
<body>
<a href="https://easyclasstutorial.blogspot.com/">Visit Kelas Tutorial</a>
<br>
<a>Visit Kelas Tutorial</a>
</body>
</html>
Jalankan script, maka hasilnya akan seperti ini :
Atribut src
Atribut src biasanya digunakan untuk menentukan source file image yang akan ditampilkan melalui elemen img atau tag <img>.
Contohnya seperti yang sudah kita singgung diatas.
Atribut alt
Atribut alt ini juga biasanya digunakan pada tag <img>, fungsinya untuk menampilkan teks alternatif saat image yang seharusnya dimuat tidak bisa ditampilkan.
Kenapa tidak bisa ditampilkan ?
Contoh mudahnya, saat nama file image tersebut tidak ada. Misalnya kita menuliskan nama file image “gambar.jpg” sebagai value pada atribut src. Dan ternyata file image dengan nama gambar.jpg tidak ada, maka image tidak akan bisa ditampilkan.
Nah, jika kita menyertakan atribut alt, maka value pada alt inilah yang akan ditampilkan.
Contohnya begini :
<!DOCTYPE html>
<html>
<body>
<img src="gambar.png" alt="HTML DEVELOPMENT Image"> <!-- file image gambar.png ada sehingga akan ditampilkan -->
<br>
<img src="typo.png" alt="HTML DEVELOPMENT Image"> <!-- file image typo.png tidak ada, sehingga nilai alt yang akan tampil -->
</body>
</html>
Note : Jika anda akan mencoba script diatas, anda harus menyimpan file image dengan nama gambar.png terlebih dahulu pada folder dimana anda menyimpan file html yang anda buat. Atau anda bisa menyesuaikan dengan nama file image yang anda simpan.
Atribut style.
Atribut style digunakan untuk menambahkan style pada sebuah elemen, seperti color, font, size, dan yang lainnya. Dengan atribut style ini sebetulnya kita menggunakan CSS yang ditulis langsung pada body script HTML, yaitu pada elemen nya. Contoh :
<p style="color:red;">This is a red paragraph.</p>
Dari contoh-contoh atribut diatas, kesimpulannya dalam menulis atribut harus mengikuti kaidah-kaidah berikut :
- Menulis di dalam tanda kutip (quote) untuk setiap nilai (value) atribut. Baik itu menggunakan double quote ataupun single quote, atau kombinasi dari keduanya.
- Disarankan menulis atribut dengan menggunakan huruf kecil
| Prev. Chapter | Next Chapter |
|---|---|
| ELEMEN-ELEMEN DASAR HTML | HTML HEADINGS |
Tidak ada komentar:
Posting Komentar