Sabtu, 23 Januari 2021

cara membuat list / daftar pada html

Pada pertemuan sebelumnya saya telah membahas tentang cara menampilkan gambar pada HTML. Pada kesempatan kali ini saya akan membahas tentang cara membuat list/daftar pada HTML.


Dalam pembuatan website, list tidak hanya digunakan untuk membuat sebuah list/daftar saja, namun dengan tambahan CSS, list bisa digunakan untuk membuat menu di website. Untuk menampilkan sebuah text sebagai list/daftar, HTML menyediakan Tag <ol>, <ul> dan <li>. Dalam HTML, tag list dibagi menjadi 3 jenis, yaitu ordered list (berurutan), unordered list (tidak berurutan) dan nested list (bersarang). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list akan ditampilkan dengan bulatan atau kotak. Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list menggunakan tag <li>.

List Berurutan (Ordered List)

Dibawah ini adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol> :
cara membuat list / daftar pada html

Jika tidak terjadi kesalahan, maka hasilnya seperti dibawah ini :Cara membuat list pada HTML
Dari gambar diatas kita bisa melihat kode untuk membuat ordered list dimulai bari nomer 8 sampai nomer 13. Didalam tag <ol> terdapat beberapa list item yang diapit dengan tag <li> dan </li>. Karena ini menggunakan tag ordered list maka awal list item diawali dengan angka.


List Tidak Berurutan (Unordered List)

Untuk membuat unordered list hampir sama dengan ordered list, hanya perlu merubah tag <ol> dan </ol> menjadi <ul> dan </ul>. Untuk lebih jelasnya silakan lihat kode HTML dibawah ini.
cara membuat list / daftar pada html
Jika tidak terjadi kesalahan, maka hasilnya seperti dibawah ini :

Cara membuat list pada HTML
Dari gambar diatas kita bisa melihat kode untuk membuat unordered list dimulai bari nomer 8 sampai nomer 13. Didalam tag <ul> terdapat beberapa list item yang diapit dengan tag <li> dan </li>.


List Bersarang (Nested List)

List bersarang adalah list yang didalam lias tersebut ada list lagi. Untuk lebih jelasnya silakan lihat kode HTML dibawah ini :
cara membuat list / daftar pada html
Jika tidak terjadi kesalahan, maka hasilnya seperti dibawah ini :

Cara membuat list pada HTML

Dari gambar diatas kita bisa melihat bahwa penempatan list bersarang terdapat pada baris nomor 10 sampai 18, yang penempatannya berada dibawah list item nasi goreng.

Demikianlah tutorial tentang cara membuat list/daftar pada HTML. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

 

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.