Pada kode HTML kita telah mengenal mekanisme untuk menampilkan daftar item (list), yaitu menggunakan elemen ul (untuk list berpenanda) dan ol(untuk list ber-angka). Pada kedua elemen tersebut setiap item ditulis dalam pasangan tag <li> dan </li>. Secara default (tanpa pengaturan) penanda list atau disebut bullet pada elemen ul adalah lingkaran. Bila kita ingin mengubahnya cukup dengan merubah tipe list pada kode html tersebut. Namun ada cara yang lebih mudah dan praktis yaitu dengan CSS. Kita bisa melakukan pengaturan property list-style-type. Dalam hal ini, nilainya bisa diisi dengan :
Circle (berupa lingkaran), Disc (berupa piringan), Square (berupa kotak)
Contoh :
Siapkan notepad atau dreamweaver sobat , bwt file baru dan ketikkan kode berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>List CSS</title>
<style type=”css/javascript”>
.lingkaran{
List-style-type : circle;
}
.piringan{
List-style-type : disc;
}
.kotak{
List-style-type : square;
}
</style>
</head>
<body>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”piringan”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”lingkaran”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”kotak”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
</body>
</html>
Jalankan file html sobat dan perhatikan dengan seksama. Kira – kira hasilnya seperti ini :
Bagaimana dengan pengaturan urutan dalam list CSS?
Untuk mengatur list yang menggunakan angka (atau huruf), properti list-style-type bisa diisi dengan nilai - nilai berikut :
decimal (berupa 1, 2, 3, 4)
decimal-leading-zero (berupa 01, 02, 03, 04)
lower-roman (berupa i, ii, iii, iv)
upper-roman (berupa I, II, III, IV)
lower-alpha atau lower-latin (berupa a, b, c, d)
upper-alpha atau upper-latin (berupa A, B, C, D)
Silahkan bereksperimen dengan mengganti pengaturan style properti css sobat.
Sobat juga bisa melakukan pengaturan list dengan penanda gambar...
Properti yang digunakan adalah list-style-image. Berikut contoh pengaturannya :
list-style-image : url ("https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png") ;
https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png adalah alamat gambar dan nama file gambar yang ingin sobat jadikan penanda list.
Contoh :
Silahkan ketik web berikut dalam file html baru melalui notepad atau dreamweaver sobat :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>List CSS</title><style type="text/css">ul {List-style-image : url("https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png");List-style-type: disc;}</style></head><body><h2>Daftar Binatang Berkaki empat</h2><ul><li>Singa</li><li>Kambing</li><li>kuda</li><li>kucing</li></ul></body></html>
Jalankan file html sobat lalu perhatikan. Kira – kira hasilnya seperti ini :
Pada kode di atas, saya memasukkan List-style-type: disc; dibawah list-style-image sebagai arti bahwa jika file gambar tersebut tidak terdapat di alamat yang dituju maka pengaturan list berganti dengan tipe disc saja.
Sekian tutorial pengaturan tampilan list CSS. Semoga bermanfaat dan sampai jumpa pada tutorial berikutnya.
|
Share ke Google
|
"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
|
| Untuk mendapat respon balik dari saya, tuliskan identitas sobat dalam memberi komentar dalam kolom dibawah ini. |
0 comments:
Post a Comment