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 liMenu A li
liMenu B li liMenu C li
ul Hasil yang akan ditampilkan di browser:
Menu A
Menu B
Menu C
ol liMenu A li
liMenu B li liMenu 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: urlpath_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 headtitlePenerapan list-style-type [1]titlehead
body style=color:99FF33; background-color:888888; ol
liHTMLli liCSSli
liJavascriptli ol
ul liHTMLli
liCSSli liJavascriptli
ul ul style=list-style-type:armenian
liHTMLli liCSSli
liJavascriptli ul
body html
html headtitlePenerapan list-style-type [2]titlehead
body style=color:0033FF; background-color:CCFFCC h2list-style-type values:h2
ul style=list-style-type:none linoneli
linoneli ul
ul style=list-style-type:disc lidiscli
lidiscli ul
5
ul style=list-style-type:circle licircleli
licircleli ul
ul style=list-style-type:square lisquareli
lisquareli ul
ul style=list-style-type:decimal-leading-zero lidecimal-leading-zeroli
lidecimal-leading-zeroli ul
ul style=list-style-type:lower-roman lilower-romanli
lilower-romanli ul
ul style=list-style-type:upper-roman liupper-romanli
liupper-romanli ul
ul style=list-style-type:lower-alpa lilower-alpali
lilower-alpali ul
ul style=list-style-type:upper-alpa liupper-alpali
liupper-alpali ul
ul style=list-style-type:lower-greek lilower-greekli
lilower-greekli ul
ul style=list-style-type:lower-latin lilower-latinli
lilower-latinli ul
ul style=list-style-type:upper-latin liupper-latinli
liupper-latinli ul
ul style=list-style-type:hebrew lihebrewli
lihebrewli ul
6
3.
Penerapan list-style-position
ul style=list-style-type:armenian liarmenianli
liarmenianli ul
ul style=list-style-type:georgian ligeorgianli
ligeorgianli ul
ul style=list-style-type:cjk-ideographic licjk-ideographicli
licjk-ideographicli ul
ul style=list-style-type:hiragana lihiraganali
lihiraganali ul
ul style=list-style-type:katakana likatakanali
likatakanali ul
ul style=list-style-type:hiragana-iroha lihiragana-irohali
lihiragana-irohali ul
body html
html headtitlelist-style-positiontitlehead
style type=textcss ul.in{
list-style-position:inside; }
ul.out{ list-style-position:outside;
} style
body style=background:DDDDDD h2 style=font-style:italic; color:003366List-style-position:h2
ul class=in liinsideli
liinsideli ul
7
4. Nested List tanpa bullet
