Membuat daftar list pada HTML

Oke teman teman kembali lagi bersama saya founder IPT akan memberikan sebuah materi mengenai bagaimana cara kita membuat list pada HTML.
Oke langsung saja pada pembahasannya.

Tag list pada html termasuk salah satu tag yang ditulis secara berpasangan yaitu tag pembuka dan tag penutup di gunakan untuk membuat daftar list di html, yaitu tag <ol></ol> atau <ul></ul>, tag tersebut digunakan untuk mendefinisikan tipe pengurutan sedangkan untuk pengurutan teksnya menggunakan tag <li></li> yang di pasang didalam tag pembuka <ol> atau </ul> tergantung daftar tipe apa yang ingin dibuat. Tag seperti ini bisa di sebut nested tag, atau tag bersarang, dimana tag <ol> atau <ul> menjadi kepalanya, sedangkan <li></li> menjadi badannya, tag <ol> atau </ul> ditulis hanya sekali dalam setiap pengurutan daftar, sedangkan tag <li> ditulis berdasarkan jumlah teks yang di ingin di urutkan.

1. Membuat daftar list menggunakan angka
Untuk membuat daftar list angka yaitu menggunakan tag<ol> atau ordered list. Langsung saja pada kode programmnya :

Dari kode program diatas maka akan tampil diweb browser seperti dibawah ini.

Kita juga bisa mengganti awalan nomer 1 menjadi A atau bahkan nmer 10 dengan menambahkan kode :
<ol>
<ol type="A">
.....
</ol>
maka akan tampil seperti dibawah ini, untuk yang angka berubah menjadi A.

Untuk type bisa anda sesuaikan dengan kebutuhan website anda.

2. Membuat daftar list menggunakan simbol
Untuk membuat daftar list yaitu menggunakan tag<ul>. Langsung saja pada kode programmnya :

Dari kode program diatas maka akan tampil dibrowser seperti dibawah ini.

Nah anda bisa mengubah simbol list tersebut menggunakan beberapa type.  Ada type circle, square, disc, dan lainnya. Bisa anda coba sendiri beberepa type nya agar tau perbedaannya.
Nah saya akan mengubah simbol list tersebut dengan type circle. Bagaimana cara mengubahnya? Tambahin kode program berikut :
<ul type="circle">
…………
</ul>
Nah untuk tampilan di browser akan terlihat seperti dibawah ini :

Terlihat beda kan dengan tampilan berikutnya.

Sekian materi yang dapat saya sampaikan semoga bermanfaat untuk kalian semua. Agar dapat mengingat tag, attribut dan element pada html , ketik berulang kode program jangan pernah copy paste.
Visit terus blog kami agar dapat mendapatkan update materi selanjutnya.