Daftar atribut-atribut dibawah ini adalah atribut-atribut standard yang dapat digambarkan untuk elemen-elemen HTML. Atribut-atribut standard terbagi tiga kelompok, Atribut Core, Atribut Language, dan Atribut Event.
- Atribut Core
Atribut-atribut core tidak boleh digambarkan untuk elemen BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE, dan TITLE. Atribut-atribut core antara lain CLASS, ID, STYLE, dan TITLE.
Atribut CLASS digunakan untuk menetapkan nama kelas untuk elemen-elemen HTML, nantinya aturan CSS dengan class selectornya dapat mengacu kepada nilai dari atribut CLASS elemen-elemen HTML yang terkait.
Contoh: <HTML>
<HEAD>
<STYLE TYPE="text/css">
P.kelas {
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<P CLASS="kelas">Alinea</P>
</BODY>
</HTML>
Atribut ID digunakan untuk menetapkan pengenal unik untuk sebuah elemen HTML, nantinya aturan CSS dengan Id selectornya dapat mengacu kepada nilai dari atribut ID sebuah elemen HTML. Nilai atribut ID adalah unik. Ini menggambarkan bahwa satu elemen dengan dengan elemen HTML lainnya tidak boleh memiliki nilai atribut ID yang sama, beda dengan atribut CLASS!
Contoh: <HTML>
<HEAD>
<STYLE TYPE="text/css">
P#id {
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<P ID="id">Alinea</P>
</BODY>
</HTML>
Atribut STYLE digunakan untuk menerapkan aturan CSS langsung didalam tag awal dari elemen-elemen HTML yang terkait.
Contoh: <HTML>
<BODY>
<P STYLE="color:red">merah</P>
<P STYLE="color:blue">biru</P>
</BODY>
</HTML>
Atribut TITLE digunakan untuk memberikan ekstra informasi tambahan berupa teks untuk sebuah elemen HTML. Nilai atribut TITLE ini akan ditampilkan sebagai tooltip, yaitu ketika pointer mouse tepat diatas sebuah elemen. Atribut TITLE sangat penting untuk elemen A, IMG, ABBR, dan ACRONYM.
Contoh: <HTML>
<BODY>
<P>Saya kuliah di jurusan<ABBR TITLE="Teknik Informatika">TI</ABBR></P>
</BODY>
</HTML>
- Atribut Language
Atribut-atribut language tidak boleh digambarkan untuk elemen BASE, BR, FRAME, FRAMESET, HR, IFRAME, PARAM, dan SCRIPT. Atribut-atribut language antara lain DIR dan LANG.
Atribut DIR digunakan untuk menggambarkan arah-arah penulisan untuk isi didalam sebuah elemen HTML. Apakah arah penulisannya dari arah kiri ke kanan ("ltr") atau dari arah kanan ke kiri ("rtl").
Contoh: <HTML>
<BODY>
<P LANG="id" DIR="ltr">teks rata kanan</P>
<P LANG="id" DIR="rtl">teks rata kiri</P>
</BODY>
</HTML>
Atribut LANG digunakan untuk menetapkan kode bahasa untuk isi didalam sebuah elemen HTML. Untuk nilai dari atribut LANG ini, anda dapat lihat di ID-ID Bahasa HTML.
- Atribut Event
Berikut adalah daftar dari atribut-atribut event yang dapat digambarkan untuk elemen-elemen HTML:
Atribut event ONCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan ketika pengguna mengklik dengan mouse pada sebuah elemen.
Contoh: <HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONCLICK="javascript:alert('Event ONCLICK dipanggil')">
</BODY>
</HTML>
Atribut event ONDBLCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika pengguna mengklik dua kali dengan mouse pada sebuah elemen.
Contoh: <HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONDBLCLICK="javascript:alert('Event ONDBLCLICK dipanggil')">
</BODY>
</HTML>
Atribut event ONMOUSEDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse ditekan.
Contoh: <HTML>
<BODY>
<INPUT TYPE="button" VALUE="Klik!" ONMOUSEDOWN="javascript:alert('Event ONMOUSEDOWN dipanggil')">
</BODY>
</HTML>
Atribut ONMOUSEMOVE digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan.
Contoh: <HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEMOVE="alert('Menuju ke Example.com!')">
</BODY>
</HTML>
Atribut event ONMOUSEOUT digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan keluar dari sebuah elemen.
Contoh: <HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEOUT="alert('Menuju ke Example.com!')">
</BODY>
</HTML>
Atribut event ONMOUSEOVER digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan tepat diatas sebuah elemen.
Contoh: <HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEOVER="alert('Menuju ke Example.com!')">
</BODY>
</HTML>
Atribut event ONMOUSEUP digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse dilepaskan, setelah sebelumnya tombol mouse ditekan.
Contoh: <HTML>
<BODY>
<IMG SRC="example.com.gif" ONMOUSEUP="alert('Menuju ke Example.com!')">
</BODY>
</HTML>
Atribut event ONKEYDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika sebuah tombol keyboard ditekan.
Contoh: <HTML>
<BODY>
<SCRIPT TYPE="text/javascript">
function bukanAngka(e){
var keyAngka;
var keyKarakter;
var cekAngka;
if(window.event){//IE
keyAngka = e.keyCode;
}else if(e.which) {//Netscape/Firefox/Opera
keyAngka = e.which;
}
keyKarakter = String.fromCharCode(keyAngka);
cekAngka = /d/;
return !cekAngka.test(keyKarakter);
}
</SCRIPT>
<FORM>
Ketikkan hanya teks bukan angka:
<INPUT TYPE="text" ONKEYDOWN="return bukanAngka(event)">
</FORM>
</BODY>
</HTML>
Atribut event ONKEYUP digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol keyboard dilepaskan, setelah sebelumnya ditekan.
Contoh: <HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function hurufBesar(x){
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</SCRIPT>
</HEAD>
<BODY>
Nama: <INPUT TYPE="text" ID="nama" ONKEYUP="hurufBesar(this.id)">
</BODY>
</HTML>
