Membuat Daftar List item pada HTML

Bagaimana caranya Membuat Daftar List item pada HTML ?. Dalam membuat halaman website, anda juga dapat membuat sebuah daftar item baik berurut maupun tidak berurut.

Pada item terurut akan didefinisikan dengan penomoran, sedangkan pada item tidak terurut akan didefinisikan dengan sebuah symbol, selain itu anda juga dapat menampilkannya tanpa urutan/symbol atau gambar lain yang anda masukan sendiri ke dalam halaman. HTML menyediakan 3 jenis pengurutan yakni :

Ordered List

Sesuai namanya Ordered List berarti membuat Daftar Terurut. Tiap item memiliki tingkatannya masing – masing sesuai urutannya.

Contoh Ordered List seperti kode sumber di bawah ini :

Dan di bawah ini adalah hasil dari kode sumber di atas :

membuat daftar list item pada html

Unordered List

Unordered List digunakan untuk menampilkan Daftar Item Tak Terurut, yang berarti tidak ada tingkatan pada item – item ini.

Dan di bawah ini adalah hasil dari kode sumber di atas :

membuat unordered list pada html

Description List

Sesuai dengan namanya daftar dekripsi, dimana anda membuat istilah dengan deskripsinya. Untuk lebih jelas perhatikan Kode Sumber dan Output di bawah ini :

Dan di bawah ini adalah hasil dari kode sumber di atas :

membuat deskripsi list pada html

Ordered List

membuat daftar berurut pada html

Digunakan untuk membuat daftar item terurut. Dimulai dengan menggunakan tag <ol> (Ordered List) dan untuk daftar itemnya menggunkan tag <li> singkatan dari “List Item”. Gunakan atribut type untuk melihat variasi tipe – tipe list yang disediakan dan jika ingin melihat variasi list yang lebih banyak, gunakan CSS.

Dan di bawah ini adalah hasilnya :

ordered list pada html

Pada Ordered List terdapat atribut – atribut yang umum digunakan yakni :

ordered list pada html

Ordered List dimulai dari urutan 3…

Dan di bawah ini adalah hasilnya :

atribut start pada ordered list

Unordered List

membuat daftar list tidak berurut pada html

Digunakan untuk membuat daftar item tidak terurut, item – item ini akan ditandai dengan sebuah simbol. Gunakan tag <ul> (Unordered List) untuk memulainya, lalu untuk daftar itemnya gunakan tag <li>.

Gunakan atribut type untuk variasi dari jenis – jenis simbol list yang disediakan seperti disc, square, dan circle. Dan untuk type variasi symbol – symbol yang lain dapat kalian peroleh jika menggunakan CSS.

Dan di bawah ini adalah hasilnya :

unordered list pada html

Menampilkan Item tanpa Tanda Urut/ Simbol

Caranya mudah saja, hanya memberikan nilai property none  pada property type.

Dan di bawah ini adalah outputnya :

menampilkan daftar item tanpa simbol

List Bersarang (Nested List)

List Bersarang, maksudnya adalah membuat daftar item di dalam daftar item lain.

Kode Sumber…

Dan di bawah ini adalah hasilnya :

membuat list bersarang

Definition List

Digunakan untuk membuat daftar istilah beserta definisinya masing – masing.

Ada 3 tag dasar yang digunakan, dl > dt > dd.

dl mendefinisikan Definition List. Yakni mulai membuat definisinya.

dt mendefinisikan Definition Term. Yakni membuat nama dari deskripsi yang akan dibuat.

dd mendefinisikan Definition Data. Yakni memberi penjelasan/isi dari deskripsi tersebut.

Kode Sumber…

Output :

Membuat Definition List pada html

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us