2.5 Belajar HTML [ Membuat List ]

Membuat List di HTML

Elemen List di HTML

HTML menyediakan beberapa elemen untuk membuat list. Ada tiga macam list yang dapat dibuat, antara lain :

1. Ordered List, list yang terurut
2. Unordered List, list yang tidak terurut
3. Descriptional List, list yang berisi definisi

1. Ordered List

dibuat dengan tag <ol>. Lalu didalamnya diisi dengan item item yang akan dimasukkan kedalam list. Item dibuat dengan tag <li> (List Item).

Contoh :

sumber : Petani Kode

Hasilnya...

List diatas diurutkan dengan angka 1, 2, 3, 4, 5. Kita dapat menggantinya dengan a, b, c atau dengan angka romawi dengan menggunakan atribut "type" pada tag <ol> dan nilai yang dapat diberikan antara lain :

• "a" untuk alfabet a, b, c, dan seterusnya
• "A" untuk alfabet A, B, C, dan seterusnya
• "i" untuk angka romawi i, ii, iii, dan seterusnya
• "I" untuk angka romawi I, II, III, dan seterusnya

Contoh :

Hasilnya...

2. Unordered List

Unordered list merupakan list yang tidak terurut yang menggunakan simbol simbol pada itemnya. Unordered list menggunakan tag <ul> (unordered list) dan untuk itemnya menggunakan tag "li".

Contoh :

sumber : Petani Kode

Hasilnya...

Secara default, simbol yang digunakan dalam unordered list adalah lingkaran kecil "disc". Kita juga bisa mengganti dengan atribut "type".

Berikut adalah nilai yang dapat diberikan pada atribut "type" :

• "square" untuk simbol persegi
• "disc" default  untuk simbol lingkaran disc
• "none" tidak memakai simbol
• "circle" untuk simbol lingkaran

Contoh :

Hasilnya...

Selain menggunakan "type" kita juga bisa menggunakan gambar.

Contoh :

Hasilnya...

3. Description List

Description list adalah list yang berisi deskripsi atau penjelasan sesuatu. Ada tiga tag yang digunakan untuk membuat description list, antara lain :

• <dl> (description list) tag untuk memulai description list
• <dt> (description term) tag untuk membuat kata yang akan di deskripsikan
• <dd> (description description) tag untuk membuat penjelasan

Contoh format penulisan :

sumber : Petani Kode

Contoh :

Hasilnya...

4. List dalam List

List juga dapat dibuat dalam sebuah list, misal kita gabungkan antara ordered list dan unordered list. 

Contoh :

Gambar 1

Gambar 2

Hasilnya...

~ Terima Kasih ~