Tutorial HTML: Pembuatan List

List didefenisikan sebagai sebuah daftar yang tersusun rapi. Dimana antara setiap list umumnya membuat bentuk dasar yang sama. Dalam HTML ada dua tipe list, yaitu ordered list dan unordered list.

Ordered List

Sesuai namanya, merupakan list yang teratur. Setiap list saling berketerkaitan. List ini biasanya ditandai dengan tanda-tanda yang berutut. Misalnya, list dengan tanda angka, huruf, atau angka romawi. Ketika nilai penanda ini merupakan nilai dari atribut type.

Ordered List, dimulai dengan pendefenisian <ol>, kemudian diikuti <li> sebagai lokasi item dari list..

<ol type="1">
 <li>Soekarno</li>
 <li>Soeharto</li>
 <li>BJ Habibie</li>
 <li>Abdurrahman Wahid</li>
</ol>

HTML Dasar : Pembuatan List

Sementara jika ingin mengubah menjadi Huruf,

<ol type="A">...</ol> atau <ol type="a">...</ol>

atau untuk romawi,

<ol type="I">...</ol> atau <ol type="i">...</ol>

Unordered List

Kontra dengan ordered list, bagian ini membuat list dengan tanda yang lebih informal, seperti kotak, bulat atau tanpa penanda. Berbeda dengan Ordered List yang mempunyai atribut type, untuk unordered list digunakan atibut style dengan properti “list-style-type” dan nilainya “disc(default)|circle|squre|none”. (“|” dibaca atau)

Sintaks diawali dengan <ul> dan diikuti <li>,

<ul style=”list-style-type:disc(default)|circle|squre|none”><li>…</li></ul>

Contoh,

<ul>
 <li>Januari</li>
 <li>Februari</li>
 <li>Maret</li>
 <li>April</li>
 <li>Mei</li>
</ul>

HTML Dasar : pembuatan list 2

Secara default, atau tanpa pendesripsian tipe penanda atau list-style-type, maka akan dipakai disc (atau bullet).

<ul style="list-style-type: square;">
 <li>Juni</li>
 <li>Juli</li>
 <li>Agustus</li>
 <li>September</li>
</ul>

Dan apabila, tidak ingin mempunyai penanda tinggal ganti jadi,

<ul style="list-style-type: none">...</ul>

Lists Inside Lists (Nested)

Selain berdiri sendiri, list juga bisa dibuat bercabang (atau nested) alias list didalam list.

<!DOCTYPE html>
<html>
<head>
 <title>Bermain Dengan List</title>
<body>
 <ol>
 <li>Soekarno
  <ul>
   <li>Mohammad Hatta</li>
  </ul>
 </li>
 <li>Soeharto
  <ul>
   <li>Hamengkubuwono IX</li>
   <li>Adam Malik</li>
   <lai>Umar W</li>
   <li>Soedharmono</li>
   <li>Tri Sutrisno</li>
   <li>BJ Habibie</li>
  </ul>
 </li>
</ol>
</body>
</html>

HTML Dasar : Pembuatan List 3

Kesimpulan

Dalam pembuatan list ada dua metode, yaitu ordered list dan unordered list. Pembuatan list juga bisa dibuat bercabang tentunya sesuai kebutuhan. Masih banyak yang bisa kita diekslpor dengan list, karena nanti akan sering digunakan nantinya.

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com