Cara Membuat List pada HTML
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
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
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 :
<!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 😀
Berikut 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
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
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
Unordered List. Semoga membantu dan terimakasih.
Komentar
Posting Komentar