• Tidak ada hasil yang ditemukan

Modul Praktikum CSS – Cara Cerdas Belajar CSS

N/A
N/A
Info
Unduh - Bebas
Protected

Academic year: 2017

Membagikan " Modul Praktikum CSS – Cara Cerdas Belajar CSS"

Copied!
9
0
0

Memuat.... (Lihat teks lengkap sekarang)

Unduh sekarang ( 9 Halaman )

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>

Referensi

Unduh sekarang ( PDF - 9 Halaman - 169.85 KB )

Garis besar

Modul Praktikum CSS – Cara Cerdas Belajar CSS

Dokumen terkait

PENGARUH MODAL INTELEKTUAL DAN PENGUNGKAPAN MODAL INTELEKTUAL TERHADAP NILAI DAN KINERJA PERUSAHAAN

[r]

PERAN LAYANAN INFORMASI DALAM MEMANTAPKAN PEMINATAN JURUSAN DI SEKOLAH MENENGAH KEJURUAN PERSATUAN GURU REPUBLIK INDONESIA 6 SURABAYA.

Kata Kunci : Layanan Informasi, Memantapkan peminatan jurusan di SMK Saat ini banyak siswa yang melanjutkan pendidikan tidak berdasarkan minat dan bakat peserta didik. Hal

PENGARUH MODAL INTELEKTUAL TERHADAP KINERJA KEUANGAN PERUSAHAAN PERBANKAN DI INDONESIA

[r]

APA ITU RUANG TERBUKA HIJAU APAKAH RUANG

Nenek moyang manusia dari dulu telah memanfaatkan alam untuk bertahan hidup ataupun berlindung dari hal-hal yang buruk, dari alam juga kita dapat memperoleh bahan makanan

Analisis Kebutuhan Pendidikan Seks bagi Siswa SMA Negeri 1 Sidoarjo - Ubaya Repository

Hasil dari penelitian ini adalah para siswa membutuhkan materi mengenai aplikasi penyelesaian masalah dan pemberian tips mengenai pendidikan seks, menggunakan metode

POLITIK HUKUM PEMBENTUKAN PERATURAN PERU

Polit ik perat uran perundang-undangan yang t erencana dan t erarah mempunyai peran pent ing dan st rat egis sebagai salah sat u w ujud pembangunan subst ansi hukum (legal subst

PAKET 122 LELANG ULANG

Demikian pengumuman pemenang lelang ini disampaikan, apabila ada peserta yang keberatan atas penetapan pemenang ini, dapat menyampaikan sanggahan secara tertulis kepada Kelompok

UNDANGAN PEMBUKTIAN KUALIFIKASI 10

Dokumen kualifikasi perusahaan asli yang diupload atau dokumen yang dilegalisir oleh pihak yang berwenang dan menyerahkan 1 (satu) rangkap rekaman (foto copy).

Image