PENGERTIAN
SleepingCodings - List di CSS ini di gunakan untuk membuat suatu daftar list dengan model tertentu misalnya list yang berbentuk angka, titik, angka romawi, dan lainnya. Nah, dengan CSS inilah temen" dapat memanipulasi list HTML dengan mengubah bentuk tanda listnya, untuk mengubah bentuk list HTML dengan CSS temen" hanya perlu menggunakan property "list-style-type" yang berarti tipe gaya list.
PERBEDAAN <ul> dan <ol>
1. <ul> kepanjangan dari undordered list dan merupakan suatu syntax HTML yang jika di gunakan di list, maka list akan berbentuk bulat-bulat.
2. <ol> kepanjangan dari ordered lsit dan merupakan suatu sytax HTML yang jika di gunakan di list, maka list akan di manipulasi menjadi bentuk angka.
PENGGUNAAN LIST DENGAN MEMANIPULASI LIST HTML MENGGUNAKAN CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sleeping-Codings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial cara memanipulasi list dengan menggunakan bantuan CSS</h1>
<!-- Menggunakan unordered list -->
<ul class="hobi">
<li>Membaca</li>
<li>Menulis</li>
<li>Bermain Gitar</li>
<li>Bermain SepakBola</li>
</ul>
<!-- Menggunakan ordered list -->
<ol class="cita-cita">
<li>Guru</li>
<li>Programmer</li>
<li>Arsitektur Design</li>
<li>Pengusaha MicroChips</li>
</ol>
</body>
</html>
style.css
h1 {
text-align: center;
}
.hobi {
list-style-type: upper-roman;
}
.cita-cita {
list-style-type: circle;
}
Dan ketika di jalankan di Web Browser :
 |
| Gambar 1.1 Memanipulasi List Sleeping-Codings |
MACAM-MACAM LIST TYPE YANG ADA DI CSS
1. list-style-type: square; /* list dengan bentuk square (kotak) */
2. list-style-type: circle; /* list dengan bentuk lingkaran */
3. list-style-type: upper-alpha; /* list dengan bentuk alphabet */
4. list-style-type: upper-roman; /* list dengan bentuk romawi */
Dan yang satu ini cara menghilangkan list style, yang berguna saat temen" mau membuat sebuah navigasi / dropdown menu.
1. list-style: none; /* menghilangkan tanda list */
PENGGUNAAN / MEMANIPULASI LIST ALA HAFID
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sleeping-Codings</title>
</head>
<body>
<h1 style="text-align: center;">Tutorial cara memanipulasi list dengan menggunakan bantuan CSS</h1>
<ul type="I" class="temenBLC" style="text-align: center;">
<li>Umam = Sulawesi(BK)</li>
<li>Icar = Sulawesi(BK)</li>
<li>Sidni = Sulawesi(BK)</li>
<li>Umam = Kalimantan(NJ)</li>
<li>Rama = Malang(NJ)</li>
<li>Agung = (NJ)</li>
<li>Bambang = (NJ)</li>
<li>Ilzam = (NJ)</li>
<li>Fadli = (NJ)</li>
<li>Mudrofi = Kendal(MUGA)</li>
<li>David = Kendal(MUGA)</li>
<li>Ashikin = Kenda(MUGA)</li>
</ul>
</body>
</html>
Jika di jalankan di web browser :
 |
| Gambar 1.2 Memanipulasi List Sleeping-Codings |
Contoh :
1. type="I"
2. type="1"
3. type="A"
Dan lain sebagainya.
Tentunya lebih mudah pake yang ini kan :v hahahhaa.
KESIMPULAN
Nah, dari sini penggunaan list tentunya lebih gampangkan karena di list ini kita hanya menentukan type dan mengetahui cara untuk menghilangkan list tersebut agar bisa menjadi sebuah menu navigasi yang cantik.
Semoga Bermanfaat ~
REFERENSI
1. MalasNgoding
No comments:
Post a Comment