Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.

Pada pembahasan sebelumnya kita sudah melihat contoh elemen <img>. Elemen ini memiliki konten tambahan di dalam tagnya, yakni src.

<img src="image.jpg" />

src yang terdapat di dalam tag <img> adalah salahsatu contoh atribut HTML.

Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini:nama="nilai".

Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah id dan class. Contoh atribut khusus adalah src pada elemen <img> dan href pada elemen <a>.

Nama Atribut

Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.

Nilai Atribut

Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.

<h1 title=judul konten>Pendahuluan</h1>

Pada contoh di atas, atribut title bernilai 'judul' dan kata 'konten' akan dianggap sebagai sebuah atribut lain karena antara kata 'judul' dan 'konten' terpisah oleh koma. Bila kita hendak mengisi nilai atribut title di atas dengan 'judul konten', maka kita harus menulisnya dengan tanda kutip:

<h1 title="judul konten">Pendahuluan</h1>

Tanda Kutip atau Petik?

Nilai atribut dapat menggunakan baik tanda kutip " maupun tanda petik '. Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan tanda petik.

Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.

<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>

PRAKTEK

Pada editor terdapat elemen <h1>dan <img>. Pada elemen <img>terdapat atribut title dengan nilai teks 'Gambar Anjing'. Jalankan kode dan perhatikan output. Arahkan mouse ke atas gambar anjing yang ada di kolom output dan biarkan sejenak. Apa yang muncul?
Atribut title akan menampilkan tooltip pada elemen HTML yang dihover (kursor mouse diarahkan di atas elemen tersebut).
Pada elemen <img> terdapat atributsrc, yakni atribut berisi URL dari gambar yang hendak ditampilkan. Cari gambar lain dari internet dan salin (copy) URL gambar tersebut, lalu ganti nilai atribut src pada elemen <img> dengan URL gambar yang sudah Kamu punya.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Contoh Elemen HTML</h1>
<img src="https://i.imgur.com/s2YreFg.jpg"
title="gambar anjing" />
</body>
</html>

Hasilnya:

Contoh Elemen HTML

Tutorial Belajar Atribut HTML di HTML

Nama Atribut

Nilai Atribut

Tanda Kutip atau Petik?

PRAKTEK

Contoh Elemen HTML

0 Response to "Tutorial Belajar Atribut HTML di HTML"

Posting Komentar