Belajar html Daftar Item ( List Item ).

ke bawah


Ada dua macam Daftar item yang dapat digunakan dengan html, yaitu: Daftar Tak Berurut (unordered list/bullet) dan Daftar Berurut (Ordered list).

Contoh Daftar tak berurut :

• item kesatu
• item kedua
• item ketiga

Contoh Daftar berurut :

1. item kesatu
2. item kedua
3. item ketiga

Kode html Daftar tak berurut untuk contoh diatas sbb :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ul>

Sedangkan kode html Daftar berurut untuk contoh diatas adalah sbb :

<ol>

<li> item kesatu </li>

<li> item kedua </li>

<li> item ketiga </li>

</ol>

Untuk membuat Daftar tak berurut (bullet) digunakan tag <ul> dan untuk membuat Daftar berurut (numberic) digunakan tag <ol> . Sedangkan tag <li> digunakan untuk menempatkan item. Tentusaja masing2 tag tersebut harus disertai dengan tag penutupnya masing -masing.

Ada 3 type tanda bullet dalam Daftar tak berurut yaitu: type "disc "(bulat hitam), type "circle" (lingkaran) dan type "scuare" (kotak hitam), sedangkan untuk Daftar berurut (numberic) adalah : type "I"(romawi besar), type "¡" (romawi kecil), type "A" (huruf besar), type "a" (huruf kecil), dan type "1" (angka decimal).

Dengan tag-tag tersebut diatas, kita juga bisa membuat Daftar item bertingkat, baik untuk Daftar tak berurut maupun Daftar berurut.


Contoh Daftar item bertingkat:

• item kesatu
• item kedua
• sub item kesatu
• sub item kedua
• sub sub item kesatu
• sub sub item kedua
• sub sub item ketiga
• sub item ketiga
• item ketiga

Daftar item bertingkat dengan numberik:

1. item kesatu
2. item kedua
1. sub item kesatu
2. sub item kedua
1. sub sub item kesatu
2. sub sub item kedua
3. sub sub item ketiga
3. sub item ketiga
3. item ketiga

Untuk membuat Daftar item bertingkat, tidak ada penambahan tag, yang perlu diperhatikan adalah cara penyusunan saja. Perhatikanlah susunan penempatan tag html untuk contoh daftar item bertingkat seperti diatas.

kode html :

<ul>

<li> item kesatu </li>

<li> item kedua </li>

<ul>

<li> sub item kesatu </li>

<li> sub item kedua </li>

<ul>

<li> sub sub item kesatu </li>

<li> sub sub item kedua </li>

<li> sub sub item ketiga </li>

</ul>

<li> sub item ketiga </li>
</ul>

<li> item ketiga </li>

</ul>

Cara penulisan yang sama juga untuk membuat source html list item bertingkat untuk numberik (bernomor urut).


ke atas