Pengertian dan fungsi list
sebelum lebih jauh ke prakterk ngodingnya sendiri kita juga perlu tau jenis dan pengertian dari list sendiri, list digunakan untuk memebuat sebuah daftar kata-kata tertentu/data baik secara terstruktur ataupun tidak terstruktur, untuk membuat list kita perlu menambahkan tag <li></li>, tak jarang list juga dimanfaatkan untuk membuat navbar pada header atau footer suatu website. kalo belum percaya silahkan inspect saja..
Jenis-jenis list !
1. Unordered list
unordered list digunakan ketika kita mendaftar data / kata-kata tertentu yang sifatnya tidak terstruktur, untuk membuatnya maka tinggal tambahkan tag <ul></ul>.maka akan menghasilkan bentuk list bulat atau kotak, tergantung dari type yang digunakan.
2. Ordered list
ordered list digunakan untuk mendaftar data yang terstruktur mulai dari 1 dan seterusnya, sifatnya otomatis, default dari list ini adalah angka 1, untuk membuatnya cukup menambahkan tag <ol></ol> , kita dapat mengganti dengan abjad atau angka romawi sesuai dengan yang kita inginkan, bagaimana cara mengubahnya? langsung kita pelajari.
untuk mengubah bentuk ataupun jenis list kita membutuhkan atribut yaitu type="" kita bisa menambahkan atribut ini pada tag ul/ol tergantung kebutuhan kita.
contoh atribut type untuk tag ul !
type="disk" (menghasilkan type dafault)
type="circle" (menghasilkan bentuk kotak)
type="square" (menghasilkan bentuk lingkaran)
contoh atribut type untuk tag ol !
type="1" (menghasilkan type default)
type="I" (menghasilkan bentuk romawi)
type="a" (menghasilkan bentuk abjad kecil)
type="A" (menghasilkan bentuk abjad besar)
source code implementasi list :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Implementasi List - Html Dasar</title>
</head>
<body>
<!-- unordered List -->
<ul>
<li type="disk">Pembelajaran 1</li>
<li type="square">Pembelajaran 2</li>
<li type="circle">Pembelajaran 3</li>
</ul>
<!-- ordered list -->
<ol type="a">
<li>Materi Html</li>
<li>Materi Css</li>
<li>Materi JavaScript</li>
</ol>
</body>
</html>
semoga pembelajaran list kali ini dapat bermanfaat, terima kasih...
Happy ngoding !