List atau data yang berurutan kebawah merupakan tag HTML yang berfungsi untuk menampilkan data secara berurutan kebawah. Dalam penulisan HTML kita menggunakan tag <li> untuk mendefinisikan list. Dalam penggunaan list HTML ada 2 jenis tampilan list yang dapat kita gunakan yaitu ordered list dan unordered list.
- Ordered List : Berfungsi untuk menampilkan list dalam bentuk angka. Penulisan tag HTMLnya adalah <ol>
- Unordered List : Berfungsi untuk menampilkan list dalam bentuk bulatan atau kotak. Penulisan tag HTMLnya adalah <ul>
Dalam ordered list ini kita membuat urutan berupa angka, abjad atau romawi.
| Type | Description | |||
|---|---|---|---|---|
| type="1" | Membuat urutan dengan default angka | |||
| type="A" | Membuat urutan dengan abjad kapital / huruf balok | |||
| type="a" | Membuat urutan dengan abjad kecil | |||
| type="I" | Membuat urutan dengan tipe romawi dari I,II,III .. dst | |||
| type="i" | Membuat urutan dengan tipe romawi dari i,ii,iii ... dst |
CONTOH PENGGUNAAN ORDERED LIST
<!DOCTYPE html>
<html>
<head>
<title> ORDERED LIST </title>
</head>
<body>
<ol type="1">
<li>Belajar ordered lis</li>
<li>Tipe angka </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ol>
<ol type="A">
<li>Belajar ordered lis</li>
<li>Tipe huruf kapital </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ol>
<ol type="a">
<li>Belajar ordered lis</li>
<li>Tipe huruf kecil </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ol>
<ol type="I">
<li>Belajar ordered lis</li>
<li>Tipe romawi besar </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ol>
<ol type="i">
<li>Belajar ordered lis</li>
<li>Tipe romawi kecil </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ol>
</body>
</html>
 |
| Hasil script setelah di run |
Unardored adalah penggunaan list berupa lingkaran atau persegi berbeda dengan ordered list.
| Value | Description |
|---|---|
| disc | List berbentuk lingkaran tidak memiliki lubang |
| circle | List lingkaranL7 |
| square | List berbentuk persegi |
| none | List tanpa penanda |
CONTOH PENGGUNAAN UNARDORED
Di bawah ini adalah contoh dari penggunaan unardored list :
<!DOCTYPE html>
<html>
<head>
<title> UNDORRDERED LIST </title>
</head>
<body>
<ul type="disc">
<li>Belajar ordered list</li>
<li>Tipe angka </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ul>
<ul type="circle">
<li>Belajar ordered list</li>
<li>Tipe huruf kapital </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ul>
<ul type="square">
<li>Belajar ordered list</li>
<li>Tipe huruf kecil </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ul>
<ul type="none">
<li>Belajar ordered list</li>
<li>Tipe romawi besar </li>
<li>muhfajarshodiq.blogspot.co.id</li>
</ul>
</body>
</html>
 |
| Hasil script setelah di run |
REFERENSI : www.malesngoding.com
EmoticonEmoticon