Wellcome to my cyber home [ Tutorial / Pelajaran Web]
Halaman 6
Tutorial | List dan Bullet
Untuk keperluan penyajian yang sederhana, elemen-elemen pemformatan
yang telah kita pelajari sejauh ini sudah memadai. Tetapi dalam
beberapa kesempatan, kadangkala kita ingin menyajikan data dengan
teknik yang agak berbeda, misalnya dalam bentuk daftar (list). Untuk
keperluan tersebut, HTML menyediakan beberapa elemen yang dapat
sangat berguna untuk menampilkan daftar tak terurut (unordered list),
daftar terurut (ordered list), dan daftar definisi (definition list).
Unordered List
Unordered list adalah sebuah daftar yang masing-masing itemnya ditandai
dengan bullet - sehingga disebut juga bulleted list. Unordered list
ditandai dengan pasangan tag <UL> dan </UL>, sedangkan
masing-masing item diawali dengan tag <LI>. Baik UL maupun
LI dapat menerima atribut TYPE yang menentukan jenis bullet yang
mengawali masing-masing item. Perhatikan contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<P>Terdapat tiga jenis unordered list, yaitu:</P>
<UL>
<LI TYPE="circle">daftar dengan tanda bulatan
<LI TYPE="square">daftar dengan tanda bujursangkar
<LI TYPE="disc">daftar dengan tanda cakram
</UL>
</BODY>
</HTML>
Ordered List
Dalam sebuah ordered list, item-item ditandai dengan nomor atau
abjad yang menunjukkan urutan. Untuk membuat ordered list digunakan
elemen OL dan LI yang masing-masing juga dapat menerima atribut
TYPE seperti pada unordered list, tetapi dengan parameter yang berbeda.
Sebagai tambahan, elemen OL juga dapat menerima atribut START yang
menunjukkan awal penomoran; dan elemen LI dapat menerima atribut
VALUE untuk mengubah nomor secara langsung.
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
<P>Terdapat lima jenis ordered list, yaitu:</P>
<OL>
<LI>daftar dengan angka (default)
<OL TYPE="1">
<LI>item pertama
<LI>item kedua
</OL>
<LI>daftar dengan angka romawi besar
<OL TYPE="I">
<LI>item pertama
<LI>item kedua
</OL>
<LI>lanjutan dengan angka romawi kecil
<OL TYPE="i" START="3">
<LI>item ketiga
<LI>item keempat
</OL>
<LI>daftar dengan huruf besar
<OL TYPE="A">
<LI>item pertama
<LI>item kedua
</OL>
<LI>lanjutan dengan huruf kecil
<OL TYPE="a" START="3">
<LI>item ketiga
<LI>item keempat
<LI VALUE="10">item lompatan
</OL>
</OL>
</BODY>
</HTML>
Dari contoh di atas menjadi jelas bahwa sebuah daftar dapat memuat
daftar yang lain, sehingga kita dapat membuat daftar bersarang dengan
kedalaman yang tak terhingga.
Definition List
Berbeda dengan kedua jenis daftar sebelumnya, definition list digunakan
untuk menyajikan daftar istilah-istilah dan definisinya, atau biasa
disebut juga sebagai glossary list (daftar istilah). Definition
list dibuat dengan tiga elemen, yaitu DL untuk mendefinisikan list,
dan DT dan DD, masing-masing mengawali istilah yang akan didefinisikan
dan definisi dari istilah tersebut. Untuk jelasnya, lihat contoh
berikut ini:
<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<P>Daftar istilah Internet:</P>
<DL>
<DT>HTML
<DD>HyperText Markup Language
<DT>HTTP
<DD>HyperText Transfer Protocol
<DT>WWW
<DD>World Wide Web
<DT>URL
<DD>Uniform Resource Locator
</DL>
</BODY>
</HTML>
Menu List dan Directory List
Selain ketiga jenis daftar di atas, terdapat pula dua jenis daftar
lain, yaitu daftar menu (menu list) dan daftar direktori (directory
list). Kedua jenis daftar ini jarang digunakan karena tidak ada
bedanya dalam penampilan dengan daftar tak terurut (unordered list),
walaupun sebenarnya diciptakan untuk keperluan yang berbeda.
Setelah selesai dengan pemformatan dasar dokumen HTML, kita akan
mulai memasuki bagian berikutnya mengenai Link, Anchor dan URL.
pusing yah....lanjut oke biar tambah
pusing
|