Membuat Daftar isi/List di HTML
Untuk lebih jelasnya, mari simak penjelasan dibawah ini :
A. Ordered List
Ordered list merupakan suatu list dimana item – item yang ada di dalamnya memiliki nomor urutan. Penggunaan ordered list dimulai dengan tag <ol> dan diakhiri dengan tag </ol> dimana diantara kedua tag tersebut terdapat tag <li>……</li> sebagai list item. Di dalam tag <ol>, terdapat beberapa atribut yaitu :
| Atribut | Fungsinya |
| type=”A” | Membuat list berurut dengan huruf besar ( A, B, C, D, ….. ) |
| type=”a” | Membuat list berurut dengan huruf kecil ( a, b, c, d, …. ) |
| type=”I” | Membuat list berurut dengan huruf romawi besar ( I, II, III, IV, ….. ) |
| type=”i” | Membuat list berurut dengan huruf romawi kecil ( i, ii, iii, iv, ……. ) |
| type=”1″ | Membuat list berurut dengan angka ( 1, 2, 3, 4, …… ) |
| compact | Menyatakan bahwa item dalam list pendek sehingga browser menampilkannya dalam bentuk yang lebih padat (atribut ini tidak didukung di banyak browser) |
| start=”n” | Menentukan nilai awal dari item dalam daftar dimana n = nilai awal |
Perlu Anda ketahui, secara default jika Anda tidak menuliskan tipe list pada tag <ol> maka tipe list yang akan tampil dalam format angkat seperti 1, 2, 3, dst. Berikut contoh kode penulisan dan penggunaan ordered list :
<!DOCTYPE html>
<html>
<head>
<title>Contoh pake tag Ol</title>
</head>
<body>
<ol type="A">
<li>Hello</li>
<li>para</li>
<li>Pembaca</li>
<li>Ini</li>
<li>Cuma</li>
<li>Contoh</li>
</ol>
</body>
</html>
Nanti hasilnya seperti ini :
Kita juga bisa pakai ordered list di CSS dengan menggunakan properti list-style-type:
| Atribut | Fungsi |
| list-style-type: upper-alpha; | Membuat list berurut dengan huruf besar ( A, B, C, D, ….. ) |
| list-style-type: lower-alpha; | Membuat list berurut dengan huruf kecil ( a, b, c, d, …. ) |
| list-style-type: upper-roman; | Membuat list berurut dengan huruf romawi besar ( I, II, III, IV, ….. ) |
| list-style-type: lower-roman; | Membuat list berurut dengan huruf romawi kecil ( i, ii, iii, iv, ……. ) |
| list-style-type: decimal; | Membuat list berurut dengan angka ( 1, 2, 3, 4, …… ) |
Berikut contoh kode penggunaan properti list-style-type untuk membuat ordered list:
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan list-style-type</title>
<style>
ol.d {list-style-type: upper-alpha;}
ol.e {list-style-type: lower-alpha;}
ol.f {list-style-type: upper-roman;}
ol.g {list-style-type: lower-roman;}
ol.h {list-style-type: decimal;}
</style>
</head>
<body>
<ol class="d">
<li>Halo </li>
<li>Hai</li>
<li>Hello</li>
</ol>
<ol class="e">
<li>LOL</li>
<li>FYI</li>
<li>LMAO</li>
</ol>
<ol class="f">
<li>kkk</li>
<li>kk</li>
<li>k</li>
</ol>
<ol class="g">
<li>tulul</li>
<li>tolol</li>
<li>telel</li>
</ol>
<ol class="h">
<li>Kenapa</li>
<li>Dimana</li>
<li>Apa</li>
</ol>
</body>
</html>
Ketika dijalankan di browser, tampilannya akan seperti berikut:
B. Unordered List
Secara umum, penggunaan unordered list ditandai dengan bulatan hitam, lingkaran , dan kotak pada awal list item. Tag <ul> memiliki beberapa atribut diantaranya adalah :
| Atribut | Fungsi |
| type=”disc” | Membuat tanda bulatan hitam untuk item (menjadi default jika atribut type tidak ditulis) |
| type=”circle” | Membuat tanda lingkaran putih untuk item |
| type=”square” | Membuat tanda kotak untuk item |
<!DOCTYPE html>
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<ul type="disc">
<li>TKJ</li>
<li>Mekatronika</li>
<li>Mesin</li>
<li>LAS</li>
<li>Lainnya</li>
</ul>
<ul type="circle">
<li>Kuli</li>
<li>Seniman</li>
</ul>
</body>
</html>
Setelah Anda menjalankan kode diatas di browser maka akan tampil seperti gambar dibawah ini:
Sama halnya dengan ordered list, untuk membuat unordered list di CSS bisa menggunakan properti list-style-type tetapi dengan value yang berbeda:
| Atribut | Fungsi |
| list-style-type: disc; | Membuat tanda bulatan hitam untuk item |
| list-style-type: circle; | Membuat tanda lingkaran putih untuk item |
| list-style-type: square; | Membuat tanda kotak untuk item |
Berikut contoh penggunaan properti list-style-type di CSS untuk membuat unordered list:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan properti list-style-type</title>
<style>
ul.a {list-style-type: disc;}
ul.b {list-style-type: circle;}
ul.c {list-style-type: square;}
</style>
</head>
<body>
<ul class="a">
<li>Halo</li>
<li>HAI</li>
<li>Hello</li>
</ul>
<ul class="b">
<li>LOL</li>
<li>LMAO</li>
<li>FYI</li>
</ul>
<ul class="c">
<li>kenapa</li>
<li>ditanah ku</li>
<li>...</li>
</ul>
</body>
</html>
Jika anda jalankan di browser, tampilannya akan seperti ini:
Sekian dulu pembahasan mengenai Cara Membuat Aplikasi dari Website dengan Mudah jika ada kesalahan saya mohon maaf, terima kasih.
Post a Comment for "Membuat Daftar isi/List di HTML"