Penggunaan Unordered List TYPE pada tag HTML

Friday, May 25, 2012

Penggunaan Unordered List TYPE pada tag HTML

8:24:00 AM | Diposkan oleh Unknown | | Edit Post

Unordered lists atau sering dikatakan sebagai bullet yang ditandai dengan tag html <ul>...</ul> digunakan untuk membuat daftar/ list yang tidak memerlukan urutan/ deret tertentu. Unordered lists ini memiliki atribut yang dapat ditambahkan sebagai variasi yaitu type dan compact.

TYPE
Ada beberapa macam type dalam unordered lists, yaitu

disc (bullet berbentuk bulat warna hitam)
square (bullet berbentuk kotak warna hitam)
circle (bullet berbentuk lingkaran tepi warna hitam)

Format penulisannya adalah: type="macam type"

COMPACT (compact display)
Atribut Compact adalah untuk membuat ukuran daftar lebih kecil dari biasanya, penulisannya seperti ini: compact="compact"

Contoh format penggunaan TYPE pada unordered lists

<li>Cabai</li>

<li>Tomat</li>

<li>Bawang</li>

</ul>

Contoh penggunaan untuk type="circle"

Bumbu Masak :

<li>Cabai</li>

<li>Tomat</li>

<li>Bawang</li>

</ul>

Maka tampilannya adalah seperti ini

Bumbu Masak :

Cabai
Tomat
Bawang

Selain ketiga macam type dari unordered lists di atas anda juga dapat memasukkan unsur image bullets sebagai pengganti bullet di atas, yaitu dengan atribut style dengan format seperti di bawah ini.

<li>Cabai</li>

<li>Tomat</li>

<li>Bawang</li>

</ul>

Catatan : Text warna merah di atas bisa anda ganti dengan alamat url gambar yang anda miliki (gunakan http://) atau anda bisa mengupload gambar dari komputer dan ambil alamat http-nya saja ya. Anda bisa berkreasi dengan membuat sendiri bullet menggunakan photosop atau program lain. Usahakan agar besar gambar sesuai dengan ukuran bullet yang diperlukan, biasanya antara 10 - 20 pixel.

Contoh penggunaan :

Bumbu Masak

<li>Cabai</li>

<li>Tomat</li>

<li>Bawang</li>

</ul>

Maka Tampilannya adalah seperti di bawah ini.

Bumbu Masak