Atribut HTML


Atribut HTML.


• Semua elemen HTML dapat memiliki atribut.
• Atribut memberikan informasi tambahan tentang elemen
• Atribut selalu ditentukan dalam tag awal
• Atribut biasanya berupa nama / nilai pasangan seperti: nama = "nilai"

Atribut href.


Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman tautan.
Contoh:

<a href="https://www.7kmeter.blogspot.com">7 kilometer blog</a>



Atribut src.


Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan jalur ke gambar yang akan ditampilkan.

Contoh:


<img src="img_loadingkeren.jpg">



Ada dua cara untuk menentukan URL dalam atribut src:

1. URL absolut - tautan ke gambar eksternal yang di-host di situs web lain. Contoh: src="https://7kmeter.blogspot.com/images/img_loadingkeren.jpg".

Catatan: Gambar eksternal mungkin di bawah hak cipta. Jika Anda tidak mendapat izin untuk menggunakannya, Anda mungkin akan melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengontrol gambar eksternal,Tiba-tiba dapat dihapus atau diubah.

2. URL relatif - Tautan ke gambar yang dihosting di dalam situs web. Di sini, URL tidak termasuk nama domain. Jika URL dimulai tanpa garis miring, itu akan relatif terhadap halaman saat ini.
Contoh: src="img_loadingkeren.jpg".


Jika URL dimulai dengan garis miring atau "/", itu akan relatif terhadap domain.
Contoh: src="/images/img_loadingkeren.jpg".



Saran:
Menggunakan URL relatif adalah pilihan yang tepat dan terbaik. Gambar tidak akan hilang jika Anda mengubah domain.


Atribut width dan height


Tag <img> juga harus mengandung atribut width dan height, yang menentukan lebar dan tinggi gambar (dalam piksel):

Contoh:


<img src="img_loadingkeren.jpg" width="500" height="600">





Atribut alt.


Atribut alt yang diperlukan untuk tag <img> menentukan teks alternatif untuk gambar, jika gambar untuk beberapa alasan tidak dapat ditampilkan. Ini bisa disebabkan oleh koneksi yang lambat, atau kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar.

Contoh:

<img src="img_loadingkeren.jpg" alt="Loading yang sangat keren">




Atribut style


Atribut style digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan banyak lagi.

Contoh

<p style="color:red;">Ini adalah paragraf berwarna merah.</p>




Atribut lang.


Anda harus selalu memasukkan atribut lang di dalam tag <html>, untuk mendeklarasikan bahasa halaman web. Ini dimaksudkan untuk membantu mesin pencari dan browser.

Contoh berikut menentukan bahasa Inggris sebagai bahasa :



<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>



Kode negara juga dapat ditambahkan ke kode bahasa dalam atribut lang. Jadi, dua karakter pertama menentukan bahasa halaman HTML, dan dua karakter terakhir mendefinisikan negara.

Contoh berikut menentukan bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negara:



<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>




Atribut Title


Atribut title mendefinisikan beberapa informasi tambahan tentang suatu elemen.

Nilai atribut title akan ditampilkan sebagai tooltip saat Ada mouse di atas elemen:

Contoh:


<p title="Saya adalah Tooltip"> Ini adalah paragraf. </p>





Saran:
Selalu gunakan atribut huruf kecil.
Standar HTML tidak memerlukan atribut dengan huruf kecil.


Atribut title (dan semua atribut lain) dapat ditulis dengan huruf besar atau kecil seperti title atau TITLE.

Namun, W3C merekomendasikan atribut huruf kecil dalam HTML, dan menuntut atribut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.



Saran:
Selalu pakai tanda kutip untuk nilai atribut.
Standar HTML tidak memerlukan kutipan di sekitar nilai atribut. Namun, W3C merekomendasikan kutipan dalam HTML, dan menuntut kutipan untuk tipe dokumen yang lebih ketat seperti XHTML.




<a href="https://www.7kmeter.blogspot.com/html/"> Kunjungi Tutorial HTML kami </a>








<a href=https://www.7kmeter.blogspot.com/html/> Kunjungi Tutorial HTML kami </a>




Oiya, Anda harus menggunakan kutipan. Contoh ini tidak akan menampilkan atribut title dengan benar, karena mengandung spasi

Contoh


<p title=About 7 kilometer>






Kutipan tunggal atau ganda?



Kutipan ganda di sekitar nilai atribut adalah yang paling umum dalam HTML, tetapi kutipan tunggal juga dapat digunakan.

Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi kutipan ganda, maka perlu menggunakan tanda kutip tunggal:

Contoh:


<p title='John "Shotgun" Nelson'>


Atau sebaliknya :



<p title="John 'Shotgun' Nelson">




Ringkasan Bab.


• Semua elemen HTML dapat memiliki atribut
• Atribut href dari <a> menentukan URL halaman tautan
•Atribut src dari <img> menentukan jalur ke gambar yang akan ditampilkan
•Atribut width dan height dari tag <img> menyediakan informasi ukuran untuk gambar
•Atribut alt dari <img> menyediakan teks alternatif untuk suatu gambar
•Atribut style digunakan untuk menambah gaya ke elemen, seperti warna, font, ukuran, dan banyak l agi
•Atribut lang dari tag <html> menyatakan bahasa halaman web
•Atribut title mendefinisikan beberapa informasi tambahan tentang suatu elemen



Komentar