Friday, May 25, 2012

Penggunaan Definition Lists: DL, DT, DD

Definition lists adalah daftar yang mengandung unsur istilah dan definisinya. Dalam definition list digunakan tag HTML <dl>...</dl> . Format tampilan dalam definition list antara istilah dan definisi dibedakan dengan posisi teks, dimana istilah berada di sebelah kiri dan definisi ada di bawah istilah menjorok lebih ke kanan.

Definition List <dl> berisi tag <dt>...</dt> dan <dd>...</dd>. Tag tersebut digunakan untuk menempatkan istilah dengan definisinya. Istilah diapit oleh tag <dt>...</dt>, sedangkan definisi dari istilah diapit oleh tag <dd>...</dd>.

Format penulisan definition list

<dl>
<dt>Istilah 1</dt>
<dd>Definisi dari istilah 1</dd>
<dt>Istilah 2</dt>
<dd>Definisi dari istilah 2</dd>
<dt>Istilah 3</dt>
<dd>Definisi dari istilah 3</dd>
</dl>

Tampilan definition lists dari tag HTML di atas adalah sebagai berikut.

Istilah 1
Definisi dari istilah 1
Istilah 2
Definisi dari istilah 2
Istilah 3
Definisi dari istilah 3

Definition list dapat juga digunakan untuk membuat daftar/list bullet seperti pada unordered list dengan memasukkan unsur gambar. Hanya saja format penulisannya berbeda. Langsung lihat saja ya tag HTMLnya seperti di bawah ini. Sebagai catatan untuk teks warna merah bisa anda ganti dengan alamat url image yang akan anda pakai sebagai bullet.

<dl>
<dt><img height="15" src="http://2.bp.blogspot.com/-ZHezPpSRpXo/T78l5QavLTI/AAAAAAAAA-4/qAEqcADPhak/s1600/TomatoBullet.gif" width="15" />Daftar list 1</dt>
<dd>Isi daftar list 1</dd>
<dd>Isi daftar list 1</dd>
<dd>Isi daftar list 1</dd>
<dt><img height="15" src="http://2.bp.blogspot.com/-ZHezPpSRpXo/T78l5QavLTI/AAAAAAAAA-4/qAEqcADPhak/s1600/TomatoBullet.gif" width="15" />Daftar list 2</dt>
<dd>Isi daftar list 2</dd>
<dd>Isi daftar list 2</dd>
<dd>Isi daftar list 2;/dd>
</dl>

Maka hasil tampilannya adalah seperti ini.

Daftar list 1
Isi daftar list 1
Isi daftar list 1
Isi daftar list 1
Daftar list 2
Isi daftar list 2
Isi daftar list 2
Isi daftar list 2
Tag lain yang berkaitan :
Basic Lists , Ordered Lists , Unordered Lists , Definition Lists

Selamat mencoba
Admin-Blog Tutorial

Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International


0 komentar:

Follow Us

Daftar Artikel

Created by. Amru Sholihin. Powered by Blogger.

TIPS SEO HARI INI

Anda punya Blog? Atau website ingin meningkatkan Page Rank di Search Engine? Klik logo-logo di bawah ini untuk melihat caranya :
ping fast  my blog, website, or RSS feed for Free Ping your blog, website, or RSS feed for Free My Ping in TotalPing.com

PageRank Display

PageRank