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 :

AtributFungsinya
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, …… )
compactMenyatakan 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:

AtributFungsi
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 :

AtributFungsi
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:

AtributFungsi
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.

“Yes I'm seeking for someone, to help me. So that some day I will be the someone to help some other one.”

0 Response to "Membuat Daftar isi/List di HTML"

Post a Comment

Iklan Atas Artikel

loading...

Iklan Tengah Artikel 1

loading...

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...