Pada tutorial kali ini kita akan membahas bagaimana Cara Membuat List pada HTML. List biasa digunakan untuk membuat sebuah daftar, daftar yang ber-urut maupun tidak. Pada HTML terdapat tiga daftar list yang dapat digunakan yaitu. Ordered List atau daftar berurut, digunakan untuk membuat daftar daftar yang akan di urutkan dengan benar. Unordered List atau daftar tidak berurut, digunakan untuk membuat daftar yang tidak memiliki urutan tertentu. Definition List atau daftar urutan, digunakan untuk membuat daftar definisi.
Ordered List
Ordered List atau list berurut, list ini di apit dengan tag <ol> dan </ol> dan juga tag <li> untuk membuat defisi list atau daftar dari list tersebut.
Script!
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Microsoft Office</h1>
<ol>
<li>Microsoft Office 2007</li>
<li>Microsoft Office 2010</li>
<li>Microsoft Office 1013</li>
<li>Microsoft Office 2016</li>
</ol>
</body>
</html>
Mengubah Icon List
Secara default browser menampilkan angka satu sebagai definisi listnya. Tapi itu bukanlah masalah, Karena kita juga dapat mengubahnya dengan menambah property type pada tag pembuka Ordered List, berikut adalah contohnya :
Script!
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Microsoft Office</h1>
<ol type="A">
<li>Microsoft Office 2007</li>
<li>Microsoft Office 2010</li>
<li>Microsoft Office 1013</li>
<li>Microsoft Office 2016</li>
</ol>
</body>
</html>
Mudah bukan :DBerikut adalah beberapa type yang bisa digunakan :- 1 = Jika ingin menggunakan angka
- A = Jika ingin menggunakan huruf capital
- a = Jika ingin menggunakan huruf kecil
- I = Jika ingin menggunakan romawi besar
- i = Jika ingin menggunakan romawi kecil
Unordered List
Unordered List adalah list yang tidak berurut, di apit dengan tag <ul> dan </ul> dan juga tag <li> sebagai definisi listnya.
Script!
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Kegiatan Sore Hari</h1>
<ul>
<li>Main Bola</li>
<li>Main Voli</li>
<li>Main Basket</li>
<li>Main Badminton</li>
</ul>
</body>
</html>
Mengubah Icon List
Secara default browser menampilkan titik hitam sebagai sebagai definisi listnya. Sama halnya dengan Ordered List, kita juga dapat mengubah tampilan icon dengan menggunaan cara yang sama seperti di atas tapi dengan atibut yang berbeda, lihat contoh berikut :
Script!
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Kegiatan Sore Hari</h1>
<ul type="square">
<li>Main Bola</li>
<li>Main Voli</li>
<li>Main Basket</li>
<li>Main Badminton</li>
</ul>
</body>
</html>
Berikut adalah beberapa type yang bisa digunakan :- Disc = Titik bulat berwarna hitma (default browser)
- Circle = Titik bulat, tapi tidak penuh
- Square = Titik Petak berwarna hitam
Itulah tadi cara cara penggunaan Ordered List dan Unordered List. Semoga membantu dan terimakasih.
