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 :
Pembahasan :
Ordered List merupakan daftar list yang terurut. Ditandai dengan angka atau huruf yang ada didepan teks.
Contoh :
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 :
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 :
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 :
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 :
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 :
Oke itu saja belajar list pada html. Terima kasih sudah berkunjung. Tutorial Selanjutnya adalah :
Artikel Di Update Pada : 09 November 2019, 15:1309-11-2018, 14:29 1244x
09-11-2018, 15:00 389x
10-11-2018, 8:49 419x
23-11-2018, 21:59 725x
26-11-2018, 9:35 390x
03-12-2018, 19:06 323x
20-08-2019, 18:12 10973x
31-01-2019, 7:16 9652x
21-06-2019, 22:24 7784x
17-04-2020, 15:54 4871x
20-05-2020, 19:32 4386x
01-09-2019, 17:15 3919x
Copyright © 2021 CODEKOP All rights reserved
Dibuat dengan di Bekasi Indonesia