Untuk membuat list dalam HTML digunakan beberapa tag penyusunya yaitu <ul> penanda sebuah kelompok daftar, dan <li> penanda setiap daftar di dalamnya. Secara default list akan di awali oleh karakter lingkaran hitam.
Kali ini kita bahas terlebih dahulu cara membuat list dalam bentuk tidak beraturan. Untuk membuatnya lihat contoh kode di bawah ini
<ul>
<li>Sepak Bola</li>
<li>Basket</li>
<li>Bulu Tangkis</li>
</ul>
Susunan tag di atas akan menghasilkan tampilan seperti berikut ini
Contoh di atas adalah list dalam bentuk tidak beraturan. karakter tanda awalnya (lingkaran hitam) bisa diganti dengan beberapa tipe yang sudah disediakan dalam HTML. Untuk menggantinya tag tersebut harus ditambahkan dengan kode CSS dengan tipe tertentu.
- Sepak Bola
- Basket
- Bulu Tangkis
Circle | Lingkaran kosong |
square | Kotak |
none | Tanpa tanda awal apapun |
Untuk penerapannya bisa ikuti sususnan skrip di bawah ini seperti contoh skrip tadi dengan tipe circle
<ul style="list-style:circle">Hasilnya akan tampak seperti ini
<li>Sepak Bola</li>
<li>Basket</li>
<li>Bulu Tangkis</li>
</ul>
Silahkan coba sendiri mengganti dengan tipe lainnya untuk melihat hasilnya. Sedikit saya jelaskan mengenai atribut di dalamnya. style adalah atribut CSS internal, list-style merupakan nama style untuk list dan circle adalah tipe penanda awal list. Untuk mengganti tipe lainnya cukup dengan mengganti circle menjadi tipe lain seperti aquare.
- Sepak Bola
- Basket
- Bulu Tangkis
Itulah tadi cara membuat list dalam bentuk tidak beraturan. Untuk list jenis beraturan dalam bentuk angka dan huruf akan saya tuliskan pada tutorial selanjutnya.