Ada tiga bentuk dasar list di HTML. Pertama adalah unordered list, kedua ordered list dan ketiga definiton list. Langsung saja.
1. Unordered list.
Dibuka dengan tag <ul> ditutup dengan </ul>. Di antara tag <ul></ul> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
Atribut yang dapat kita tambahkan untuk tag <ul> adalah 'type'. Dan nilai yang dapat diisi ke atribut 'type' adalah 'disc', 'circle' dan 'square'. Sementara untuk tag <li> atributnya juga sama.
Contoh:
-----------------mulai kode html----------------------
<ul type="square">
<li>List Pertama</li>
<li>List Kedua</li>
<li type="circle">List Ketiga</li>
</ul>
-----------------akhir kode html----------------------
2. Ordered list.
Dibuka dengan tag <ol> ditutup dengan </ol>. Di antara tag <ol></ol> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.
Contoh:
-----------------mulai kode html----------------------
<ol>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
Atribut yang dapat ditambahkan untuk tag <ol> adalah:
++ atribut 'type' yang dapat diisi dengan nilai 'a' untuk huruf kecil, 'A' untuk huruf besar, 'i' untuk romawi kecil, 'I' untuk romawi besar dan '1' untuk angka.
++ atribut 'start' yang diisi dengan karakter yang sesuai dengan nilai di atribut 'type' untuk menentukan karakter awal list. Jika ingin awal nomor list adalah angka 3 maka masukkan nilai '3'. Atau jika ingin awal angka list adalah huruf D, maka masukkan nilai '4'.
Contoh:
-----------------mulai kode html----------------------
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<ol type="A" start="F">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
-----------------akhir kode html----------------------
3. Definiton list.
Dibuka dengan tag <dl> ditutup dengan </dl>, diantaranya diisi tag <dt></dt> atau <dd></dd>. Diantara tag <dt></dt> atau <dd></dd> diisi kalimat yang diinginkan. tag <dt></dt> dan <dd></dd> adalah bagian dari tag <dl></dl>. Tag <dd></dd> sebenarnya adalah definisi dari tag <dt></dt>. Karena itu tag <dd></dd> secara default lebih mengindent masuk dibandingkan <dt></dt>. Tidak ada atribut yang dapat ditambahkan ke tag list ini.
Oya, tag <dt></dt> atau <dd></dd> bisa dua-duanya ada diantara tag <dl></dl> atau salah satunya saja.
Contoh:
-----------------mulai kode html----------------------
<dl>
<dt>Bapak</dt>
<dd>Panggilan untuk orang tua laki-laki</dd>
<dt>Ibu</dt>
<dd>Panggilan untuk orang tua perempuan</dd>
</dl>
<dl>
<dt>tag dt saja</dt>
</dl>
<dl>
<dd>tag dd saja</dd>
</dl>
-----------------akhir kode html----------------------
Gimana? Masih bingung? Berikut adalah contoh lengkap nya, mudah-mudahan tidak bingung lagi.
-----------------mulai kode html----------------------
<html>
<head>
<title>membuat list</title>
</head>
<body>
contoh unorderd list:
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>
<ul type="square">
<li>List Pertama dengan bullet square</li>
<li>List Kedua dengan bullet square</li>
<li type="circle">List Ketiga dengan bullet circle</li>
</ul>
<hr>
contoh ordered list huruf besar:
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf besar dengan huruf awal F:
<ol type="A" start="6">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list huruf kecil:
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi kecil:
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list romawi besar:
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka:
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh ordered list angka dimulai dengan angka 4:
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>
<hr>
contoh definiton list:
<dl>
<dt>Kiryu Kazuma</dt>
<dd>Karakter utama dalam serial video game Yakuza</dd>
<dt>Rikimaru</dt>
<dd>Karakter utama dalam serial video game Tenchu</dd>
</dl>
<hr>
contoh definiton list tanpa tag <dd></dd>:
<dl>
<dt>Kiryu Kazuma</dt>
</dl>
<hr>
contoh definiton list tanpa tag <dt></dt>:
<dl>
<dd>Karakter utama dalam serial video game Yakuza</dd>
</dl>
</body>
</html>
-----------------akhir kode html----------------------
save dengan nama -misal- 'latihan-list.html'. Coba buka dengan browser dan lihat hasilnya.
Sampai jumpa di artikel berikutnya yaitu Membuat list dengan HTML 2, dimana saya akan memberikan contoh bagaimana membuat list didalam list.
Insya Allah.....
Sabtu, 17 Juli 2010
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar