Ads by Yasya El Hakim
Atribut pada HTML

Atribut dapat digunakan untuk memberikan informasi tambahan tentang elemen HTML.

Atribut HTML

  • Semua elemen HTML dapat memiliki atribut.
  • Atribut dapat digunakan untuk memeberikan Informasi tambahan tentang elemen.
  • Atribut harus ditulis pada Start Tag.
  • Atribut dapat ditulis seperti: nama="nilai".

Atribut href

Link pada HTML dapat ditulis dengan tag <a>. Tujuan dari link dapat ditentukan dengan menggunakan atribut href:

Contoh

<a href="https://elcreativeacademy.blogspot.com/">Ini adalah Link</a>
See the Pen 11. Atribut Link pada HTML by Yasya El Hakim (@elhakimyasya) on CodePen.

Kalian akan mempelajari lebih lanjut tentang tag <a> pada bagian selanjutnya.

Atribut src

Gambar pada HTML dapat ditulis dengan menggunakan tag <img>.
Nama atau URL gambar dapat ditentukan dengan menggunakan atribut src:

Contoh

<img src="https://1.bp.blogspot.com/-2T7bcPgd26o/XWoKitlsB7I/AAAAAAAAGbU/LpxigxrHGSwp7RxjG5gYfB_UsEQEwiazgCLcBGAs/s1600/apple-icon-120x120.png" alt="EL Creative Academy"/>
See the Pen 12. Atribut img src pada HTML by Yasya El Hakim (@elhakimyasya) on CodePen.

Atribut width dan height

Gambar pada HTML juga dapat memiliki atribut width (Lebar) dan height (Tinggi):

Contoh

<img src="https://1.bp.blogspot.com/-2T7bcPgd26o/XWoKitlsB7I/AAAAAAAAGbU/LpxigxrHGSwp7RxjG5gYfB_UsEQEwiazgCLcBGAs/s1600/apple-icon-120x120.png" alt="EL Creative Academy" width="120" height="120"/>

Secara Default, Lebar dan Tinggi gambar ditentukan dengan ukuran Pixel, pada kode diatas lebar dari gambar adalah 120 (width="120") artinya, lebarnya adalah 120 Pixel.

Kalian akan mempelajarinya lebih lanjut pada Bagian lain.

Atribut alt

Atribut alt berfungsi untuk memberikan teks alternatif yang ingin digunakan, jika gambar tidak dapat/gagal ditampilkan. Maka, teks alternatif itu akan terlihat.
Nilai dari atribut alt dapat dibaca dan dilihat pada Browser.

Contoh

<img src="blank" alt="EL Creative Academy" width="120" height="120"/>
See the Pen 13. Atribut alt pada HTML by Yasya El Hakim (@elhakimyasya) on CodePen.

Atribut style

Atibut style berfungsi untuk menentukan tampilan/style dari elemen seperti warna, font, ukuran, dll.

Contoh

<p style="color:red">Paragraf.</p>
See the Pen 14. Atribut style pada HTML by Yasya El Hakim (@elhakimyasya) on CodePen.

Kalian akan mempelajari tentang Styling pada bagian selanjutnya.

Atribut lang

Kalian dapat menentukan bahasa dari Dokumen HTML dengan menggunakan atribut lang pada tag <html>.
Menentukan bahasa sangatlah penting untuk aksebilititas dan search engine:
<!DOCTYPE html>
<html lang="id">
<body>

...

</body>
</html>

Dua angka pada nilai atribut lang merupakan inisial dari bahasa (id). Jika terdapat dialek, maka kalian bisa menggunakan dua huruf lagi setelahnya (en-US).

Atribut title

Disini, atribut title dapat kita tambahkan pada elemen <p>. Nilai dari atribut title akan tampil sebagai Tooltip ketika kalian mengarahkan mouse ke teks Paragraf:

Contoh

<p title="Saya adalah Tooltip">
Arahkan mouse kearah teks paragraf untuk menampilkan atribut title sebagai tooltip.
</p>
See the Pen 15. Atribut title pada HTML by Yasya El Hakim (@elhakimyasya) on CodePen.

Gunakan Huruf Kecil pada Atribut

Atribut title dapat ditulis dengan menggunakan huruf besar ataupun kecil seperti title atau TITLE.
Kami menyarankan agar kalian selalu menggunakan huruf kecil.

Gunakan Tanda Petik Dua

Atribut href yang sudah saya jelaskan diatas, dapat ditulis tanpa menggunakan tanda petik dua ("), hasilnya akan sama tetapi tidak akan valid:

Salah

<a href=https://elcreativeacademy.blogspot.com/> 

Benar

<a href="https://elcreativeacademy.blogspot.com"/> 

Tanda Petik Satu atau Dua

Kalian bisa menggunakan tanda petik satu (') atau petik dua (") pada setiap nilai atribut.
Dalam situasi yang sama, ketika nilai atribut memiki dua tanda petik, maka diawalnya harus menggunakan satu tanda petik:
<p title='Aku "Cinta" Kamu'>

Ataupun sebaliknya:
<p title="Aku 'Cinta' Kamu">

Ringkasan

  • Semua elemen HTML dapat memiliki atribut.
  • Atribut title berupa informasi (Tooltip).
  • Atribut href terdiri dari link tujuan.
  • Atribut width dan height berupa ukuran gambar.
  • Atribut alt terdiri dari teks.
  • Selalu gunakan huruf kecil dalam penulisan HTML.
  • Selalu gunakan tanda petik untuk nilai atribut.

Sebelumnya: Tutorial Lengkap HTML: Elemen pada HTML - Bagian 4
Selanjutnya: Tutorial Lengkap HTML: Heading pada HTML - Bagian 6
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya