Atribut HTML merupakan informasi tambahan mengenai elemen HTML.
Section Artikel
Atribut HTML
- Semua elemen HTML bisa memiliki atribut
- Atribut memberikan informasi tambahan tentang elemen
- Atribut selalu ditentukan di tag awal
- Atribut biasanya seperti pasangan nama / nilai seperti: name = “value”
Atribut href
Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman yang dituju
Contoh :
<a href="https://www.DosenIT.com">Kunjungi DosenIT.com</a>
Atribut src
Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan gambar yang akan ditampilkan pada halaman
Contoh :
<img src="img_girl.jpg">
Ada dua cara untuk menentukan URL di atribut src:
1. URL Mutlak - Tautan ke gambar eksternal yang dihosting di situs web lain.
Contoh: src = "https://www.example.com/images/img_girl.jpg".
Catatan: Gambar eksternal mungkin memiliki hak cipta. Jika kita tidak mendapatkan izin untuk menggunakannya, kita mungkin melanggar undang-undang hak cipta. Selain itu, kita tidak dapat mengontrol gambar eksternal, gambar itu bisa tiba-tiba dihapus atau diubah.
2. URL Relatif - Tautan ke gambar yang dihosting di dalam situs web. Di sini, URL tidak menyertakan nama domain. Jika URL dimulai tanpa garis miring, itu akan menjadi relatif terhadap halaman saat ini.
Contoh: src = "img_girl.jpg".
Jika URL dimulai dengan garis miring, itu akan menjadi relatif terhadap domain.
Contoh: src = "/ images / img_girl.jpg".
Tip: Cara terbaik adalah menggunakan URL relatif. URL relatif tidak akan rusak jika kita mengubah domain.Atribut width dan height
Tag juga harus berisi atribut weight dan height, yang menentukan lebar dan tinggi gambar (dalam piksel):
Contoh :
<img src="img_girl.jpg" width="500" height="600">
Atribut alt
Atribut alt diperlukan untuk tag <img> untuk menentukan teks alternative pada gambar, jika gambar tidak dapat ditampilkan karena suatu alasan. Ini bisa terjadi karena koneksi yang lambat, atau kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar.
Contoh :
<img src="img_girl.jpg" alt="Girl with a jacket">
Contoh :
Lihat apa yang terjadi jika kita mencoba menampilkan gambar yang tidak ada:
<img src="img_typo.jpg" alt="Girl with a jacket">
kamu akan mempelajari lebih lanjut tentang gambar di bab Gambar HTML .
Atribut Style
Atribut style digunakan untuk menambahkan gaya ke elemen, seperti color, font, size, dan lainnya.
Contoh :
<!DOCTYPE html> <html lang="en-US"> <body> <p style="color:red;">Ini warna merah.</p> </body> </html>
Kamu akan mempelajari lebih lanjut tentang style di bab Style HTML.
Atribut lang
Kita harus selalu menyertakan atribut lang di dalam tag <html> , untuk menyatakan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh berikut menetapkan bahasa Inggris sebagai bahasa:
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
Kode negara juga dapat ditambahkan ke kode bahasa di atribut lang. Jadi, dua karakter pertama menentukan bahasa halaman HTML, dan dua karakter terakhir menentukan negara.
Contoh berikut menetapkan bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negaranya:
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
Kamu dapat melihat semua kode bahasa di Referensi Kode Bahasa HTML.
Atribut title
Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen.
Nilai atribut title akan ditampilkan sebagai tooltip saat kita mengarahkan mouse ke elemen:
<p title="I'm a tooltip">This is a paragraph.</p>
Ringkasan
- Semua elemen HTML dapat memiliki atribut
- Atribut href <a> menentukan URL halaman yang dituju link
- Atribut src dari <img> menentukan jalur ke gambar yang akan ditampilkan
- Atribut lebar dan tinggi <img> memberikan informasi ukuran untuk gambar
- Atribut alt <img> menyediakan teks alternatif untuk gambar
- Atribut style digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnya
- Atribut lang dari tag <html> mendeklarasikan bahasa halaman Web
- Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen
