Cara Membuat Daftar/List di HTML
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>.
Daftar Isi:
- 1Pengenalan HTML
- 2Pengertian Tag, Elemen, dan Atribut
- 3Struktur Dasar HTML
- 4Membuat Judul (Heading) dan Paragraf HTML
- 5Menampilkan Gambar di HTML
- 6Cara Membuat Link di HTML
- 7Cara Membuat Daftar/List di HTML
- 8Cara Membuat Tabel di HTML
- 9Cara Membuat Form di HTML
- 10Membuat Garis Horizontal di HTML
- 11Menambahkan Komentar di HTML
- 12Membuat Form Pendaftaran di HTML
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>
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>
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>
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>
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>
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.
12 Comments
Gan pingin nanya kalo misalkan buat daftar isi kaya chord tela ini gmana ??
Misalnya Kita Pilih Label A+B terus muncul semua daftar label A dan B terus kita klik salah satu nama artis itu. misal Bagindas terus muncul semua dafta isi bagindas, itu gmana ya gan makasih sebelumnya.
https://uploads.disquscdn.com/images/ebc26662aeb71e353643d217d39bba5fc23d5ba948de15ebcfb5ada01ff7f5ed.png
Gan Untuk Mengetahui URL Situs Yang Kita Buat Gimana Ya? agar Orang Orang Bisa Mengunjungi Situs Kita
Kalau itu ranahnya SEO mas, hal pertama yang mesti kita lakukan setelah membuat blog/website yaitu mendaftarkan website tersebut ke mesin pencari seperti google dengan menggunakan google webmaster tools agar lebih cepat terdeteksi mesin pencari.
min say amau tanya,
saya mau membuat semacam katalog file database komputer. apakah bisa dilakukan dengan html?
contohnya gini:
di kantor saya database jaringan tidak tertata rapi dan saya ingin membuat katalognya dalam satu halaman yang bisa link ke folder2 tsb,
seperti excel itu yang bisa hyperlink ke folder/file path.
apakah ada saran, jika bisa dilakukan dengan html gmn caranya ya me-link-an folder/file tsb
terimkasih.
Mungkin maksud mas adalah file manager? kalau dijaringan mungkin bisa pakai fitur sharing, atau bisa cari file manager di google yang support untuk jaringan.
tujuan saya membuat daftar/katalog file nya sehingga bisa hyperlink ke folder2 tsb.
apakah html bisa menghandle nya?
seperti di excel yang bisa buka folder path gitu via hyperlink
kalau hanya untuk membuat hyperlink ke file2 tertentu, tentu saja bisa mas, tinggal urlnya saja diarahkan ke folder file tersebut.
apakah bisa dibantu contoh scriptnya seperti apa,sy br bljr html
dan sdh mencari gmn caranya blm ketemu
terimakasih
ini untuk tutorial hyperlink https://bahasaweb.com/cara-membuat-link-di-html/
misal saya punya file di “C:\Users\pool pmnp\Videos” apakah saya bisa membuat hyperlink untuk folder tsb?
makasi banyak gan, saya baru mulai belajar bikin blogger, sangat membantu saya tips nya
kunjung balik ya gan
Terima kasih kembali.. semoga bermanfaat.