LIST
Ordered List/Numbered List
Unordered List/Bulleted List
Menu List
Directory List
Definition List
A. Ordered List
Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor secara urut. Ordered List dimulai dengan tag awal <OL> dan diakhiri dengan tag </OL>, dan diantara kedua tag tersebut terdapat tag <LI> yang menyatakan list item.
Contoh :
<html>
<head>
<title>Ordered List</title>
</head>
<body bgcolor="lightgrey">
<OL>
<LH><EM>Dibawah ini aalah warna Pelangi: </EM><BR><BR>
<LI>Merah
<LI>Jingga
<LI>Kuning
<LI>Hijau
<LI>Biru
<LI>Nila
<LI>Ungu
</OL>
</body>
</html>
Mengganti jenis nomor pada tag <OL> beserta fungsi-fungsinya :
COMPACT
Untuk menyatakan bahwa item dalam daftar pendek, sehingga browser menampilkan dalam bentuk yang lebih padat
TYPE = A
Membuat daftar berurut dengan huruf besar ( A,B,C,..)
TYPE = a
Membuat daftar berurut dengan huruf kecil (a,b,c,…)
TYPE = I
Membuat daftar berurut dengan huruf romawi besar (I,II,III,…)
TYPE = i
Membuat daftar berurut dengan huruf romawi kecil (i,ii,iii,…)
TYPE = 1
Default nilai daftar berurut (1,2,3,…)
START = n
Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal
Contoh :
<html>
<head>
<title>Nested Ordered List</title>
</head>
<body bgcolor="lightgrey">
<OL>
<LH><EM>Planet dalam sistem tata surya : </EM><BR><BR>
<LI>Merkurius
<OL TYPE = A>
<LI>57,9 juta kilometer dari matahari
<LI>Tidak punya satelit
</OL>
<LI>Venus
<OL TYPE = a>
<LI>108 juta kilometer dari matahari
<LI>Tidak punya satelit
</OL>
<LI>Bumi
<OL TYPE = I>
<LI>149,6 juta kilometer dari matahari
<LI>Satu satelit = Bulan
</OL>
<LI>Mars
<OL TYPE = i>
<LI>227,9 kilometer dari matahri
<LI>Dua satelit =
<OL START = 1>
<LI>Phobos
<LI>Deimos
</OL>
</OL>
</OL>
</body>
</html>
B. Unordered List
Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan bulatan, kotak atau lingkaran.
Penggunaan Unordered List diawali dengan tag <UL> dan diakhiri dengan tag </UL>, dan didalamnya ditandai dengan tag <LI>.
Contoh :
<html>
<head>
<title>Nested Unordered List</title>
</head>
<body bgcolor="lightgrey">
<UL>
<LH><EM>Planet dalam sistem tata surya : </EM><BR><BR>
<LI>Merkurius
<UL>
<LI>57,9 juta kilometer dari matahari
<LI>Tidak punya satelit
</UL>
<LI>Venus
<UL>
<LI>108 juta kilometer dari matahari
<LI>Tidak punya satelit
</UL>
<LI>Bumi
<UL>
<LI>149,6 juta kilometer dari matahari
<LI>Satu satelit = Bulan
</UL>
<LI>Mars
<UL>
<LI>227,9 kilometer dari matahri
<LI>Dua satelit =
<UL START = 1>
<LI>Phobos
<LI>Deimos
</UL>
</UL>
</UL>
</body>
</html>
Tambahan atribut pada tag <UL>: Atribut Fungsi
TYPE = circle
Membuat tanda lingkaran O untuk item
TYPE = square
Membuat tanda kotak □ untuk item
TYPE = disc
Membuat tanda cakram ● untuk item
C. Menu List
Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal <MENU> dan tag akhir </MENU>, didalamnya menggunakan tag <LI>. Browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk membuat link ini digunakan tag <A> yang akan membuat link ke halaman lain. Penggunaan tag <A> adalah <A HREF “page.html”> link ke halaman page.html </A>.
Contoh :
<html>
<head>
<title>Menu List</title>
</head>
<body bgcolor="lightgrey">
<MENU>
<LH><EM>Planet dalam sistem tata surya : </EM><BR><BR>
<LI><A HREF="merkurius.html">Merkurius</A>
<LI><A HREF="venus.html">Venus</A>
<LI><A HREF="bumi.html">Bumi</A>
<LI><A HREF="mars.html">Mars</A>
<LI><A HREF="jupiter.html">Jupiter</A>
<LI><A HREF="saturnus.html">Saturnus</A>
<LI><A HREF="uranus.html">Uranus</A>
<LI><A HREF="neptunus.html">Neptunus</A>
<LI><A HREF="pluto.html">Pluto</A>
</MENU>
</body>
</html>
D. Directory List
Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal <DIR> dan tag akhir </DIR>. Penggunaan tag <LI> juga diperlukan.
Contoh :
<html>
<head>
<title>Directory List</title>
</head>
<body bgcolor="lightgrey">
<DIR>
<LH><EM>Warna Pelangi : </EM><BR><BR>
<LI>Merah
<LI>Jingga
<LI>Kuning
<LI>Hijau
<LI>Biru
<LI>Nila
<LI>Ungu
</DIR>
</body>
</html>
E. Definition List
Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-istilah yang disebut juga Glossary List (daftar istilah).
Definition List dinyatakan dengan tag awal <DL> dan tag akhir <M/DL>. Dalam tag tersebut ada dua bagian, yaitu:
Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <DT> atau Definition Term
Definisi dari istilah tersebut dinyatakan dengan tag tunggal <DD> atau Definition Data
Contoh :
<html>
<head>
<title>Definition ist</title>
</head>
<body bgcolor="lightgrey">
<H3>Planet dalam sistem tata surya : </H3>
<DL>
<DT>Merkurius
<DD>Planet yang paling kecil dan paling dekat dengan matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari adalah 58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius kira-kira 2,414 kilometer (1,500 mil).
<DT>Bumi
<DD>Planet ketiga dari matahari, berevolusi dengan matahari selama 365,26 hari. Jarak dari matahari adalah 149 juta kilometer (92,96 juta mil), berputar pada porosnya selama 23 jam 56,07
menit, mempunyai radius 6,374 kilometer (3,959 mil) dan mempunyai berat kira-kira 29,11 x 10^24 kilogram (13,17 x 10^24 pounds).
</DL>
</body>
</html>
F. Kombinasi Tipe List
Kombinasi tipe list diperlukan jika suatu daftar berisi daftar dengan tipe berbeda. Sebagai contoh, anda mempunyai ordered list yang didalamnya berisi daftar unordered dan data definition.
Contoh :
<html>
<head>
<title>Combined List</title>
</head>
<body bgcolor="lightgrey">
<OL>
<LH><EM>Planet dari sistem Tatasurya :</EM><BR><BR>
<LI>Merkurius
<UL>
<UL>
<LI>Dewa perdagangan dan perjalanan
<LI>Definisi
<DL>
<DT>Mercury
<DD>Planet yang paling kecil dan paling dekat dengan matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari adalah 58,3 juta kilometer 36,2 juta mil) dan mempunyai ukuran radius kira-kira 2,414 kilometer (1,500 mil).
</DL>
</UL>
</UL>
<LI>Venus
<UL>
<UL>
<LI>Dewi cinta dan kecantikan
<LI>Definisi
<DL>
<DT>Venus
<DD>Planet kedua dari matahari, berevolusi dengan matahari selama 224,7 hari. Jarak dari matahari adalah 100,1 juta kilometer (67,2 juta mil), mempunyai radius 6,052 kilometer (3,760 mil) dan mempunyai berat kira-kira 0,815 dari Bumi.
</DL>
</UL>
</UL>
</OL>
</body>
</html>
G. Membuat Bullet List yang Berbeda
Bullet yang berbeda dapat digunakan dalam tag <UL>. Pemakaian tag <LI> dalam Unordered List dapat ditinggalkan. Anda bisa memakai image sesuai dengan keinginan anda. Tag <IMG> harus digunakan untuk menampilkan gambar. Tag <IMG> sebagai pengganti pemakaian tag <LI>. Formatnya <IMG SRC=”kembang.gif” ALIGN=TOP>Merah<BR>
Contoh :
<html>
<head>
<title>Manual List</title>
</head>
<body bgcolor="lightgrey">
<IMG SRC="logo.gif" ALIGN=TOP><EM>Warna Pelangi :</EM><BR><BR>
<UL>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Merah<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Jingga<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Kuning<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Hijau<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Biru<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Nila<BR>
<IMG SRC="STIK-trs.gif" ALIGN=BOTTOM>Ungu<BR>
</UL>
</body>
</html>
No comments:
Post a Comment