Friday, May 25, 2012

Penggunaan Unordered List TYPE pada tag HTML

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

<ul type="macam type">
     <li>Cabai</li>
     <li>Tomat</li>
     <li>Bawang</li>
</ul>


Contoh penggunaan untuk type="circle"

Bumbu Masak :
<ul type="circle">
     <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.

<ul style="list-style-image: url(http://imagebullet.gif)">
     <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
<ul style="list-style-image: url(http://3.bp.blogspot.com/-zDku2TMIdkE/T77cSnRUmYI/AAAAAAAAA-o/d0ynXcfzlls/s1600/TomatoBullet.gif)">
     <li>Cabai</li>
     <li>Tomat</li>
     <li>Bawang</li>
</ul>


Maka Tampilannya adalah seperti di bawah ini.

Bumbu Masak
  • Cabai
  • Tomat
  • Bawang

Tag lain yang berkaitan :
Basic Lists , Ordered Lists , Unordered Lists , Definition Lists

Semoga bermanfaat
Admin-Blog Tutorial




Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International


0 komentar:

Follow Us

Daftar Artikel

Created by. Amru Sholihin. Powered by Blogger.

TIPS SEO HARI INI

Anda punya Blog? Atau website ingin meningkatkan Page Rank di Search Engine? Klik logo-logo di bawah ini untuk melihat caranya :
ping fast  my blog, website, or RSS feed for Free Ping your blog, website, or RSS feed for Free My Ping in TotalPing.com

PageRank Display

PageRank