Belajar HTML Part 4 - Atribut pada HTML

Tutorial HTML5

Atribut pada HTML

Semua elemen HTML memiliki atribut
Atribut memberikan informasi tambahan tentang elemen HTML
Atribut selalu ditentukan dalam tag awal
Atribut diletakkan setelah nama tag pembuka, seperti pada contoh berikut:

Contoh

Atribut Href

Link pada HTML didefinisikan dengan tag <a>.
Alamat link ditentukan dalam atribut href.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<a href="https://king-octahasan.blogspot.co.id">Ini adalah sebuah link</a>

</body>
</html>

Anda akan belajar lebih banyak tentang link dan tag <a> dalam tutorial ini.

Atribut Src

Gambar pada HTML didefinisikan dengan tag <img>.
Nama file dari sumber gambar ditentukan dalam atribut src.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="nama_gambar.jpg">

</body>
</html>

Atribut Width dan Height

Gambar dalam HTML memiliki atribut ukuran, yang menentukan lebar dan tinggi dari gambar:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

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

</body>
</html>

Ukuran gambar ditentukan dalam pixel: width="500" berarti 500 piksel lebar.

Atribut Alt

Atribut alt menentukan sebuah teks alternatif yang akan digunakan dan akan muncul jika gambar tidak dapat ditampilkan.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="nama_gambar.jpg" alt="nama_alternatif_gambar">

</body>
</html>

Apa yang terjadi jika kita mencoba untuk menampilkan gambar yang tidak ada?

Apabila kita tidak memasukkan gambar pada img src="tanpagambar", maka yang akan muncul pada browser kita hanya nama alternatif gambar.
Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<img src="" alt="nama_alternatif_gambar">

<p>Catatan: Apabila kita tidak memasukkan gambar diantara tanda kutip pada img src="", maka yang akan muncul pada browser kita hanya nama alternatif gambar. </p>

</body>
</html>

Atribut Style

Atribut style digunakan untuk menyisipkan kode style atau CSS ke dalam dokumen HTML, seperti color, font, size, dan lain-lain.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<p style="color:red">Ini adalah sebuah paragraf</p>

</body>
</html>

Kita akan belajar lebih banyak tentang styling dalam tutorial ini, dan di Tutorial CSS.

Atribut lang

Merupakan bahasa dokumen dapat dinyatakan di dalam tag <html>.
Bahasa dinyatakan dengan atribut lang.
Mendeklarasikan bahasa sangat penting untuk aplikasi aksesibilitas dan mesin pencari:

<!DOCTYPE html>
<html lang="en-US"> <!-- Tataletak atribut lang -->
<body>

...konten disini...

</body>
</html>

Dua huruf pertama menentukan bahasa (en). Jika ada dialek, menggunakan dua huruf lebih (AS).

Atribut Title

Pada contoh disini, sebuah atribut title ditambahkan ke elemen <p>. Nilai dari atribut title akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ke paragraf:

Contoh

<!DOCTYPE html>
<html>
<head>
</head>
<body>

      <p title="Ini adalah tooltip">
       Ini adalah sebuah paragraf
      </p>

</body>
</html>

Disarankan: gunakan atribut huruf kecil

Standar HTML5 tidak mengharuskan nama atribut ditulis dengan huruf kecil. Atribut judul bisa ditulis seperti title atau TITLE.

Direkomendasikan penggunaan nama atribut dengan huruf kecil.

Disarankan! Penggunaan "Tanda Kutip" tunggal atau ganda

Tanda kutip ganda adalah yang paling umum digunakan dalam HTML, namun tanda kutip tunggal juga dapat digunakan.

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

<p title='king "octa" hasan'>

Atau sebaliknya:

<p title="king 'octa' hasan">

Atribut yang sering digunakan

Di bawah ini adalah daftar abjad dari beberapa atribut yang sering digunakan dalam HTML:

Atribut alt biasanya digunakan untuk memberikan gambaran singkat mengenai suatu gambar atau tulisan yang ditampilkan dalam konten.
Atribut href digunakan jika kita ingin menyisipkan alamat web pada sebuah tulisan, kita bisa menggunakan tag <a> yang disusul dengan atribut href.
Atriut title ketika menggerakkan mouse diatas elemen ini, title yang sudah ditentukan akan terlihat sebagai tooltip.
Atribut size digunakan untuk menentukan ukuran sebuah objek baik berupa gambar, font, atau huruf dan bahkan untuk ukuran layout tertentu.
Atriut src fungsinya untuk memanggil gambar yang akan ditampilkan, sedangkan valuenya adala url gambar.
Atribut id digunakan untuk menetukan style bagian yang unik dari HTML. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebua halaman web.
Atribut class digunakan untuk menentukan style dari sebuah grup elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web.
Atribut style digunakan untuk mendesain/menata suatu tag. Entah itu style color, font, dan sebagainya.