Cara Membuat List Dalam HTML
Dalam sebuah website List paling sering digunakan untuk membuat menu dan tag list juga dapat digunakan untuk nested list atau list bersarang. Dalam HTML, tag list terdiri dari tiga jenis, ordered list (berurutan), unordered list (tidak berurutan) dan Description List. Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>.Untuk setiap deskripsi atau judul istilah, menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>. Untuk memudahkan teman-teman saya sudah membuat contoh-contoh untuk setiap list di atas.
Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag <ol> :
<!DOCTYPE html>
<html>
<head>
<title>Point
Website</title>
</head>
<body>
<h1>Daftar
Buku</h1>
<ol>
<li>Buku Biologi</li>
<li>Buku Matematika</li>
<li>Buku Bahasa
Inggris</li>
<li>Buku Sejarah</li>
<li>Buku Bahasa
Arab</li>
</ol>
</body>
</html>
Jika dijalankan pada web browser maka hasilnya akan seperti berikut ini :
Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>. Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag <ul> :
<!DOCTYPE html>
<html>
<head>
<title>Point
Website</title>
</head>
<body>
<h1>Daftar
Buku</h1>
<ul>
<li>Buku Biologi</li>
<li>Buku Matematika</li>
<li>Buku Bahasa Inggris</li>
<li>Buku Sejarah</li>
<li>Buku Bahasa Arab</li>
</ul>
</body>
</html>
Jika dijalankan pada web browser maka hasilnya akan seperti berikut ini :
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu Home, Contact us, About, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Selanjutnya kita akan membuat Description List. Berikut adalah contoh kode HTML untuk membuat Description.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
</head>
<body>
<h1>Daftar
list dalam HTML</h1>
<dl>
<dt>Ordered
List</dt>
<dd>Ordered
list akan ditampilkan dengan angka.</dd>
<dt>Unordered
List</dt>
<dd>Unordered
list akan ditampilkan dengan bulatan atau kotak</dd>
<dt>Description
List </dt>
<dd>Gambar
ini hasil dari Description List.</dd>
</dl>
</body>
</html>
Silahkan teman-teman jalankan pada web browser, maka hasilnya akan seperti berikut :
Dari hasil gambar diatas dapat kita lihat bahwa isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya.
Sekian tutorial saya tentang Cara Membuat List Dalam HTML, semoga dapat membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan saya bahas pada tutorial selanjutnya.
No comments: