PRAKTIKUM NAMA KELAS TANGGAL PRAKTIKUM
: : : :
CSS List ___________________________________ ___________________________________ ___________________________________
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:
digunakan untuk list yang tidak berurutan (unordered list) kemudian, digunakan untuk list yang berurutan kemudian diikuti - adalah list menu yang akan ditampilkan (list item). Untuk lebih jelasnya perhatikan contoh berikut ini: Hasil yang akan ditampilkan di browser:
Menu A Menu B Menu C
- Menu A
- Menu B
- Menu C
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] Penerapan list-style-type [1] - HTML
- CSS
- Javascript
2.
Penerapan list-style-type [2] Penerapan list-style-type [2] list-style-type values:
4
- decimal-leading-zero
- decimal-leading-zero
5
- cjk-ideographic
- cjk-ideographic
- hiragana-iroha
- hiragana-iroha
3. Penerapan list-style-position list-style-position <style type="text/css"> ul.in{ list-style-position:inside; } ul.out{ list-style-position:outside; } List-style-position:
6
4. Nested List tanpa bullet Nested list tanpa bullet <style type="text/css"> #navcontainer ul{ list-style-type: none; color:purple; font-weight:bold; font-style:italic; }
7
5. Penerapan list-style-image Penerapan list-style-image <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; } - blue arrow
- blue arrow
- blue arrow
- blue arrow
- brown arrow
- brown arrow
- brown arrow
- brown arrow
Note:
Ukuran image: 14x14 pixels Lokasi File : /images
8
6. Penerapan list-style List-Style <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; } Today's Menus:
- Nasi Goreng Kambing
- Nasi Goreng Omelet
- Nasi Goreng Sosis
- Nasi Goreng Pedas
- Nasi Goreng Ayam
- Nasi Goreng Jamur
- Es Campur
- Es Cingcau
- Es Kelapa Muda
- Bandrek
- Bajigur
D. KESIMPULAN
9
