![[Belajar HTML #5] Atribut HTML - Pengenalan Jenis Atribut HTML dan Contohnya](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxrM1IO0TaO2ntmU9LMi_DXE9qhC68CoFYeImB-hkeScl-Si4uwkRz-XNjWypsycJLmh2PrjvMk9QrYlV9ZgygQ4-jwIPPsBmerwS1nGCuC4hFKLrsMJOUA-KVV6Adj9oaElccA7MlrYM/w920-h400-p-k-no-nu/Atribut+HTML.jpg)
Atribut HTML
Atribut memberikan informasi tambahan tentang elemen HTML.
- Semua elemen HTML dapat memiliki atribut
- Atribut memberikan informasi tambahan tentang suatu elemen
- Atribut selalu ditentukan dalam tag awal
- Atribut biasanya datang dalam pasangan nama / nilai seperti: name="value"
Atribut href
Tautan HTML didefinisikan dengan <a> tag. Alamat tautan ditentukan dalam href atribut:
Contoh:
<a href="https://www.sulivanproject.com">Ini adalah sebuah link</a>Anda akan mempelajari lebih lanjut tentang tautan dan <a> tag di tutorial ini nanti.
Atribut src
Gambar HTML didefinisikan dengan <img> tag.
Nama file sumber gambar ditentukan dalam src atribut:
Contoh:
<img src="img_girl.jpg">Atribut width dan height
Gambar HTML juga memilikiwidth dan height atribut, yang menentukan lebar dan tinggi gambar:
Contoh:
<img src="img_girl.jpg" width="500" height="600">Lebar dan tinggi ditentukan dalam piksel secara default; jadi width="500" berarti lebar 500 piksel.
Anda akan belajar lebih banyak tentang gambar di bab Gambar HTML kami .
Atribut alt
Atribut alt menentukan sebuah teks alternatif yang akan digunakan, jika gambar tidak dapat ditampilkan.
Nilai alt atribut dapat dibaca oleh pembaca layar. Dengan cara ini, seseorang "mendengarkan" halaman web, misalnya orang dengan gangguan penglihatan, dapat "mendengar" elemen tersebut.
Contoh:
<img src="SullivanProject.png" alt="Logo Sullivan Project">Contoh Jadi:
Contoh:
Lihat apa yang terjadi jika saya mencoba menampilkan gambar yang tidak ada:
<img src="Sullivan-Project.jpeg" alt="Logo Sullivan Project">Contoh Jadi:
Atribut style
Atribut style digunakan untuk menentukan styling dari unsur, seperti warna, font, ukuran dll
Contoh:
<p style="color:red">Ini paragraf berwarna merah.</p>Contoh Jadi:
Ini paragraf berwarna merah.
Contoh Jadi:
Ini paragraf berwarna merah.
Ini paragraf berwarna biru.
Ini paragraf berwarna ungu.
Atribut lang
Bahasa dokumen dapat dinyatakan dalam <html> tag.
Bahasa dideklarasikan dengan lang atribut.
Mendeklarasikan bahasa penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari:
Contoh:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>Dua huruf pertama menentukan bahasa (en). Jika ada dialek, tambahkan dua huruf lagi (AS).
Atribut title
Di sini, title atribut ditambahkan ke <p> elemen. Nilai dari atribut title akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ke paragraf:
Contoh:
<p title="I'm a tooltip">
This is a paragraph.
</p>Contoh Jadi:
This is a paragraph.
Kami Sarankan: Gunakan Atribut Huruf Kecil
Standar HTML5 tidak memerlukan nama atribut huruf kecil.
Atribut judul dapat ditulis dengan huruf besar atau kecil seperti title atau TITLE.
Kami merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.
Kami Menyarankan: Mengutip Nilai Atribut
Standar HTML5 tidak memerlukan tanda kutip di sekitar nilai atribut.
The href atribut, ditunjukkan di atas, dapat ditulis tanpa tanda kutip:
Buruk:
<a href=https://www.sulivanproject.com>Baik:
<a href=https://www.sulivanproject.com>Kami merekomendasikan kutipan dalam HTML, dan menuntut penawaran untuk tipe dokumen yang lebih ketat seperti XHTML.
Terkadang perlu menggunakan kutipan. Contoh ini tidak akan menampilkan atribut judul dengan benar, karena mengandung spasi:
Contoh:
<p title=About SulivanProject>Kutipan Tunggal atau Ganda?
Kutipan ganda di sekitar nilai atribut adalah yang paling umum dalam HTML, tetapi tanda kutip tunggal juga dapat digunakan.
Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, perlu menggunakan tanda kutip tunggal:
<p title='Sulivan "Project" HTML'>Atau Sebaliknya:
<p title="Sulivan 'Project' HTML">| Atribut | Deskripsi |
|---|---|
| alt | Menentukan teks alternatif untuk gambar, ketika gambar tidak bisa ditampilkan |
| href | Menentukan URL (alamat web) untuk tautan |
| id | Menentukan id unik untuk suatu elemen |
| src | Menentukan URL (alamat web) untuk suatu gambar |
| style | Menentukan gaya CSS sebaris untuk suatu elemen |
| title | Menentukan informasi tambahan tentang elemen (ditampilkan sebagai tool tip) |
0 Response to "[Belajar HTML #5] Atribut HTML - Pengenalan Jenis Atribut HTML dan Contohnya"
Post a Comment