cara membuat daftar list di html

Tutorial HTML Part 16 Cara Membuat Daftar/List di HTML

Posted on Posted in Tutorial HTML

Hai Selamat datang lagi di warung belajar, masih membahas mengenai tutorial html, jika dalam tutorial sebelumnya kita sudah banyak membahas mengenai tag yang ada hubungannya dengan text, nah dalam tutorial kali ini kita akan membahas mengenai bagaimana cara membuat daftar/list di HTML.

Membuat Daftar/List di HTML

List atau biasanya kita mengenal dengan istilah daftar, merupakan bagian yang cukup penting didalam HTML, dengan menggunakan daftar ini anda dapat membuat beberapa hal di HTML, seperti :

  • Daftar Urutan
  • Daftar Item
  • Navigasi Web

nah cukup banyak kan, jadi kalau menurut saya bagian ini cukup penting untuk dipelajari di HTML.

daftar di html itu banyak jenisnya lho ternyata, secara garis besar Daftar/list di HTML kita bagi menjadi 3 Jenis, antara lain :

  • Ordered List (Daftar yang berurutan)
  • Unordered List (Daftar yang tidak berurutan)
  • Description List (Daftar yang menampilkan description)

Lho kok banyak jenisnya, memang bedanya apaan ?

Nah pertanyaan itu juga pernah saya pikirkan, dan ternyata HTML telah memikirkan kebutuhan kita sebagai developer, sehingga membaginya menjadi beberapa jenis daftar yang memiliki fungsi yang berbeda, baik kita akan bahas satu persatu.

 

Ordered List (Daftar yang berurutan)

Ordered List ini digunakan untuk membuat daftar dengan menggunakan urutan, list jenis ini baik digunakan untuk menampilkan perintah yang sifat memiliki urutan, seperti membuat step – step intruksi yang memiliki urutan.

baik kita akan langsung coba membuatnya.

lalu silahkan anda simpan, dan buka di browser kesayangan anda, maka hasilnya adalah sebagai berikut :

ordered_list_di_html

terlihat terdapat daftar yang berurutan mengenai bagaimana step – step membuat teh hangat,

untuk pembuatan ordered list tag yang kita gunakan adalah tag <ol> sebagai pembukanya, dan tag </ol> sebagai penutupnya, dan masing – masing list diatur dengan menggunakan tag <li> </li>

 

Unordered List (list tak berurutan)

List jenis ini digunakan untuk menampilkan daftar yang sifatnya tidak membutuhkan urutan, contohnya untuk menampilkan daftar item, intinya untuk daftar yang tidak membutuhkan urutan angka ataupun huruf, untuk penulisan skripnya hampir sama, yang berbeda hanya tag pembuka dan tag penutup saja, baik kita langsung saja tuliskan skrip sederhana :

silahkan disimpan dan dibuka di browser, maka hasilnya adalah :

unordered_list_di_html

terlihat jika kita menggunakan unordered list, akan menampilkan urutan dengan menggunakan simbol, berbeda dengan ordered list yang menggunakan urutan berupa angka, untuk membuat unordered list tag yang kita digunakan adalah <ul> </ul> dan daftar menggunakan tag <li> </li>

 

Description List (List yang menampilkan description)

List jenis ini mungkin jarang kita gunakan, kebanyakan hanya menggunakan 2 jenis saja yaitu ordered list dan unordered list, list jenis ini biasanya digunakan untuk menampilkan daftar yang berisi penjelasan.

untuk membuat description list, anda memerlukan beberapa tag antara lain :

  • <dl></dl>     : digunakan untuk menampilkan daftar dari description list
  • <dt></dt>     : digunakan untuk menampilkan sebuah istilah yang akan dijabarkan deskripsinya
  • <dd></dd>   : digunakan untuk menampilkan deskripsi dari istilah yang ditulis dengan menggunakan tag <dt></dt>

baik langsung saja kita akan buat sebuah contoh skrip untuk pembuatan description list :

jika kita buka di browser akan menampilkan seperti berikut ini :

description_list_di_html

terlihat terdapat sebuah list, yang menampilkan sebuah istilah dan penjelasan yang tertata rapi, itulah hasil dari penggunaan description list di html

 

sekian dulu ya kawan, kita telah belajar mengenai daftar/list di HTML, serta mengetahui perbedaan dari ordered list,unordered list, dan description list, jika ada diskusi monggo bisa dikolom komentar, baik kita akan sambung lagi di tutorial HTML lainnya.

 

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

Leave a Reply

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