Pembuatan daftar / list terdiri dari tiga macam bentuk, yaitu :
1. Ordered list
2. Unordered list
3. Definition list
Ordered List (Number list)
Daftar yang item memiliki nomor berurutan. Di awali tag <OL> dan diakhiri tag </OL>. Diantara kedua tag terdapat tag <LI> yang menyatakan item dalam daftar, otomatis membentuk baris baru tanpa diberi perintah ganti baris <BR>.
Untuk memberi nomor secara acak dan tidak urut, pada <LI> ditambahkan atribut VALUE.
Misal : <LI VALUE=”10”>
Selain itu, dapat membuat variasi penomoran selain menggunakan nomor. seperti bilangan romawi, abjad dsb, dengan memasukkan atribut (pada tabel dibawah) ke dalam tag <OL>.
Contoh Perintah (tag) HTML :
<html>
<head>
<TITLE>Menyusun Daftar Ordered List</TITLE>
</head>
<body>
Hobby aku nich :
<OL>
<LI>Makan
<LI>Olahraga
<LI>Nonton
<LI>Baca
</OL>
Hal-hal Favorite – Q :
<OL>
<LI>Makanan Favorite
<OL type=”i”>
<LI>Pizza
<LI>Burger
</OL>
<LI>Minuman Favorite
<OL START=”3”>
<LI>Es Krim
<LI>Milk shake
</OL>
</OL>
</body>
</html>
Unordered List
Daftar yang itemnya ditampilkan dengan tanda tertentu seperti bulatan (bullet), tidak menunjukkan penomoran. Unordered list di awali dengan tag <UL> dan diakhiri tag </UL>. Diantara kedua tag itu terdapat tag <LI> yang menyatakan list item dan otomatis membentuk sebuah baris baru tanpa diberi perintah ganti baris <BR>. Merubah bentuk item, ditambahkan atribut TYPE dalam tag <UL>.
Contoh perintah (tag) HTML :
<html>
<head>
<title>Menyusun Daftar Unordered List</title>
</head>
<body>
Hobby aku nich :
<UL>
<LI>Makan
<LI>Olahraga
</UL>
<UL TYPE=”square”>
<LI>Nonton
<LI>Baca
</UL>
</body>
</html>
Definition List
Digunakan untuk menjelaskan istilah. Diawali tag <DL> dan diakhiri tag </DL>. Diantara kedua tag terdapat tag <DT> Definition Term yaitu bagian istilah yang ingin dijelaskan, dan <DD> Definition Data yaitu penjelasan atau definisi istilah tersebut.
<html>
<head>
<title>Menyusun Daftar Definition List</title>
</head>
<body>
Istilah-istilah penggunaan mouse :
<DL>
<DT>Click
<DD> Menekan tombol mouse satu kali secara cepat
<DT> Double Click
<DD> Menekan tombol mouse dua kali berturutan secara cepat, tanpa menggeser mouse
</DL>
</body>
</html>
terima kasih atas penjelasannya, kebetulan lagi belajar bikin list HTML
ReplyDelete