Part 5 - Membuat List Dalam HTML

Fungsi dari List data untuk membuat data pada tampilan web lebih rapih dan terurut. Untuk pembuatan List data pada HTML sangat mudah di pelajari. Tag yang digunakan untuk membuat list seperti Tag “ul”, “li”, “ol”. Apa arti dari tag tersebut, akan penulis jelaskan satu persatu.

Tag “ul” sebagai tag pembuka dan penutup dalam menyisipkan Tag “li” di dalamnya yang Tag ini sebagai daftar item yang akan di buat. Contohnya seperti berikut ini :

1. <ul>
2.    <li>Item 1</li>
3.    <li>Item 2</li>
4. </ul>

Tag “ul” ini memiliki beberapa atribut yang bisa digunakan untuk mengubah style symbol list sesuai dengan kebutuhan. Diantaranya :

Contoh untuk penggunaan atribut di atas seperti ini :

1. <ul style="list-syle-type:square">
2.    <li>Item 1</li>
3.    <li>Item 2</li>
4. </ul>

Untuk type-type lainnya bisa di coba sendiri ya

Apabila dalam pembuatan list ingin menggunakan simbol-simbol urutan Abjad (A-Z) maupun Nomor Urut (0,1,2 …dst). Tag yang digunakan itu Tag “ol”. Tag “ol” ini juga memiliki atribut dan style untuk mengubah jenis symbol urutan yang akan digunakan, diantaranya :

Untuk penulisan tag “ol” dan penggunaan atributnya seperti berikut :

1.  
2. <ol type="A">
3.    <li>Item 1</li>
4.    <li>Item 2</li>
5. </ol>

Untuk type yang lainnya bisa dicoba sendiri ya !
Berikut hasil dari pembuatan data list di dalam HTML dengan menggunakan Tag “ul” dan Tag “ol”, bisa dilihat dibawah ini.

Source codenya seperti berikut :

Jalankan di browser dan hasilnya seperti berikut :

Sekian Penjelasan tentang Cara Membuat List di HTML. Semoga Mudah dipahami dan Sobat bisa langsung mencobanya.

Semoga artikel ini bermanfaat dan Penulis juga masih terus belajar dan Maaf jika masih banyak kekurangan. Apabila ada yang kurang jelas dan ingin di pertanyakan, bisa langsung tulis di kolom komentar di bawah ini.

Salam Coder
Penulis
www.dhiecoderweb.com