Pada tutorial kali ini kita akan membahasa cara membuat daftar list di html, fungsi daftar atau list ini biasanya mengarah pada pengurutan sebuah teks yang masing-masing teks di dalamnya memiliki point-point tersendiri, sehingga di dibutuhkan pengurutan pada setiap kata, sama halnya seperti daftar isi pada sebuah buku. Sebenarnya tidak ada yang berbeda dengan daftar atau list pada Ms. Word, pada Ms. Word pembuatan daftar atau list memiliki dua tipe, yaitu ordered list dan unordered list, perbedaanya adalah pada ordered list yaitu pengurutan dengan menggunakan angka dan ditulis dengan kode <ol>, sedangkan unordered list dengan menggunakan simbol dan ditulis dengan kode <ul>.
Cara Membuat Daftar List di HTML
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.
Membuat Daftar/List Angka di HTML
Seperti yang sudah dijelaskan bahwa jika ingin membuat daftar list dengan angka maka menggunakan tag <ol> yaitu tipe ordered list, silahkan buka text editor, lalu ketikan kode html dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat daftar/list di HTML</title>
</head>
<body>
<h1>Cara membuat daftar/list di HTML</h1>
<ol>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
</ol>
</body>
</html>Code language: HTML, XML (xml)Dari kode di atas maka seharusnya muncul seperti gambar di bawah.
Sebenarnya pada ordered list selain angka anda juga bisa menampilkan tipe pengurutan lainnya, seperti romawi dan lain-lain, caranya hanya dengan menambahkan atribut “type” tanpa tanda kutip, contoh penulis akan menambilkan pengurutan daftar alfabet dengan huruf besar.
<ol type="A">
....
</ol>Code language: HTML, XML (xml)Berikut ini adalah tabel tipe-tipe pengurutan yang bisa di gunakan untuk ordered list.
| Tipe | Keterangan |
|---|---|
| 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 |
Membuat Daftar/List Simbol di HTML
Untuk pembuatan daftar list dengan simbol maka menggunakan tag html <ul>, silahkan buka text editor anda lalu ketikan kode html di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membuat daftar/list di HTML</title>
</head>
<body>
<h1>Cara membuat daftar/list di HTML</h1>
<ul>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)Dari kode html di atas maka seharusnya akan muncul seperti gambar di bawah ini.
Unordered list sebenarnya memiliki tipe-tipe simbol seperti pada ordered list, hanya saja bedanya adalah ordered list menggunakan angka atau alfabet, sedangkan unordered list menggunakan simbol, juga cara penulisan tipe berbeda, apabila ordered list langsung menggunakan tipe maka undered list menggunakan atribut style, atribut ini memungkinkan penulisan kode css langsung ditulis di dalam tag yang bersangkutan tanpa membuat file css lagi, berikut ini contohnya.
<ul style="list-style-type: circle">
....
</ul>Code language: HTML, XML (xml)Berikut ini adalah daftar tipe simbol dalam pengurutan menggunakan unordered list.
| Tipe | Keterangan |
|---|---|
| list-style-type:disc | Pengurutan menggunakan simbol bullets (default) |
| list-style-type:circle | Pengurutan menggunakan simbol lingkaran |
| list-style-type:square | Pengurutan menggunakan simbol kotak |
| list-style-type:none | Menghilangkan simbol pengurutan |
Membuat daftar/list bersarang dengan HTML
Selain hanya menambilkan daftar secara vertical, anda juga dapat menampillan daftar bersarang atau nested list, maksudnya ialah dimana setiap item yang muncul pada daftar memiliki daftar anak di bawahnya, berikut ini adalah contoh kode html membuat daftar/list bersarang.
<!DOCTYPE html>
<html>
<head>
<title>Membuat daftar/list bersarang di HTML</title>
</head>
<body>
<h1>Cara membuat daftar/list bersarang di HTML</h1>
<ul>
<li>Contoh daftar bersarang
<ul>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
</ul>
</li>
<li>Contoh daftar bersarang
<ul>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
</ul>
</li>
<li>Contoh daftar bersarang
<ul>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
<li>Item daftar bersarang</li>
</ul>
</li>
</ul>
</body>
</html>Code language: HTML, XML (xml)Dari kode html di atas seharusnya muncul seperti gambar di bawah ini.
Contoh penggunaan daftar bersarang atau nested list di atas hanya menggunakan dua kali, pembaca dapat bereksperimen dengan menampilkan daftar bersarang lebih dari contoh di atas, dan juga silahkan di gabungkan dengan tipe-tipe simbol dari daftar di atas.
Demikian tutorial ini cara membuat daftar list di html, semoga bermanfaat, dan harapan penulis, untuk latihan tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.
Andi Khalik