List (Daftar)
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
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 :
<html>
<body>
<h4>Contoh Ordered List:</h4>
<ol>
<li>Fakultas Teknik dan Ilmu Komputer</li>
<li>Fakultas Ekomnomi</li>
<li>Fakultas Desain</li>
<li>Fakultas Hukum</li>
<li>Fakultas Sosial Politik</li>
</ol>
</body>
</html>
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.
| Atribut | 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> | |
Unordered list
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>. Berikut contoh penggunaan tag unordered list
<html>
<body>
<h4>Atribut Pada Unordered List</h4>
<ul >
<li>atribut Type="disc"</li>
<li>atribut Type="circle"</li>
<li>atribut Type="square"</li>
</ul>
</body>
</html>
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> | |
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.
<html>
<body>
<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>
<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>
</body>
</html>
List Definisi
List definisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istliah (glossary list). Terdapat tiga tag yang digunakan untuk menyusun suatu daftar istilah :
| <DL>….<DL> | Untuk menyatakan list definisi |
| <DT> | Istilah yang akan didefinisikan, tag tunggal tanpa penutup |
| <DD> | Definisi dari istilah tersebut, tag tunggal tanpa penutup |
Berikut ini adalah contoh penggunaan dari list definisi dalam HTML
<html>
<body>
<h4>Contoh List Definisi:</h4>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman-halaman web.
</dd>
<dt>Internet Explorer</dt>
<dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman-halaman web.
</dd>
</dl>
</body>
</html>
0 comments:
Post a Comment