Modul Praktikum CSS – Cara Cerdas Belajar CSS

Loading....

Loading....

Loading....

Loading....

Loading....

Teks penuh

(1)

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:

(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:

(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:

(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>

(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>

(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>

(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>

(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>

Figur

Memperbarui...

Referensi

Memperbarui...