accesskey

Menentukan tombol shortcut untuk mengaktifkan (fokus) elemen.

Penulisan :

<tag accesskey="nilai">elemen</tag>

Nilai

semua huruf a sampai z

Contoh: (cobalah sendiri !)

<h4>Username</h4>
<input type="text" accesskey="A" placeholder="tekan Alt+A untuk focus alemen ini" size="40">
<h4>Password</h4>
<input type="text" accesskey="B" placeholder="tekan Alt+B untuk focus alemen ini" size="40">

Username

Password

Browser Kompatibel :

Catatan

catatan

Tip

Tips

Menentukan kelas dari sebuah elemen. Selanjutnya elemen yang sudah memiliki kelas dapat diatur dengan CSS, Javascrip atau Jquery berdasarkan kelasnya. Perbedaan class dan id adalah pengaturan class dapat berlaku untuk beberapa elemen sedangkan id hanya berlaku untuk 1 elemen saja.

Penulisan :

<tag class="nilai">elemen</tag>

Nilai

A-Z, a-z, huruf besar dan kecil dibedakan (case sensitive)

Contoh: (cobalah sendiri !)

<div class="judul">Lorem</div>
<div class="paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Browser Kompatibel :

Catatan

Tip

contenteditable

Menentukan apakah isi dari elemen dapat diedit atau tidak

Penulisan :

<tag contenteditable="nilai">elemen</tag>

Nilai

true atau false

Contoh: (cobalah sendiri !)

<p contenteditable="true">Tulisan ini dapat dirubah</p>

Tulisan ini dapat dirubah

Browser Kompatibel :

Catatan

Tip

contextmenu

Menentukan menu konteks untuk suatu elemen. Menu konteks muncul ketika pengguna klik kanan pada elemen

Penulisan :

<tag contextmenu="nilai">elemen</tag>

Nilai

nama_menu

Contoh: (cobalah sendiri !)

<div contextmenu="nama-menu">Klik kanan disini
<menu type="context" id="nama-menu">
  <menuitem label="Konteks Menu 1"></menuitem>
  <menuitem label="Konteks Menu 2"></menuitem>
  <menuitem label="Konteks Menu 3"></menuitem>
</menu>
</div>

Klik kanan disini

Browser Kompatibel :

Catatan

Tip

data-*

Digunakan untuk menyimpan data di halaman atau aplikasi. Dengan attribut ini data dapat disimpan tanpa menggunakan database server (MySql)

Penulisan :

<tag data-*="nilai">elemen</tag>

Nilai

nama_data

Contoh: (cobalah sendiri !)

<style>
li:hover {color:#900; cursor:pointer;}
</style>
<script>
function tampil(kategori)
{
var jenis_kategori= kategori.getAttribute("data-barang");
alert("Kategori " + kategori.innerHTML + " adalah " + jenis_kategori + ".");
}
</script>
<h1>Jenis Barang</h1>
<h3>klik nama barang di bawah ini untuk mengetahui kategori</h3>
<ul d>
  <li onclick="tampil(this)" data-barang="Mobil">Honda Jazz</li>
  <li onclick="tampil(this)" data-barang="Sepeda Motor">Supra Fit</li>  
  <li onclick="tampil(this)" data-barang="Smartphone">Lenovo A390</li>  
</ul>

Jenis Barang

klik nama barang di bawah ini untuk mengetahui kategori

Honda Jazz
Supra Fit
Lenovo A390

Browser Kompatibel :

Catatan

nilai attribut tidak boleh menggunakan huruf besar

Tip

dir

Menentukan arah teks dalam elemen

Penulisan :

<tag dir="nilai">elemen</tag>

Nilai

ltr = dari kiri ke kanan rtl = dari kanan ke kiri auto = automatis

Contoh: (cobalah sendiri !)

<p dir="rtl">Tulisan ini dimulai dari kanan ke kiri</>

Tulisan ini dimulai dari kanan ke kiri

Browser Kompatibel :

Catatan

Tip

draggable

Menentukan apakah elemen draggable atau tidak

Penulisan :

<tag draggable="nilai">elemen</tag>

Nilai

true = draggable false = tidak draggable auto = automatis

Contoh: (cobalah sendiri !)


<style>
#kotak {width:400px;height:100px;padding:10px;border:1px solid #ccc;}
</style>
<script>
function allowDrop(kejadian)
{
kejadian.preventDefault();
}
function drag(kejadian)
{
kejadian.dataTransfer.setData("Text",kejadian.target.id);
}
function drop(kejadian)
{
var data=kejadian.dataTransfer.getData("Text");
kejadian.target.appendChild(document.getElementById(data));
kejadian.preventDefault();
}
</script>
<div id="kotak" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">Paragraf ini draggable. Tekan dan seret paragraf ini kedalam kotak.</p>

Paragraf ini draggable. Tekan dan seret paragraf ini kedalam kotak.

Browser Kompatibel :

Catatan

gambar secara default adalah draggable IE 8 kebawah tidak mendukung draggable

Tip

hidden

Menyembunyikan elemen

Penulisan :

<tag hidden="nilai">elemen</tag>

Nilai

Contoh: (cobalah sendiri !)

<p hidden>Paragraf ini disembunyikan atau tidak ditampilkan</p>

Browser Kompatibel :

Catatan

Tip

id

Menentukan id dari sebuah elemen. Selanjutnya elemen yang sudah memiliki id dapat diatur dengan CSS, Javascrip atau Jquery berdasarkan idnya. Perbedaan class dan id adalah pengaturan id hanya berlaku untuk satu elemen saja sedangkan class berlaku untuk beberapa elemen.

Penulisan :

<tag id="nilai">elemen</tag>

Nilai

A-Z, a-z, huruf besar dan kecil dibedakan (case sensitive)

Contoh: (cobalah sendiri !)

<html>
<head>
<script>
function rubah_judul()
{
document.getElementById("judul").innerHTML="Selamat Belajar!";
}
</script>
</head>
<body>
<h1 id="judul">Hello World!</h1>
<button onclick="rubah_judul()">Ganti Judul</button>
</body>
</html>

Hello World!

Browser Kompatibel :

Catatan

Tip

lang

Menentukan bahasa konten elemen

Penulisan :

<tag lang="nilai">elemen</tag>

Nilai

Sheet2!A1

Contoh: (cobalah sendiri !)

<p lang="en">This is English language paragraph</p>

This is English language paragraph

Browser Kompatibel :

Catatan

Tip

spellcheck

Menentukan apakah isi elemen dapat diperiksa ejaannya atau tidak

Penulisan :

<tag spellcheck="nilai">elemen</tag>

Nilai

true / false

Contoh: (cobalah sendiri !)

<p contenteditable="true" spellcheck="true">This is a paragraph.</p>

This is a paragraph.

Browser Kompatibel :

Catatan

Tip

style

Menentukan gaya elemen dengan CSS

Penulisan :

<tag style="nilai">elemen</tag>

Nilai

CSS style

Contoh: (cobalah sendiri !)

<h1 style="color:blue;text-align:center">Judul</h1>

Judul

Browser Kompatibel :

Catatan

pengaturan ini akan menghapus pengaturan global

Tip

untuk menggunakan beberapa gaya CSS digunakan pembatas tanda titik koma(;)

tabindex

Menentukan urutan penekanan tombol tab pada keyboard untuk berpindah antar elemen

Penulisan :

<tag tabindex="nilai">elemen</tag>

Nilai

angka

Contoh: (cobalah sendiri !)

<p tabindex="1">Paragraf 1</p>
<p tabindex="2">Paragraf 1</p>
<p tabindex="3">Paragraf 1</p>
<p>Gunakan tombol tab pada keyboard untuk berpindah antar elemen</p>

Paragraf 1

Gunakan tombol tab pada keyboard untuk berpindah antar elemen

Browser Kompatibel :

Catatan

Tip

title

Menentukan informasi tambahan tentang elemen dan akan menampilkan sebagai tooltip saat mouse pointer melewati elemen ini

Penulisan :

<tag title="nilai">elemen</tag>

Nilai

Semua huruf

Contoh: (cobalah sendiri !)

<h1 title="ini judul">Lorem</h1>
<p title="ini paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Lorem

Browser Kompatibel :