Praktikum 7 CSS (List)

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. 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).
2
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
3
C. PRAKTIKUM
Ketentuan Praktikum:
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.
1. Penerapan list-style-type [1]

<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>
2. Penerapan list-style-type [2]

<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>
4
<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>
5
<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>
3. Penerapan list-style-position
<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>
6
<ul class="out">
<li>outside</li>
<li>outside</li>
</ul>
<ul class="in">
<li>inside</li>
<li>inside</li>
</ul>
</body>
</html>
4. Nested List tanpa bullet

<html>
<head><title>Nested list tanpa bullet</title></head>
#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>
7
5. Penerapan list-style-image
<html>
<title>Penerapan list-style-image</title>
#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>
</ul>
</body>
</html>
Note:
 Ukuran image: 14x14 pixels

 Lokasi File : /images
8
6. Penerapan list-style
<html>
<title>List-Style</title>
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>
D. KESIMPULAN

Praktikum 7 CSS (List)

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum 7 CSS (List)

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM : CSS List

Hasil yang akan ditampilkan di browser:

Hasil yang akan ditampilkan di browser:

1. List Style Image

list-style-image: url(path_to_image.gif, jpg or png);

3. List Style Type

list-style: value value value;

1. Penerapan list-style-type [1]

2. Penerapan list-style-type [2]

4. Nested List tanpa bullet

 Ukuran image: 14x14 pixels

Anda mungkin juga menyukai