Cara Membuat Daftar (List) Pada Halaman Web atau HTML

Teks dengan susunan "daftar" pada halaman web atau postingan blog mempunyai peranan yang sangat penting. Salah satunya adalah untuk memudahkan para pengunjung dalam membaca tulisan Anda.

Jika menggunakan daftar, data-data yang ingin Anda tampilkan akan dimuat dalam bentuk daftar atau urutan tertentu, sehingga pembaca akan lebih mudah memahami apa yang Anda sampaikan.

Selain itu, dengan adanya daftar atau list ini tampilan page Anda pun akan semakin rapi dan tidak acak-acakan. Hal ini tentu saja akan membuat pengunjung betah berlama-lama membaca artikel Anda.

Bagaimana caranya membuat daftar/list pada Html atau postingan blog?
Pada dasarnya, daftar atau list ini terbagi menjadi dua macam, yaitu: Ordered dan Unordered.

List Ordered merupakan daftar list berurutan yang menggunakan angka atau huruf abjad pada masing-masing data, untuk membuat list ordered Anda bisa menggunakan tag <OL> (singkatan dari Ordered List).

Sedangkan daftar List Unordered merupakan daftar list yang tak berurutan atau biasanya ditandai dengan simbol lingkaran, petak, dan lain-lain, untuk membuat list unordered kita menggunakan tag <UL> (singkatan dari Unordered List).

Sama halnya ketika Anda membuat tabel, membuat daftar list juga harus menggunakan tag luar dan tag dalam.

Untuk tag luarnya kita menggunakan <ol> atau <ul> kemudian diikuti tag dalam yaitu: <li> (singkatan dari List) yang berfungsi untuk membuat poin-poin dalam daftar tersebut, kemudian baru diakhri dengan tag penutup.

Baca juga :
Pengertian dan Struktur Dasar Hypertext Markup Language (HTML)

1. Membuat Daftar / List Ordered (Berurutan)

Seperti yang sudah saya paparkan diatas, membuat daftar atau list menggunakan Angka atau Huruf kita menggunakan tag <OL>.

Berikut ini adalah contoh List Ordered menggunakan angka:
Kode HTML : <ol> <li>Contoh list ordered pertama</li> <li>Contoh list ordered kedua</li> <li>Contoh list ordered ketiga</li> <li>Contoh list ordered keempat</li> </ol>

Selain menggunakan angka seperti contoh diatas, Anda juga bisa menggunakan Angka Romawi, Huruf kecil dan Huruf besar (kapital). Caranya dengan menambahkan atribut type pada tag LI dan valuenya diisi sesuai dengan keperluan, berikut ini beberapa value untuk atribut type pada tag LI.
Daftar Type Ordered List HTML
TypeFungsinya
type="1"Pengurutan menggunakan angka (default)
type="A"Pengurutan berdasarkan huruf besar
type="a"Pengurutan berdasarkan huruf kecil
type="I"Pengurutan menggunakan angka romawi huruf besar
type="i"Pengurutan menggunakan angka romawi huruf kecil

Untuk penulisan list menggunakan angka tidak perlu ditambahkan atribut type karna secara default jika atribut type tidak disisipkan otomatis yang muncul adalah angka.

Contoh List Ordered menggunakan huruf besar:
Kode HTML : <ol> <li type="A">Contoh list ordered pertama</li> <li type="A">Contoh list ordered kedua</li> <li type="A">Contoh list ordered ketiga</li> <li type="A">Contoh list ordered keempat</li> </ol>

Contoh List Ordered menggunakan huruf kecil:
Kode HTML : <ol> <li type="a">Contoh list ordered pertama</li> <li type="a">Contoh list ordered kedua</li> <li type="a">Contoh list ordered ketiga</li> <li type="a">Contoh list ordered keempat</li> </ol>

Contoh List Ordered menggunakan angka romawi besar:
Kode HTML : <ol> <li type="I">Contoh list ordered pertama</li> <li type="I">Contoh list ordered kedua</li> <li type="I">Contoh list ordered ketiga</li> <li type="I">Contoh list ordered keempat</li> </ol>

Contoh List Ordered menggunakan angka romawi kecil:
Kode HTML : <ol> <li type="i">Contoh list ordered pertama</li> <li type="i">Contoh list ordered kedua</li> <li type="i">Contoh list ordered ketiga</li> <li type="i">Contoh list ordered keempat</li> </ol>

2. Membuat Daftar list Unordered (Tidak berurutan)

Untuk membuat list html menggunakan simbol maka kita akan menggunakan tag <UL>

Contoh List Unordered menggunakan bullets (disc):
Kode HTML : <ul> <li>Contoh list unordered pertama</li> <li>Contoh list unordered kedua</li> <li>Contoh list unordered ketiga</li> <li>Contoh list unordered keempat</li> </ul>

Sama halnya dengan list Ordered, list Unordered juga memiliki tipe-tipe simbol yang berbeda-beda, hanya saja bedanya adalah ordered list menggunakan angka atau alfabet, sedangkan unordered list menggunakan simbol.

Dalam penulisan tipenya juga berbeda, apabila ordered list langsung menggunakan tipe maka undered list harus menggunakan atribut style, biasanya atribut ini memang sudah diaplikasikan pada css atau template yang kita gunakan.

Berikut ini adalah daftar tipe simbol dalam pengurutan menggunakan unordered list.
Daftar Type Unordered List HTML
TypeFungsinya
list-style-type:discPengurutan menggunakan simbol bullets (default)
list-style-type:circlePengurutan menggunakan simbol lingkaran
list-style-type:squarePengurutan menggunakan simbol kotak
list-style-type:noneMenghilangkan simbol pengurutan

Untuk penggunaan list simbol bullets (default) tidak perlu menambahkan list-style-type:disc karena secara otomatis simbol tersebut akan tampil dengan sendirinya.

Contoh List Unordered menggunakan Simbol Lingkaran (circle):
Kode HTML :
<ul>
<li style="list-style-type:circle;">Contoh list unordered pertama</li>
<li style="list-style-type:circle;">Contoh list unordered kedua</li>
<li style="list-style-type:circle;">Contoh list unordered ketiga</li>
<li style="list-style-type:circle;">Contoh list unordered keempat</li>
</ul>


Contoh List Unordered menggunakan Simbol Kotak (square):
Kode HTML :
<ul>
<li style="list-style-type:square;">Contoh list unordered pertama</li>
<li style="list-style-type:square;">Contoh list unordered kedua</li>
<li style="list-style-type:square;">Contoh list unordered ketiga</li>
<li style="list-style-type:square;">Contoh list unordered keempat</li>
</ul>


Contoh List Unordered Tanpa Simbol (none):
Kode HTML :
<ul>
<li style="list-style-type:none;">Contoh list unordered pertama</li>
<li style="list-style-type:none;">Contoh list unordered kedua</li>
<li style="list-style-type:none;">Contoh list unordered ketiga</li>
<li style="list-style-type:none;">Contoh list unordered keempat</li>
</ul>

3. Membuat Daftar List HTML Bersarang

Coba perhatikan gambar dibawah ini dengan seksama:

Daftar list pada gambar diatas tentu saja berbeda dengan daftar list yang sudah kita bahas tadi, dimana pada gambar tersebut setiap item list terdapat item listnya lagi, list seperti ini disebut sebagai list bersarang (nested).

Berikut ini adalah contoh list bersarang:
Kode HTML : <ul> <li>Contoh list bersarang 1 <ul> <li>Item bersarang pertama</li> <li>Item bersarang kedua</li> <li>Item bersarang ketiga</li> </ul> </li> <li>Contoh list bersarang 2 <ul> <li>Item bersarang pertama</li> <li>Item bersarang kedua</li> <li>Item bersarang ketiga</li> </ul> </li> <li>Contoh list bersarang 3 <ul> <li>Item bersarang pertama</li> <li>Item bersarang kedua</li> <li>Item bersarang ketiga</li> </ul> </li> </ul>

Pada contoh diatas saya menggunakan list unordered default, Anda bisa membuatnya menggunakan list ordered. Anda juga bisa mengganti style type nya seperti yang sudah kita bahas diatas.

Itulah sekilas tentang cara membuat list / daftar pada HTML atau pada postingan blog, semoga bermanfaat.

Jika Anda mau menambahkannya silahkan tinggalkan di kolom komentar. Terimakasih

0 Response to "Cara Membuat Daftar (List) Pada Halaman Web atau HTML"

Post a Comment

Kata-kata dan bahasa yang Anda keluarkan adalah gambaran kualitas diri Anda...