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.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<h3>Step - Step Membuat Teh Hangat</h3>
<ol>
<li>Tuangkan Air Hangat ke dalam gelas</li>
<li>Celupkan Teh Hingga dirasa cukup</li>
<li>Tambahkan Gula Secukupnya</li>
<li>Silahkan aduk hingga gula larut</li>
<li>Maka Teh Hangat Siap dihidangkan</li>
</ol>
</body>
</html>lalu silahkan anda simpan, dan buka di browser kesayangan anda, maka hasilnya adalah sebagai berikut :
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 :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<h3>Daftar dari Sistem Operasi Komputer</h3>
<ul>
<li>Microsoft Windows </li>
<li>Mac Os</li>
<li>LInux</li>
</ul>
</body>
</html>silahkan disimpan dan dibuka di browser, maka hasilnya adalah :
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 :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Warung Belajar</title>
</head>
<body>
<h3>Daftar Pemrogaman Web</h3>
<dl>
<dt>HTML</dt>
<dd>HTML adalah singkatan dari Hypertext Markup Language adalah bahasa yang perlu anda
pelajari terlebih dahulu, sebelum mempelajari pemrogaman lainnya, karena seluruh web
saat ini menggunakan HTML sebagai dasarnya<dd>
<dt>CSS</dt>
<dd>CSS adalah singkatan dari Cascading Style Sheets merupakan bahasa yang digunakan
untuk melakukan penataan layout dari website </dd>
<dt>Javascript</dt>
<dd>Javascript adalah bahasa pemrogaman yang digunakan untuk membuat tampilan web anda
lebih menarik dengan menggunakan effect - effect khusus</dd>
<dt>PHP</dt>
<dd>PHP Adalah bahasa pemrogaman web yang digunakan untuk mengatur logika pemrogaman
dalam sebuah web, dan mengatur sebuah pengiriman dan penerimaan data dari database</dd>
</dl>
</body>
</html>jika kita buka di browser akan menampilkan seperti berikut ini :
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.