Tag Description List ( dl ) pada HTML
Tag Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan istilah-istilah dengan keterangannya.
Description list ini terdiri dari 3 tag , tag <dl>, <dt> dan <dd>.
Tag <dl> atau Definition List.
Elemen <dl> digunakan ketika ingin memasukan definisi istilah dalam dokumen, biasa digunakan ketika penulis ingin menjelaskan suatu istilah lebih detail.
Tag <dt> atau Definition Term.
Elemen <dt> elemen ini mengandung data satu baris
Tag <dd> atau Definition Description.
Elemen <dd> Data ini dapat berupa satu baris atau bisa lebih dari satu baris.
Utuk lebih mudah memahaminya tag <dl> terdiri dari kelompok nama dan nilai, nama diberikan dalam elemen dt dan nilai diberikan dalam elemen dd.
Ketik kode berikut pada HTMLPad.
<dl>
<dt>Ali</dt>
<dd>nilai Ali</dd>
<dt>Alen</dt>
<dd>nilai Alen</dd>
</dl> Contoh Penggunaan Tag DL
Tag Description List biasa digunakan untuk menjelaskan istilah. tag <dt> digunakan untuk nama istilah dan tag <dd> menjelaskan setiap nama istilah.
Tag <dl> bisa juga digunakan untuk metadata yang menampilkan nama dan nilai pada suatu informasi
Ketik kode berikut pada HTMLPad
<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML Online</title>
</head>
<body>
<h3>Latihan Description List HTML</h3>
<dl>
<dt>SD</dt>
<dd>SD adalah singkatan dari Sekolah Dasar.</dd>
<dt>SMP</dt>
<dd>SMP adalah singkatan dari Sekolah Menengah Pertama.</dd>
<dt>SMA</dt>
<dd>SMA adalah singkatan dari Sekolah Menengah Atas.</dd>
</dl>
</body>
</html>
|
Daftar bersarang ( nested list )
Nested list adalah daftar yang dibuat untuk mewakili sub-item atau sub daftar dari daftar item, seperti daftar isi sebuah buku yang terdiri dari dari Bab, Sub Bab, Sub-sub Bab dan seterusnya, atau dalam pembuatan menu bertingkat pada halaman web.
Tag <list> adalah 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 apa yang ingin dibuat.
Tag seperti ini bisa di sebut nested tag, atau tag bersarang, dimana tag <ol> atau </ul> ditulis hanya sekali dalam setiap pengurutan daftar, sedangkan tag <li> ditulis berdasarkan jumlah teks yang di ingin di urutkan.
Contoh daftar bersarang dengan tag <ol>
Ketik kode berikut pada HTMLPad
<!DOCTYPE html> <html> <head> <title>Tutorial daftar/list di HTML</title> </head> <body> <h1>Daftar Isi Belajar HTML</h1> <ol> <li>Pengertian Umum HTML </li> <li>Mengenal HTML 5</li> <li>Cara Membuat Dokumen</li> <li>Apa Itu Ordered List</li> <li>Contoh Daftar Ordered List</li> </ol> </body> </html>
Contoh daftar bersarang dengan tag <ul>
Ketik kode berikut pada HTMLPad
<!DOCTYPE html>
<html>
<head>
<title>Tutorial daftar/list bersarang di HTML</title>
</head>
<body>
<h1>Jenis Buah-buahan</h1>
<ul>
<li>Durian
<ul>
<li>Durian Monthong</li>
<li>Durian Petruk</li>
<li>Durian Lampung</li>
</ul>
</li>
<li>Mangga
<ul>
<li>Mangga Dermayu</li>
<li>Mangga Harum Manis</li>
<li>Mangga Golek</li>
</ul>
</li>
<li>Jambu
<ul>
<li>Jambu Air</li>
<li>Jambu Bol</li>
<li>Jambu Jamaika</li>
</ul>
</li>
</ul>
</body>
</html>List tidak berurutan dengan tag ul
Tag <ul> berasal dari kata unordered list dan tag <li> berasal dari kata list item. Tag <ul> bisa digunakan untuk membuat daftar yang tidak berurutan.
Contoh :
Ketik kode berikut pada HTMLPad
<!DOCTYPE html><html>
<head>
<title> Tutorial list tidak berurutan dengan tag ul </title>
</head>
<body>
<ul>
<li>Ryo</li>
<li>Alen</li>
<li>Ali</li>
</ul>
</body>
</html>List berurutan dengan Tag <ol> pada HTML
Kata ol berasal dari kata ordered list. Tag <ol> digunakan untuk membuat daftar item yang berurutan. biasa digunakan sebagai daftar bernomor.
Daftar yang diurutkan dapat dibuat dengan tag <ol> dan setiap daftar item dapat dibuat dengan tag <li> seperti pada contoh dibawah ini :
Ketik kode berikut pada HTMLPad
<ol> <li> Ryo </li> <li> Alen </li> <li> Ali </li> </ol>
Atribut
Reversed
Atribut ini memberi nomor urut dari terbesar ke terkecil atau biasa dikenal dengan istilah descending, atribut ini termasuk atribut boolean. Atribut reversed bermanfaat jika ingin membuat daftar item yang paling baru muncul terlebih dahulu.
Ketik kode berikut pada HTMLPad
<ol reversed>
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
</ol>Start
Atribut ini digunakan untuk menentukan nomor urut awal dari daftar yang diinginkan. seperti pada contoh dibawah ini, nomor urut dimulai dari angka 5
Ketik kode berikut pada HTMLPad
<ol start="5">
<li> Ryo </li>
<li> Alen </li>
<li> Ali </li>
</ol>Type
Jenis nomor urut dapat ditentukan menggunakan atribut type.
1adalah nomor urut nilai default – Angka desimal 1,2,3,4
a adalah nomor urut sesuai urutan abjad (huruf kecil) a,b,c,d
A adalah nomor urut alfabet (huruf besar) A,B,C,D
i adalah nomor urut angka romawi (huruf kecil) i,ii,iii,iv
I adalah nomor urut angka romawi (huruf besar) I,II,III,IV
Ketik kode berikut pada HTMLPad
<ol type="1">
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
<li> Duren </li>
</ol>
<ol type="a">
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
<li> Duren </li>
</ol>
<ol type="b">
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
<li> Duren </li>
</ol>
<ol type="i">
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
<li> Duren </li>
</ol>
<ol type="I">
<li> Mangga </li>
<li> Pisang </li>
<li> Jambu </li>
<li> Duren </li>
</ol>
Published: Seno Adjie
0 Komentar