List dalam html terdiri dari ordered list (ol), undorderd-list (ul), dan definition list (dl). Semua list tersebut bisa diatur penempatan dan tampilan teks-nya dengan menggunakan properti CSS yang umum digunakan untuk teks.
Contoh di atas menggunakan <ul>. Kalian juga bisa menerapkan hal yang sama pada tag <ol>. Perbedaan akan lebih jelas kalau kalian memberikan 0 sebagai nilai padding atau text-indent.
Selain nilai properti yang ada pada contoh di atas, kalian juga bisa memberikan nilai-nilai di bawah ini pada properti list-style-type.
Contoh di atas menggunakan file "bullet.png" untuk properti list-style image pada list pertama. Karena itu, kalian perlu meletakkan file dengan nama tersebut di folder yang sama dengan file HTML-nya. Ukurannya file gambar atau icon yg digunakan untuk bullet sebaiknya cukup kecil. Misalnya, saya menggunakan bullet seperti di bawah ini untuk mencoba contoh kode HTML di atas.
Khusus untuk ol dan ul, kedua elemen HTML ini memiliki properti yang dikhususkan untuk elemen tersebut. Properti-properti tersebut digunakan untuk mengatur tampilan bullet.
- List-style-position : Menentukkan posisi bullet atau penomoran.
- List-style-type : Menentukan jenis bullet.
- List-style-image : Mengganti bullet dengan gambar pada unordered list.
- List-style : Cara ringkas penulisan semua properti di atas.
List-style-position
Properti list-style-position digunakan untuk menentukan apakah bulet atau penomoran dijadikan bagian dari teks atau dianggap sebagai bagian terpisah. Nilai yang bisa kalian gunakan untuk properti ini adalah inside dan outside. Nilai inside menempatkan bullet sebagai bagian dari teks. Sebaliknya, outside membuat bullet tidak dianggap sebagai bagian dari teks. Selain itu, kalian bisa menggunakan initial dan inherit yang merupakan nilai umum properti CSS.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.daftar1{
list-style-position : outside;
}
.daftar2{
list-style-position : inside;
}
</style>
</HEAD>
<BODY>
<ul class="daftar1">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
<ul class="daftar2">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
</BODY>
</HTML>
Contoh di atas menggunakan <ul>. Kalian juga bisa menerapkan hal yang sama pada tag <ol>. Perbedaan akan lebih jelas kalau kalian memberikan 0 sebagai nilai padding atau text-indent.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
ul{
padding:0;
}
.daftar1{
list-style-position : outside;
}
.daftar2{
list-style-position : inside;
}
</style>
</HEAD>
<BODY>
<ul class="daftar1">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
<ul class="daftar2">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
</BODY>
</HTML>
List-style-type
Properti ini berguna untuk menentukan jenis penomoran atau bullet yang digunakan list. Properti ini bisa digunakan pada ordered list maupun unordered list.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
ul, ol{
padding : 0;
list-style-position : outside;
}
ul{
list-style-type:circle;
}
ol{
list-style-type:lower-alpha;
}
</style>
</HEAD>
<BODY>
<ul class="daftar1">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
<ol class="daftar2">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
</BODY>
</HTML>Selain nilai properti yang ada pada contoh di atas, kalian juga bisa memberikan nilai-nilai di bawah ini pada properti list-style-type.
- Armenian
- Decimal
- Decimal-leading-zero
- Disc
- Georgian
- Hebrew
- Square
- Circle
- Cjk-ideographic
- Katakana
- Katakana-iroha
- Hiragana
- Hiragana-iroha
- Lower-alpha
- Lower-latin
- Lower-greek
- Lower-roman
- Upper-alpha
- Upper-latin
- Upper-greek
- Upper-roman
- None
- Inherit
- Initial
Selain none, inherit, dan initial; nilai-nilai properti list-style-type di atas bisa digunakan untuk mengubah jenis bullet dan penomoran yang digunakan list. Jika kalian memberikan nilai none pada list-style-type, maka list tidak akan memiliki bullet ataupun penomoran.
List-style-image
Selain menggunakan bulllet, angka, dan huruf; kalian juga bisa menggunakan gambar atau icon pada item-item di dalam list. Gambar yang umum digunakan adalah gambar berformat PNG dengan ukuran kecil. Kalian bisa memberikan nama file yang digunakan sebagai bullet dalam function url yang menjadi nilai properti list-style-image.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.daftar1{
list-style-image:url("bulletku.png");
}
daftar2{
list-style-type:none;
}
</style>
</HEAD>
<BODY>
<ol class="daftar1">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ol>
<ol class="daftar2">
<li>Ke-satu</li>
<li>Ke-dua</li>
<li>Ke-tiga</li>
</ul>
</BODY>
</HTML>Properti List-style
Properti list-style digunakan untuk mempersingkat penulisan properti list-style-position, list-style-type, dan list-style image. list-style menggunakan 3 nilai secara langsung pada satu properti. Pola penulisan nilai pada properti list-style adalah sebagai berikut.
List-Style : position type image;
Contoh :
ul{
list-style : outside disk url("bulletku.png");
}