Daftar List Pada HTML
List adalah salah satu elemen HTML yang digunakan untuk menampilkan informasi dalam bentuk List atau Daftar. Dan biasanya di buat untuk membuat menu-menu.
List di HTML umumnya terdapat 2 macam jenis list yang sering di gunakan pada umumnya yaitu :
- Ordered List yaitu List yang terurut,
- Unordered List yaitu List yang tidak terurut.
Pembahasan :
1. Cara Membuat Ordered List pada HTML
Ordered List merupakan daftar list yang terurut. Ditandai dengan angka atau huruf yang ada didepan teks.
Contoh :
- HTML
- CSS
- PHP
- MYSQL
Penggunaan Ordered List pada HTML ditandai dengan penggunaan Tag <ol> dan sub tagnya adalah <li> atau (list item)
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Ordered</title>
</head>
<body>
<h5>5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :</h5>
<ol>
<li>CMS Sekolahku</li>
<li>CMS Popoji</li>
<li>Fiyo CMS</li>
<li>HTMLy</li>
<li>Lokomedia</li>
</ol>
</body>
</html>
Hasilnya :
5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :
- CMS Sekolahku
- CMS Popoji
- Fiyo CMS
- HTMLy
- Lokomedia
List diatas merupakan urutan 1-5, bagaimana kita ubah urutan dari 1-5 menjadi huruf alphabet a,b,c atau romawi I,II,III. Dengan menggunakan atribut type pada tag <ol>. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h5>List dengan type alfabet</h5>
<ol type='A'>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ol>
<h5>List dengan type alfabet kapital (huruf besar)</h5>
<ol type='a'>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ol>
<h5>List dengan type romawi</h5>
<ol type='I'>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ol>
<h5>List dengan type romawi kapital</h5>
<ol type='i'>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ol>
</body>
</html>
Hasil :
List dengan type alfabet
- HTML
- CSS
- PHP
- MySQL
- jQuery
List dengan type alfabet kapital (huruf besar)
- HTML
- CSS
- PHP
- MySQL
- jQuery
List dengan type romawi
- HTML
- CSS
- PHP
- MySQL
- jQuery
List dengan type romawi kapital
- HTML
- CSS
- PHP
- MySQL
- jQuery
2. Cara Membuat Unordered List pada HTML
Unordered List adalah list yang tidak terurut, biasanya menggunakan simbol-simbol.
Penggunaan Unordered List pada HTML ditandai dengan penggunaan Tag <ul> dan sub tagnya adalah <li> atau (list item)
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h5>Daftar Tutorial Website Codekop.com :</h5>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
</body>
</html>
Hasil :
Daftar Tutorial Website Codekop.com :
- HTML
- CSS
- PHP
- MySQL
- jQuery
Untuk default symbol lingkaran kecil yang terdapat pada tag <ul>, kita dapat mengubahnya symbolnya dengan menggunakan atribut type :
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h5>Type = square</h5>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
<h5>Type = disc</h5>
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
<h5>Type = none</h5>
<ul type="none">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
<h5>Type = circle</h5>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
</body>
</html>
Hasil :
Type = square
- HTML
- CSS
- PHP
- MySQL
- jQuery
Type = disc
- HTML
- CSS
- PHP
- MySQL
- jQuery
Type = none
- HTML
- CSS
- PHP
- MySQL
- jQuery
Type = circle
- HTML
- CSS
- PHP
- MySQL
- jQuery
dan anda dapat mengubah menjadi gambar pada symbol list tersebut :
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h5> List Style dengan Gambar : </h5>
<ul style="list-style-image: url('https://www.codekop.com/cd-view/assets/media/source/fauzan1892/leaf_icon.jpg');">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>jQuery</li>
</ul>
</body>
</html>
Hasil :
List Style dengan Gambar :
- HTML
- CSS
- PHP
- MySQL
- jQuery
Oke itu saja belajar list pada html. Terima kasih sudah berkunjung. Tutorial Selanjutnya adalah :