ARI JULIANTO Network www.arijulianto.com

Oleh | HTML | | Dibaca 3.257 kali | 0 komentar

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>
Kepribadian yang saya sukai
  1. pribadi yang jujur
  2. pribadi yang ramah
  3. rumah pribadi
  4. mobil pribadi
  5. sekretaris pribadi

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.

Attribut Argumen Keterangan
Type A Daftar dengan huruf besar (A, B, C dst)
a Daftar dengan huruf kecil (a, b, c dst)
I Daftar dengan bilangan romawi besar (I, II, dst)
i Daftar dengan bilangan romawi kecil (i, ii, dst)
1 Daftar dengan nomor berurut (1,2,3 dst)
Start x X diisi dengan angka/huruf yang akan dijadikan awal daftar.

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 :

Contoh List Nomor
  1. Apel
  2. Pisang
  3. Mangga
  4. Jambu
Contoh List huruf besar
  1. Apel
  2. Pisang
  3. Mangga
  4. Jambu
Contoh List huruf kecil
  1. Apel
  2. Pisang
  3. Mangga
  4. Jambu
Contoh List angka romawi besar
  1. Apel
  2. Pisang
  3. Mangga
  4. Jambu
Contoh List angka romawi kecil
  1. Apel
  2. Pisang
  3. Mangga
  4. Jambu

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

Atribut Argumen Keterangan
Type disc Simbol berupa disk ( • )
circle Simbol berupa lingkaran ( º )
square Simbol berupa kotak ( ▪ )

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>
Contoh List type disk
  • Apel
  • Mangga
  • Jeruk
  • Pepaya
Contoh List type circle
  • Apel
  • Mangga
  • Jeruk
  • Pepaya
Contoh List type square
  • Apel
  • Mangga
  • Jeruk
  • Pepaya

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>
Contoh Kombinasi Ordered List dan Unordered List:
  1. Kopi
    • Arabika
    • Capucino
  2. Teh
    • Teh hitam
    • Teh hijau
  3. Susu