Modul Praktikum CSS – Cara Cerdas Belajar CSS
PRAKTIKUM
: CSS List
NAMA
: ___________________________________
KELAS
: ___________________________________
TANGGAL PRAKTIKUM
: ___________________________________
A.
TUJUAN
1.
Siswa dapat mengenal, memahami serta dapat melakukan pengaturan list CSS
B.
DASAR TEORI
Tag elemen untuk membuat List di dalam dokumen HTML adalah: <ul> digunakan untuk list
yang tidak berurutan (unordered list) kemudian, <ol> digunakan untuk list yang berurutan
kemudian diikuti <li > adalah list menu yang akan ditampilkan (list item).
Untuk lebih jelasnya perhatikan contoh berikut ini:
<ul>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ul>
Hasil yang akan ditampilkan di browser:
Menu A
Menu B
Menu C
<ol>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ol>
Hasil yang akan ditampilkan di browser:
1. Menu A
2. Menu B
3. Menu C
Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya
adalah:
1.
List Style Image
Kita dapat menggunakan sebuah image yang digunakan sebagai penanda item pada lists
dengan menggunakan property
list-style-image
. Berikut adalah syntax penulisannya:
list-style-image: url(path_to_image.gif, jpg or png);
Value:
url
none
(2)
2.
List Style Position
Dengan menggunakan property
list-style-position
kita dapat memposisikan list item.
list-style-position: value;
Values:
inside
outside
3.
List Style Type
Dengan menggunakan property
list-style-type
kita bisa menentukan tipe penanda dari
sebuah list item.
list-style-type: value;
Values:
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
Note:
Pada beberapa jenis browser, halaman web mungkin ditampilkan berbeda, tergantung
jenis browser yang digunakan (pada praktikum ini, direkomendasikan menggunakan
browser Firefox).
(3)
4.
List Style
Dengan menggunakan property
list-style
kita bisa mempersingkat penggunaan beberapa
property list style menjadi satu property saja. Berikut adalah syntax penulisannya:
list-style: value value value;
Value:
list-style-type
list-style-position
list-style-image
(4)
C.
PRAKTIKUM
Ketentuan Praktikum:
1.
Penerapan list-style-type [1]
2.
Penerapan list-style-type [2]
1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.
<html>
<head><title>Penerapan list-style-type [1]</title></head> <body style="color:#99FF33; background-color:#888888;"> <ol>
<li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
<ul>
<li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul>
<ul style="list-style-type:armenian"> <li>HTML</li>
<li>CSS</li> <li>Javascript</li> </ul>
</body> </html>
<html>
<head><title>Penerapan list-style-type [2]</title></head> <body style="color:#0033FF; background-color:#CCFFCC"> <h2>list-style-type values:</h2>
<ul style="list-style-type:none"> <li>none</li>
<li>none</li> </ul>
<ul style="list-style-type:disc"> <li>disc</li>
<li>disc</li> </ul>
(5)
<ul style="list-style-type:circle"> <li>circle</li>
<li>circle</li> </ul>
<ul style="list-style-type:square"> <li>square</li>
<li>square</li> </ul>
<ul style="list-style-type:decimal-leading-zero"> <li>decimal-leading-zero</li>
<li>decimal-leading-zero</li> </ul>
<ul style="list-style-type:lower-roman"> <li>lower-roman</li>
<li>lower-roman</li> </ul>
<ul style="list-style-type:upper-roman"> <li>upper-roman</li>
<li>upper-roman</li> </ul>
<ul style="list-style-type:lower-alpa"> <li>lower-alpa</li>
<li>lower-alpa</li> </ul>
<ul style="list-style-type:upper-alpa"> <li>upper-alpa</li>
<li>upper-alpa</li> </ul>
<ul style="list-style-type:lower-greek"> <li>lower-greek</li>
<li>lower-greek</li> </ul>
<ul style="list-style-type:lower-latin"> <li>lower-latin</li>
<li>lower-latin</li> </ul>
<ul style="list-style-type:upper-latin"> <li>upper-latin</li>
<li>upper-latin</li> </ul>
<ul style="list-style-type:hebrew"> <li>hebrew</li>
<li>hebrew</li> </ul>
(6)
3.
Penerapan list-style-position
<ul style="list-style-type:armenian"> <li>armenian</li>
<li>armenian</li> </ul>
<ul style="list-style-type:georgian"> <li>georgian</li>
<li>georgian</li> </ul>
<ul style="list-style-type:cjk-ideographic"> <li>cjk-ideographic</li>
<li>cjk-ideographic</li> </ul>
<ul style="list-style-type:hiragana"> <li>hiragana</li>
<li>hiragana</li> </ul>
<ul style="list-style-type:katakana"> <li>katakana</li>
<li>katakana</li> </ul>
<ul style="list-style-type:hiragana-iroha"> <li>hiragana-iroha</li>
<li>hiragana-iroha</li> </ul>
</body> </html>
<html>
<head><title>list-style-position</title></head> <style type="text/css">
ul.in{
list-style-position:inside; }
ul.out{
list-style-position:outside; }
</style>
<body style="background:#DDDDDD">
<h2 style="font-style:italic; color:#003366">List-style-position:</h2> <ul class="in">
<li>inside</li> <li>inside</li> </ul>
(7)
4.
Nested List tanpa bullet
<html>
<head><title>Nested list tanpa bullet</title></head> <style type="text/css">
#navcontainer ul{
list-style-type: none; color:purple; font-weight:bold; font-style:italic; }
</style>
<body style="background:#DDDDDD"> <div id="navcontainer">
<ul> <li>Milk <ul> <li>Goat</li> <li>Cow</li> </ul> </li> <li>Cheese <ul>
<li>Smelly</li> <li>Extra smelly</li> </ul>
</li> </ul> </div> </body> </html>
<ul class="out"> <li>outside</li> <li>outside</li> </ul>
<ul class="in"> <li>inside</li> <li>inside</li> </ul>
</body> </html>
(8)
5.
Penerapan list-style-image
Note:
<html>
<title>Penerapan list-style-image</title> <style type="text/css">
#blue{
list-style-image:url('images/blue_arrow.gif'); color:blue;
} #brown{
list-style-image:url('images/brown_arrow.gif'); color:brown;
} li{
font-size:14px; font-style:italic; font-weight:bold; padding-top:5px; }
</style> <body>
<ul id="blue"> <li>blue arrow</li> <li>blue arrow</li> <li>blue arrow</li> <li>blue arrow</li> </ul>
<ul id="brown"> <li>brown arrow</li> <li>brown arrow</li> <li>brown arrow</li> <li>brown arrow</li> </ul>
</body> </html>
Ukuran image: 14x14 pixels
(9)
6.
Penerapan list-style
D.
KESIMPULAN
<html>
<title>List-Style</title> <style type="text/css"> ul.custom1{
list-style : none url('images/green.jpg') inside; }
ul.custom2{
list-style : square url('none') inside; }
li{
padding-top:4px; color:green; font-style:italic; font-size:20px; }
</style> <body>
<h2 style="culor:maroon;font-style:italic;text-decoration:underline;">Today's Menus:</h2> <ul class="custom1">
<li>Nasi Goreng Kambing</li> <li>Nasi Goreng Omelet</li> <li>Nasi Goreng Sosis</li> <li>Nasi Goreng Pedas</li> <li>Nasi Goreng Ayam</li> <li>Nasi Goreng Jamur</li> </ul>
<ul class="custom2"> <li>Es Campur</li> <li>Es Cingcau</li> <li>Es Kelapa Muda</li> <li>Bandrek</li> <li>Bajigur</li> </ul>
</body> </html>
(1)
C.
PRAKTIKUM
Ketentuan Praktikum:
1.
Penerapan list-style-type [1]
2.
Penerapan list-style-type [2]
1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.
<html>
<head><title>Penerapan list-style-type [1]</title></head> <body style="color:#99FF33; background-color:#888888;"> <ol>
<li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
<ul>
<li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul>
<ul style="list-style-type:armenian"> <li>HTML</li>
<li>CSS</li> <li>Javascript</li> </ul>
</body> </html>
<html>
<head><title>Penerapan list-style-type [2]</title></head> <body style="color:#0033FF; background-color:#CCFFCC"> <h2>list-style-type values:</h2>
<ul style="list-style-type:none"> <li>none</li>
<li>none</li> </ul>
<ul style="list-style-type:disc"> <li>disc</li>
<li>disc</li> </ul>
(2)
<ul style="list-style-type:circle"> <li>circle</li>
<li>circle</li> </ul>
<ul style="list-style-type:square"> <li>square</li>
<li>square</li> </ul>
<ul style="list-style-type:decimal-leading-zero"> <li>decimal-leading-zero</li>
<li>decimal-leading-zero</li> </ul>
<ul style="list-style-type:lower-roman"> <li>lower-roman</li>
<li>lower-roman</li> </ul>
<ul style="list-style-type:upper-roman"> <li>upper-roman</li>
<li>upper-roman</li> </ul>
<ul style="list-style-type:lower-alpa"> <li>lower-alpa</li>
<li>lower-alpa</li> </ul>
<ul style="list-style-type:upper-alpa"> <li>upper-alpa</li>
<li>upper-alpa</li> </ul>
<ul style="list-style-type:lower-greek"> <li>lower-greek</li>
<li>lower-greek</li> </ul>
<ul style="list-style-type:lower-latin"> <li>lower-latin</li>
<li>lower-latin</li> </ul>
<ul style="list-style-type:upper-latin"> <li>upper-latin</li>
<li>upper-latin</li> </ul>
<ul style="list-style-type:hebrew"> <li>hebrew</li>
(3)
3.
Penerapan list-style-position
<ul style="list-style-type:armenian"> <li>armenian</li><li>armenian</li> </ul>
<ul style="list-style-type:georgian"> <li>georgian</li>
<li>georgian</li> </ul>
<ul style="list-style-type:cjk-ideographic"> <li>cjk-ideographic</li>
<li>cjk-ideographic</li> </ul>
<ul style="list-style-type:hiragana"> <li>hiragana</li>
<li>hiragana</li> </ul>
<ul style="list-style-type:katakana"> <li>katakana</li>
<li>katakana</li> </ul>
<ul style="list-style-type:hiragana-iroha"> <li>hiragana-iroha</li>
<li>hiragana-iroha</li> </ul>
</body> </html>
<html>
<head><title>list-style-position</title></head> <style type="text/css">
ul.in{
list-style-position:inside; }
ul.out{
list-style-position:outside; }
</style>
<body style="background:#DDDDDD">
<h2 style="font-style:italic; color:#003366">List-style-position:</h2> <ul class="in">
<li>inside</li> <li>inside</li> </ul>
(4)
4.
Nested List tanpa bullet
<html><head><title>Nested list tanpa bullet</title></head> <style type="text/css">
#navcontainer ul{
list-style-type: none; color:purple; font-weight:bold; font-style:italic; }
</style>
<body style="background:#DDDDDD"> <div id="navcontainer">
<ul> <li>Milk <ul> <li>Goat</li> <li>Cow</li> </ul> </li> <li>Cheese <ul>
<li>Smelly</li> <li>Extra smelly</li> </ul>
</li> </ul> </div> </body> </html>
<ul class="out"> <li>outside</li> <li>outside</li> </ul>
<ul class="in"> <li>inside</li> <li>inside</li> </ul>
</body> </html>
(5)
5.
Penerapan list-style-image
Note:
<html><title>Penerapan list-style-image</title> <style type="text/css">
#blue{
list-style-image:url('images/blue_arrow.gif'); color:blue;
} #brown{
list-style-image:url('images/brown_arrow.gif'); color:brown;
} li{
font-size:14px; font-style:italic; font-weight:bold; padding-top:5px; }
</style> <body>
<ul id="blue"> <li>blue arrow</li> <li>blue arrow</li> <li>blue arrow</li> <li>blue arrow</li> </ul>
<ul id="brown"> <li>brown arrow</li> <li>brown arrow</li> <li>brown arrow</li> <li>brown arrow</li> </ul>
</body> </html>
Ukuran image: 14x14 pixels
(6)
6.
Penerapan list-style
D.
KESIMPULAN
<html>
<title>List-Style</title> <style type="text/css"> ul.custom1{
list-style : none url('images/green.jpg') inside; }
ul.custom2{
list-style : square url('none') inside; }
li{
padding-top:4px; color:green; font-style:italic; font-size:20px; }
</style> <body>
<h2 style="culor:maroon;font-style:italic;text-decoration:underline;">Today's Menus:</h2> <ul class="custom1">
<li>Nasi Goreng Kambing</li> <li>Nasi Goreng Omelet</li> <li>Nasi Goreng Sosis</li> <li>Nasi Goreng Pedas</li> <li>Nasi Goreng Ayam</li> <li>Nasi Goreng Jamur</li> </ul>
<ul class="custom2"> <li>Es Campur</li> <li>Es Cingcau</li> <li>Es Kelapa Muda</li> <li>Bandrek</li> <li>Bajigur</li> </ul>
</body> </html>