bewoksatukosong.com - Hello balik dengan om bewok, kali ini om bewok bakal bahas Mengenai Lists Dalam CSS, hmm mungkin teman - teman kurang engeh kalau ga di kasih contoh nya, nih om kasih contohnya. BOOM
 |
| Contoh List |
Mungkin setelah liat gambar ini, teman - teman bakal inget, yap ini di buat di html yang mungkin kamu pernah baca di website bewok dengan penulis om aji. nah di sini om bewok lebih ke sisi css, lebih ke design agar lebih menarik.
Sebelum beranjak lebih jauh om bewok bakal flashback dulu ke sebelumnya agar kamu tidak ketinggalan, nanti kalau udah dijelasin malah makin ga ngerti lagi, lets check it out
Sebenernya yang sering di gunakan hanya ada 2 dalam pembuatan lists ini di website yaitu ul dan ol
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Lists</title>
</head>
<body>
<ol>
<li>Jeruk</li>
<li>Pepaya</li>
<li>Apel</li>
</ol><br/>
<ul>
<li>Gajah</li>
<li>Harimau</li>
<li>Singa</li>
</ul>
</body>
</html> |
| Demo Codingan di atas |
Ol akan menghasillan bulat
Li akan menghasilkan angka
Nah dengan menggunakan css, kamu dapat mengubah bulet bulet tadi atau angka tadi menjadi. Contoh ya huruf romawi, gambar yang kamu inginkan tapi ukuran nya harus kecil, lalu kita juga bisa memberi background, font color dan mungkin masih ada yang lain dan bakal di bahas semuanya silet eh maksudnya di bewok, maklum korban tipi haha
Oke langsung saja kita buat css nya dengan keduanya eh maksud nya satu - persatu
Materi 1
Materi pertama om bewok akan mencoba mengganti kan buletan atau angka menjadi ya pokoknya lihat saja, sebenernya cari ini bisa di gunakan langsung ke html juga loh. Tapi kalau di sini akan berubah dengan menggunakan CSS
<!DOCTYPE html>
<html>
<head>
<title>Belajar Lists</title>
</head>
<body>
<ol>
<li>Jeruk</li>
<li>Pepaya</li>
<li>Apel</li>
</ol><br/>
<ul>
<li>Gajah</li>
<li>Harimau</li>
<li>Singa</li>
</ul><html>
<head>
<title>Belajar Lists</title>
<style>
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
ul.e {
list-style-type: circle;
}
ul.f {
list-style-type: square;
}
</style>
</head>
<body>
<h1>Ini yang menggunakan angka romawi besar</h1>
<ol class="c">
<li>Jeruk</li>
<li>Pepaya</li>
<li>Apel</li>
</ol>
<h1>Ini yang menggunakan huruf kecil</h1>
<ol class="d">
<li>Jeruk</li>
<li>Pepaya</li>
<li>Apel</li>
</ol>
<h1>Ini adalah menggunakan lingkaran</h1>
<ul class="e">
<li>Gajah</li>
<li>Harimau</li>
<li>Singa</li>
</ul>
<h1>Ini yang menggunakan kotak</h1>
<ul class="f">
<li>Gajah</li>
<li>Harimau</li>
<li>Singa</li>
</ul>
</body>
</html>
Catatan :
upper = huruf menjadi besar
lower = huruf menjadi kecil
Materi 2
Anak kecil yang waktu itu muncul kembali
anak kecil : om bewok, bisa ga sih posisi bulet - bulet tadi agak masuk ke dalam ?
om bewok : bisa dong, sini om kasih contoh
<!DOCTYPE html>
<html>
<head>
<title>list-inside</title>
<style type="text/css">
ul {
list-style-position: inside;
}
</style>
</head>
<body>
<p>Halo guys ketemu lagi dengan gw tentu nya om bewok, om bewok sedang menjelaskan mengenai position pada lists </p>
<ul>
<li>after the rain</li>
<li>Number you</li>
<li>Adelaide Sky</li>
</ul>
</body>
</html>
Hasilnya akan seperti ini
Lihat bulet - bulet nya akan agak masuk ke dalam.
Materi 3
Nah ini yang terakhir yang paling om bewok suka, yaitu ganti background. Cukup mudah kok caranya. Lihat seperti di bawah ini ya
<!DOCTYPE html>
<html>
<head>
<title>lists-background</title>
<style>
ol {
background: #BA68C8;
padding: 20px;
}
ol li {
background: #F3E5F5;
padding: 10px 20px;
color: #000;
font-weight: bold;
}
ul {
background: #2196F3;
padding: 20px;
}
ul li {
background: #BBDEFB;
padding: 10px 20px;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Kita bakal edit 2 yaitu ol & ul -->
<ol>
<li>Mazda</li>
<li>Ford</li>
<li>Kijang</li>
</ol>
<ul>
<li>makan</li>
<li>Tidur</li>
<li>minum</li>
</ul>
</body>
</html>
Hasilnya akan seperti dibawah ini. keren ga ? biasa aja
Biar teman - teman ga bingung mari om jelasin satu persatu.
ol {
background: #BA68C8;
padding: 20px;
}
ol li {
background: #F3E5F5;
padding: 10px 20px;
color: #000;
font-weight: bold;
}
Untuk ol Kita memang memanggil ol, di dalam ol kita beri dia background yang artinya warna latar belakang, lalu padding, padding memberi space di dalam kotak tersebut
ol li ? seperti biasa background lagi, kita beri padding 10px untuk atas dan bawah 20 px untuk kiri dan kanan, lalu kita beri warna font nya menjadi hitam lalu kita beri font nya menjadi lebih tebal. Lanjut ke ul ya ...
ul {
background: #2196F3;
padding: 20px;
}
ul li {
background: #BBDEFB;
padding: 10px 20px;
color: #fff;
font-weight: bold;
}
Untuk ul kita beri sama yaitu background dan padding
untuk ul li background seperti biasa, padding yang sudah dijelaskan tadi, warna font, dan font weight yang mana memberikan ketebalan huruf menjadi lebih tebal.
Itu saja tutorial dari om bewok mengenai CSS Part 13 Mengenai Lists, Selanjutnya kita akan Belajar CSS Part 14 Mengenai Table
om bewok maaf ini tutor yang ke 14 ga ada bukan yang bikin tabel ?
ReplyDelete