Mode Malam
| Mode Tampilan
Penulis : admin

Home / Programming / Tutorial Lengkap Belajar Html # Mengenal Attribute Tag Html
Tutorial Lengkap Belajar Html # Mengenal Attribute Tag Html

Tutorial Lengkap Belajar Html # Mengenal Attribute Tag Html


Pada artikel sebelumnya kita telah belajar mengenal tag tag yang ada di html beserta fungsi-fungsinya.

Pada artikel ini, kita akan belajar tentang attribute-attribute  tag.

Sebelumnya kita telah sedikit menyinggung apa itu attribute. 

advertisement

Dan untuk lebih jelasnya mengenai attribute kita akan bahas pada tutorial kali ini.

Apa itu attribute tag?

Attribute adalah informasi tambahan yang disisipkan pada tag pembuka. Fungsinya adalah untuk memodifikasi perilaku dan ciri dari sebuah elemen.

Tutorial Lengkap Belajar Html # Mengenal Attribute Tag Html

Sebuah tag dapat memiliki banyak attribute atau tidak sama sekali. Namun ada beberapa tag yang diharuskan memiliki attribute tertentu seperti tag <a> dengan attribute href dan tag <img> dengan attribute src

Jenis-jenis attribute

Attribute terbagi menjadi beberapa kategori sesuai fungsi dan sifatnya. Ada yang general, khusus dan event. 

Baik kitu mulai dari,

Attribut general

Sebuah tag dapat memiliki banyak attribute atau tidak sama sekali. Namun ada beberapa tag yang mengharuskan memiliki attribute tertentu seperti tag <a> dengan attribute href dan tag <img> dengan attribute src

Attribute Keterangan
id Digunakan untuk memberikan id unik pada elemen
class Digunakan untuk memberikan class pada elemen yang nantinya difinisikan pada css untuk meberikan style pada elemen
name Digunakan untuk penamaan pada elemen
style Digunakan untuk memberikan style pada elemen secara langsung
accesskey Digunakan untuk memberikan shortcut akses cepat ke sebuah elemen
hidden Digunakan untuk menyembunyikan sebuah elemen
contenteditable Digunakan untuk menentukan apakah konten dari elemen dapat di edit atau tidak
data-* Digunakan untuk memberikan data tertentu pada elemen yang nantinya di akses menggunakan javascript
draggable Digunakan untuk memberikan akses drag pada elemen
lang Digunakan untuk mendefinisakan bahasa yang di gunakan pada konten elemen
title Digunakan untuk memberikan alternate teks pada elemen ketika di sorot
translate Digunakan untuk mendefinisikan terjemahan konten elemen
tabindex Digunakan untuk menentukan urutan tab index dari elemen
spellcheck Digunakan untuk menentukan grammer correting pada konten elemen
dir Digunakan untuk menentukan arah dari konten elemen

Attribute khusus

Attribute khusus adalah attribute yang hanya bisa digunakan pada element tertentu.
Attribute khusus terbagi menjadi dua kategori yaitu,

advertisement

Attribute Wajib

Attribute wajib adalah attribute yang wajib di tambahkan pada element tertentu

Attribute Keterangan Tags
href Digunakan untuk meletakan url pada link a, link
action Digunakan untuk menentukan aksi ketika form di submit form
src Digunakan untuk meletakan sumber file img, embed, iframe, source,script
alt Digunakan untuk memberikan alternate teks pada img img
coords Digunakan untuk memberikan koordinat pada area di image map area
content Digunakan untuk mendefinisikan isi dari meta tag meta

Attribute opsional

Attribute opsional adalah attribute khusus yang boleh ditambahkan dan boleh tidak, tergantung kondisi

Attribute Keterangan Tags
readonly Digunakan agar kolom input menjadi readonly input
checked Digunakan untuk memberikan centang pada checkbox atau radio button

input type=checkbox,

input type=radio,

disabled Digunakan untuk mendisable elemen input,button,select,textarea
placeholder Digunakan untuk memberikan alternate teks ketika kolom input kosong input
required Digunakan agar kolom input wajib di isi input,select,textarea
method Diguhakan untuk menetukan method dari form form

Attribute event

Attribute event adalah attribute yang digunakan untuk meletakan kode javascript, dimana kode javascript tersebut akan bekerja ketika terjadi sesuatu pada elemen, sepeti di klik, di scrool dan lainnya.

Attribute Keterangan
onclick Digunakan untuk mendefinisikan perintah ketika elemen di klik
ondbclick Digunakan untuk mendefinisikan perintah ketika elemen di doubleklik
onload Digunakan untuk mendefinisikan perintah ketika elemen dimuat
onchange Digunakan untuk mendefinisikan perintah ketika value dari elemen berubah
onfocus Digunakan untuk mendefinisikan perintah ketika kursor masuk ke elemen
onfocusout Digunakan untuk mendefinisikan perintah ketika kursor keluar dari elemen
onkeypress Digunakan untuk mendefinisikan perintah ketika tombol keyboad di tekan dan dilepas saat fokus di kolom input
onkeyup Digunakan untuk mendefinisikan perintah ketika tombol keyboad dilepas saat fokus di kolom input
onkeydown Digunakan untuk mendefinisikan perintah ketika tombol keyboad di tekan saat fokus di kolom input
onmouseover Digunakan untuk mendefinisikan perintah ketika mouse berada di atas elemen
onscroll Digunakan untuk mendefinisikan perintah ketika child elemen dalam kondisi overflow dan elemen di scroll
onresize Digunakan untuk mendefinisikan perintah ketika elemen di resize
onsubmit Digunakan untuk mendefinisikan perintah ketika form di submit
onselect Digunakan untuk mendefinisikan perintah ketika elemen option di pilih
maxlength Digunakan untuk menentukan jumlah maksimal karakter pada kolom input
minlength Digunakan untuk mendefinisikan jumlah minimal karakter pada kolom input
colspan Digunakan untuk menggabungkan kolom yang berdekatan pada tabel
rowspan Digunakan untuk menggabungkan baris yang berdekatan pada tabel

Daftar attribute diatas adalah beberapa attribute yang sering digunakan. Masih ada banyak attribute lainnya yang belum bisa tampilkan pada artikel ini, bahkan kalian bisa membuat custom attrribute kalian sendiri untuk meletakan value tertentu yang nantinya value tersebut dapat diambil menggunakan javascript berdasarkan custom attribute yang kita buat.

advertisement

Next artikel kita akan belajar elemen di html. Jika kalian merasa artikel ini bermanfaat silahkan share dan jika ada hal yang ingin ditanyakan atau disampaikan di kolom komentar.

Tags: #html #attributetag
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more