Membuat dan Menambahkan Daftar dan Penomoran (Bullet and Numbering)

Salah satu cara yang efektif dan mudah untuk dibaca dalam menyampaikan informasi adalah dengan menggunakan daftar. HTML mewnyediakan beberapa jenis daftar, yaitu :

• Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)
• Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)
• Menu list (daftar menu)
• Directory list
• Definition list (glossary/daftar istilah)

Ordered list (Numbering)

Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item, menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list :

Kepribadian yang saya sukai

<ul>

	<li>pribadi yang jujur</li>

	<li>pribadi yang ramah</li>

	<li>rumah pribadi</li>

	<li>mobil pribadi</li>

	<li>sekretaris pribadi</li>

</ol>

Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor menjadi huruf atau bilangan romawi. Kita juga dapat mengatur nomor awal untuk daftar kita.

Untuk lebih meperjelas penggunaan atribut Type, berikut akan diberikan contoh penggunaan atribut type pada dokumen html

Contoh List Nomor

<ol>

	<li>Apel </li>

	<li>Pisang</li>

	<li>Mangga</li>

	<li>Jambu</li>

</ol>



Contoh List huruf besar

<ol type="A">

	<li>Apel </li>

	<li>Pisang</li>

	<li>Mangga</li>

	<li>Jambu</li>

</ol>



Contoh List huruf kecil

<ol type="a">

	<li>Apel </li>

	<li>Pisang</li>

	<li>Mangga</li>

	<li>Jambu</li>

</ol>



Contoh List angka romawi besar

<ol type="I">

	<li>Apel </li>

	<li>Pisang</li>

	<li>Mangga</li>

	<li>Jambu</li>

</ol>



Contoh List angka romawi kecil

<ol type="i">

	<li>Apel </li>

	<li>Pisang</li>

	<li>Mangga</li>

	<li>Jambu</li>

</ol>

Pada browser akan ditampilkan seperti berikut :

Unordered list (Bullet)

Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan. Unordered list dimulai dengan tag <UL>dan diakhiri dengan tag </UL>. Sedang isi daftar menggunakan tag <LI>

Adapun atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE

Supaya lebih jelas, berikut ini akan diberikan contoh tentang atribut type dan hasilnya pada browser.

Contoh List type disk

<ul type="disc">

	<li>Apel</li>

	<li>Mangga</li>

	<li>Jeruk</li>

	<li>Pepaya</li>

</ul>



Contoh List type circle

<ul type="circle">

	<li>Apel</li>

	<li>Mangga</li>

	<li>Jeruk</li>

	<li>Pepaya</li>

</ul>



Contoh List type square

<ul type="square">

	<li>Apel</li>

	<li>Mangga</li>

	<li>Jeruk</li>

	<li>Pepaya</li>

</ul>

Kombinasi Ordered List dan Unordered List

Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari ordered list dan unordered list. Kedaunya dipakai secara bersama-sama untuk membentuk suatu daftar. Berikut adalah contoh penggunaan kombinasi dari kedua list untuk membentuk suatu daftar.

Contoh Kombinasi Ordered List dan Unordered List:

<ol>

	<li>Kopi

	<ul type="square">

		<li>Arabika</li>

		<li>Capucino</li>

	</ul></li>

	<li>Teh

	<ul type="circle">

		<li>Teh hitam</li>

		<li>Teh hijau</li>

	</ul></li>

	<li>Susu</li>

</ol>