SIAP – Sistem Informasi Anak Pintar

Pengenalan HTML 10
Membuat Daftar/ List

oleh: Suryo Adhy Chandra, ST

Di dalam sebuah website kita sering melihat daftar dengan bentuk seperti di bawah ini:

Gambar Ordered List (ol)

Gambar Unordered List (ul)

Untuk membuat list atau daftar kita bisa menggunakan metode untuk menampilkannya, yaitu dengan menggunakan daftar berurut, di mana akan terdapat angka urutan, kemudian satu lagi kita bisa menggunakan daftar tidak berurut. Yuk kita bahas di section di bawah ini.

Menggunakan Unordered List (ul)
Untuk membuat unordered list kita menggunakan tag:

<ul>
    <li>>List 1</li>
    <li>>List 2</li>
    <li>>List 3</li>
    <li>>List 4</li>
    <li>>List 5</li>
</ul>

Coba kalian copy dan paste code di atas ke dalam file html kalian, apa yang terjadi?

Di dalam tag ul tersebut kita bisa menambahkan style untuk daftar ul kita, yaitu:

style="list-style-type:disc"
style="list-style-type:square"
style="list-style-type:circle"

Untuk menambahkan ke dalam tag ul sangat mudah sekali, sebagai contoh akan saya buat tuntuk list-style-type nya menjadi square, kita tinggal menempatkan style tersebut di dalam tag ul pertama:

<ul style="list-style-type:square">
    <li>>List 1</li>
    <li>>List 2</li>
    <li>>List 3</li>
    <li>>List 4</li>
    <li>>List 5</li>
</ul>

Coba kalian copy dan paste code di atas ke dalam file html kalian, apa yang terjadi?

Sekarang kita akan coba membuat contoh file dokumen html lengkap yang berisi daftar barang yang ada di dalam kelas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Barang</title>
</head>
<body>
    Daftar Barang yang ada dikelasku:
    <ul style="list-style-type: disc;">
        <li>White Board</li>
        <li>Penghapus</li>
        <li>Proyektor</li>
        <li>Spidol</li>
        <li>Meja</li>
        <li>Kursi</li>
        <li>Dan Lain Lain</li>
    </ul>
</body>
</html>

Menggunakan Ordered List (ol)
Terkadang kita juga memerlukan informasi yang harus ditampilkan dengan urutan tertentu dengan ada penanda yang membedakan, misalnya angka 1,2,3 atau huruf a,b,c dan lain sebagainya. Untuk memberi penanda tersebut kita menggunakan tag ol.
```
Nama Teman Baikku:
<ol>
    <li>>Superman</li>
    <li>>Batman</li>
    <li>>Joker</li>
    <li>>Robin</li>
    <li>>Spiderman</li>
</ol>
                    
```
Coba kalian copy dan paste code di atas ke dalam file html mu, apa yang terjadi?
Tetapi mungkin kita perlu penanda huruf misalnya, selain angka, kita bisa melakukan setting dengan menambahkan atribut:
- type="a"
- type="A"
- type="1" (ini secara default)
- type="i"
- type="I"
Kita akan coba terapkan untuk type="i" misalnya ke dalam list teman baikku tadi, caranya adalah:
```
Nama Teman Baikku:
<ol type="i">
    <li>>Superman</li>
    <li>>Batman</li>
    <li>>Joker</li>
    <li>>Robin</li>
    <li>>Spiderman</li>
</ol>
                    
```
Coba kalian copy dan paste code di atas ke dalam file html mu, apa yang terjadi?

Tugas kalian saat ini silakan coba ganti-ganti style nya, bisa?
Ada 2 lagi yang masih kurang, nah kalau misal urutan angka misalnya mau diganti bukan dari kecil ke besar, tetapi dari besar ke kecil, kita bisa tambahkan sebuah atribut reversed
coba kalian tambahkan kata reversed dalam tag ol nya seperti:
```
<ol type="i" reversed>
                    
```
Berikutnya kalau kita akan mulai urutan bukan dari angka 1, tetapi angka 4 misalnya, kita bisa tambahkan atribut start="4" seperti:
```
<ol type="1" start="4">
                    
```
Nah sekarang saya coba buatkan lengkap untuk file dokumen htmlnya untuk ordered list barang-barang yang ada di kelasku:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Barang</title>
</head>
<body>
    Daftar Barang yang ada dikelasku:
    <ol type="a">
        <li>White Board</li>
        <li>Penghapus</li>
        <li>Proyektor</li>
        <li>Spidol</li>
        <li>Meja</li>
        <li>Kursi</li>
        <li>Dan Lain Lain</li>
    </ol>
</body>
</html>
                    
```
Nah yuk coba kita modif untuk start, reversed, ganti menjadi ol atau ul.....

Yuk Semangat!!!

← Kembali Ke Daftar Pelajaran HTML