Assalamualaikum mas bro dan mba bro :D ketemu lagi nih hehe Ditengah waktu ane sekarang yang lagi ga ngapa-ngapain mending ane ngeblog aja hehe mau lanjutin terhadap post yang terakhir mengenai Format Karakter yang udah ane share share sebelumnya, kali ini ane mau bagi ilmu mengenai Cara Membuat List pada HTML, karena berbagi kebaikan itu baik jadi tidak ada salahnya ane berbagi ilmu terhadap sesama :D. Monggo dibaca yak artikelnya sampai bawah :P
III. LIST
Informasi dapat disampaikan dengan mudah jika ditampilkan dengan menggunakan daftar.
HTML menyediakan beberapa jenis daftar, yaitu :
HTML menyediakan beberapa jenis daftar, yaitu :
- Ordered List/Numbered List
- Unordered List/Bulleted List
- Menu List
- Directory List
- Definition List
Nyok kite bahas atu-atu :D
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>
<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 :
Atribut
|
Fungsi
|
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>
<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
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>
<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>
<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
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>
<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
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>
<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>
Finally kelar juga hehe Semoga bermanfaat ya kawan. Tunggu psotingan ane selanjutnya di blog ya gan hehe
Wassalamualaikum.....
0 komentar:
Post a Comment