Membuat Daftar isi/List di HTML


Hallo teman-teman semua,
Selamat datang di Blog ini

Disini kita akan membahas tentangMembuat Daftar isi/List di HTML
Check it out !!!

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 dari saya, semoga artikel ini bermanfaat:D

“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

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel