Gambar dapat kita atur posisinya dengan atribut align. Selain diatur posisinya, gambar dapat kita tambahkan garis tepi dengan ketebalan tertentu dalam satuan pixel.
Kali ini, kita akan bahas cara membuat description list di HTML. Ohiya, sebelumnya, kita juga sudah pernah membahas ordered list dan undordered list di postingan ini: Tutorial HTML untuk Pemula: Membuat Daftar/List di HTML.
Jadi, di HTML, ada 3 jenis list yang dapat kita buat. Ada ordered list, unordered list, dan description list.
Pengertian description list
Description list adalah jenis list yang digunakan untuk membuat daftar/list yang berupa judul/istilah beserta penjelasannya.
Ada judul/istilah, ada deskripsinya.
List ini memang tidak sepopuler ordered list ataupun undordered list. Tapi cukup membantu juga untuk membuat list yang berisi istilah-istilah beserta penjelasannya.
Cara membuat description list
Untuk membuat description list, kita menggunakan tag pembuka <dl> dan tag penutup </dl>. Isi listnya ada di antara tag tersebut.
Judul/istilah listnya menggunakan tag pembuka <dt> dan tag penutup </dt>. Sedangkan deskripsi atau penjelasan dari istilah/judulnya menggunakan tag pembuka <dd> dan tag penutup </dd>.
Mari kita coba praktikkan.
Buat sebuah file lalu simpan dengan nama list-deskripsi.html. Berikut kodenya.
<!DOCTPYE HTML> <html> <head> <title>Membuat description list di HTML</title> </head> <body> <dl> <dt>Sepeda</dt> <dd>adalah kendaraan beroda dua dengan tenaga manusia sebagai motornya</dd> <dt>Motor</dt> <dd>adalah kendaraan beroda dua dengan mesin sebagai motornya</dd> <dt>Mobil</dt> <dd>adalah kendaraan beroda empat dengan mesin sebagai motornya</dd> </dl> </body> </html>
Kalau kita jalankan file tersebut, seperti ini jadinya.
Baca juga ya..
Tutorial HTML Lanjutan: Cara Mengatur Tampilan Gambar di HTML
Baca juga ya..
Tutorial HTML Lanjutan: Cara Mengatur Tampilan Gambar di HTML
Terlihat kan ada judul/istilah dan penjelasannya.
Begitulah cara membuat description list di HTML.
Nggak susah kan?
Selanjutnya, kita akan bahas cara membuat internal link di HTML.
Tidak ada komentar:
Posting Komentar
Silakan berkomentar dengan kalimat yang bijak.