Scribd
Unggah
37 tayangan20 halaman

Modul Iii (CSS)

Modul ini membahas pengenalan CSS mencakup selector, komentar, dan mekanisme pembuatan perintah CSS. Modul ini juga menjelaskan penggunaan CSS untuk format gambar, layout halaman, menu navigasi, dan menu drop-down agar tampilan halaman web menjadi lebih menarik. Terdapat tugas untuk menjelaskan pengaplikasian CSS eksternal, contoh CSS Image, deskripsi CSS Layout, dan penjelasan tentang -moz-border-radius.

Diunggah oleh

Maulida
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
37 tayangan20 halaman

Modul Iii (CSS)

Modul ini membahas pengenalan CSS mencakup selector, komentar, dan mekanisme pembuatan perintah CSS. Modul ini juga menjelaskan penggunaan CSS untuk format gambar, layout halaman, menu navigasi, dan menu drop-down agar tampilan halaman web menjadi lebih menarik. Terdapat tugas untuk menjelaskan pengaplikasian CSS eksternal, contoh CSS Image, deskripsi CSS Layout, dan penjelasan tentang -moz-border-radius.

Diunggah oleh

Maulida
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

MODUL III

CSS (Cascading Style Sheet)

Tujuan:
1. Mampu menjelaskan mengenai pengenalan CSS, Selector, Komentar, dan
Mekanisme membuat perintah-perintah CSS
2. Dapat menggunakan CSS – Image untuk memformat atau membuat halaman web
tampil lebih menarik
3. Dapat menggunakan CSS – Layout untuk memformat atau mendesain halaman
web lebih dinamis tanpa menggunakan tabel sebagai layoutnya
4. Dapat mendesain menu navigasi menggunakan CSS pada halaman web agar
tampil lebih menarik
5. Dapat mendesain menu drop – down dengan hanya menggunakan CSS agar
tampil menarik

Tugas Pendahuluan:
1. Pada mekanisme pengaplikasian CSS terdapat style yang didefinisikan di file
eksternal, jelaskan maksud tersebut dan berikan contohnya!
2. Jelaskan tentang apa itu CSS Image dan berikan contohnya!
3. Apa yang anda ketahui tentang CSS Layout, Jelaskan deskripsi tentang masing-
masing atribut pada CSS Layout!
4. Jelaskan apa yang anda ketahui tentang -moz-border-radius!

1. Dasar Teori
1.1 Selector
Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style
didefinisikan bagaimana setiap selector akan bekerja (font, color dan lain-lain.). Kemudian
di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style
yang telah didefinisikan.
Jenis – jenis selector:
a. Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan dengan tag HTML,
melakukan redefinisi tag normal HTML
Syntax: SelectorHTML {Properti:Nilai;}
b. Selector Class
Digunakan untuk mendefinisikan style yang dapat dipakai tanpa melakukan
redefinisi tag HTML.
Syntax: ClassSelector {Properti:Nilai;}
c. Selector ID
Digunakan untuk mendefinisikan style yang berhubungan dengan suatu object
memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer.
Syntax: #IDSelector {Properti:Nilai;}
1.2 Mekanisme Mengaplikasikan CSS
1. Style didefinisikan dalam tag HTML (tag tunggal)
2. Style didefinisikan di dalam bagian <head> dan diaplikasikan untuk seluruh
dokumen HTML tersebut.
3. Style didefinisikan di file eksternal yang selanjutnya dapat digunakan oleh dokumen
HTML manapun dengan memasukkan CSS tersebut dalam dokumen yang
diinginkan melalui URL.
1.3 Elemen Elemen CSS
1. Font
Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai
beberapa properti. Satu properti dapat mempunyai beberapa nilai.
2. Text
Element te xt akan membuat tampilan teks menjadi lebih menarik

3. Color
Elemen color yang digunakan untuk mengatur warna teks dan background halaman
web
4. Link
Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari satu
bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs ke situs
lainnya. CSS menyediakan elemen link yang dapat digunakan untuk mengatur perilaku
link.
1.4 CSS Image
CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html. Elemen
ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai.
Tabel 1.4.1. Property dan value CSS yang mendukung format Gambar
Attribute Values
background Color
size
percentage pos-key-term url
repeat repeat-x repeat-y
no-repeat fixed
scroll
background-attachment Fixed
Scroll
background-color Color
none
background-image url
background-position Size
percentage
pos-key-term
background-repeat repeat
repeat-x
repeat-y
no-repeat
border Solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
four-sides
width-key-term
border-bottom size
color
width-key-term
border-bottom-color Color
border-bottom-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-bottom-width size
width-key-term
border-color Color
border-left size
color
width-key-term
border-left-color Color
border-left-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-left-width size
width-key-term
border-right size
color
width-key-term
border-right-color Color
border-right-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-right-width size
width-key-term
border-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
four-sides
width-key-term
border-top size
color
width-key-term
border-top-color Color
border-top-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-top-width size
width-key-term
border-width size
width-key-term
clear left
right
both
color Color
display block
inline
float Left
right

1.5 CSS Navigasi


Tabel 1.5.1. Property dan value CSS yang mendukung format Menu Navigasi
Attribute Value
list-style circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
inside
outside
url
none
list-style-image url
list-style-position inside
outside
list-style-type circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal

1.6 CSS Layout


Tabel 1.6.1. Property dan value CSS yang mendukung format Layout Halaman Web
Attribute Value
Clear Left
right
both
none
Cursor Url
auto
crosshair
default
pointer
move
e-rezise
ne-rezise
nw-rezise
n-rezise
se-rezise
sw-rezise
s-rezise
w-rezise
text
wait help
Display None
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Float Left
right
none
Position Static
relative
absolute
fixed
Visibility Visible
hiodden
collapse

1.7 CSS Drop Down


Tabel 1.7.1. Property dan value CSS yang mendukung format menu drop-down
Attribute Value
list-style circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
inside
outside
url
none
list-style-image url

list-style-position inside outside


list-style-type circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
-moz-border-radius -
Position Static
relative
absolute
fixed
2. Kegiatan Praktikum
2.1 Kegiatan Pertama (Font, Text dan Color)

Gambar 2.2.1 Percobaan Font, Text dan Color


Ketiklahlah script di atas di text-editor, kemudian simpanlah. Lalu bukalah d browser.
Perhatikanlah hasilnya! Hapuslah tanda komentar pada baris ke-6. Perhatikanlah hasilnya!
Bandingkan dengan sebelumnya! Pada baris ke-6, ubahlah kata underline menjadi none, lalu
perhatikan perubahannya!
Tambahkan script berikut pada baris ke-8 :
h3 {
background-color : #073; color : #f00;
}
Perhatikan tampilannya!
2.2 Kegiatan Kedua (CSS Image)

Gambar 2.2.1 Percobaan CSS Image


1. Ketiklah script menurut Gambar 2.2.1 pada program editor standar (spt. Notepad, dll),
lalu simpanlah dg nama css_image.html.
2. Tampilkan file css_image.html pada browser. Perhatikanlah tampilanya.
3. Pada baris 8, ubahlah value background menjadi #fff. Perhatikan perbedaan
tampilannya.
4. Sisipkan script berikut di antara baris 16 dan 17 :
background: #fff;
Perhatikan apa yang terjadi!
5. Ubahlah lagi script di atas (pada poin no.4) menjadi
background: url(images/bg-body.gif);
Perhatikan apa yang terjadi!
6. Pada baris 20, ubahlah value float menjadi right. Lalu pada baris 26, ubahlah menjadi:
margin: 0 5 px 5 px 15 px;
Perhatikan perbedaan tampilannya.
7. Ubah-ubahlah lebar dan tinggi gambar pada baris 21 dan 22; ketebalan dan warna border
gambar pada baris 23; lebar padding pada baris 24.
8. Perhatikan masing-masing perubahan tampilannya!
2.3 Kegiatan Ketiga (CSS Navigasi)

Gambar 2.3.1 Percobaan CSS Navigasi


1. Ketiklah script sesuai Gambar 2.3.1 pada program editor standar (spt. Notepad, dll),
lalu simpanlah dg nama css_navigasi.html.
2. Tampilkan file css_navigasi .html pada browser. Perhatikanlah tampilanya!
3. Pada baris 16, ubahlah value display menjadi inline. Perhatikan perubahannya!
4. Pada baris 16, ubahlah value display menjadi none. Perhatikan
perubahannya!
5. Pada baris 26, ubahlah value color menjadi yellow. Perhatikan
perubahannya!
6. Tambahkan baris berikut diantara baris ke-26 dan 27:
text-decoration: line-through;

Ubah-ubahlah ketebalan border, jenis dan warnanya padabaris 13, 18, dan 19,

demikian juga margin dan paddingnya pada baris 9 dan 10. Perhatikan
perubahannya!
2.4 Kegiatan Keempat (CSS Layout)

Gambar 2.4.1. Percobaan CSS Layout

1. Ketiklah script sesuai Gambar 2.4.1 pada program editor standar (spt.
Notepad, dll), lalu simpanlah dg nama css_layout.html.
2. Tampilkan file css_layout .html pada browser.
Perhatikanlah tampilanya!

3. Tambahkan script css berikut :


Perhatikan perbedaan tampilannya!
4. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!


5. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!


2.5 Kegiatan Kelima (CSS Dropdown)

Gambar 2.5.1. Percobaan CSS Dropdown


1. Ketiklah script sesuai Gambar 7.1 pada program editor standar (spt.
Notepad, dll), lalu simpanlah dg nama css_menu.html.
2. Tampilkan file css_menu .html pada browser. Perhatikanlah tampilanya!
3. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!


4. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!


5. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!


6. Pada style-script pada poin no.3, antara baris 10 dan 11, tambahkan sript
berikut :
-moz-border-radius: 25 px;
Perhatikan perbedaan tampilannya!

7. Ada style-script pada poin no.4, antara baris 14 dan 15, tambahkan sript
berikut :
-moz-border-radius: 25 px;
Perhatikan perbedaan tampilannya!
3. Tugas Praktikum
3.1 Soal
1. Buat halaman web yang berisikan yang memuat tentang CSS Image, CSS Navigasi, CSS
Layout dan CSS Dropdown, sesuai dengan apa yang telah dipelajari pada modul 3 ini.
Contoh tampilan adalah seperti ini:

(dilarang membuat tampilan yang sama seperti contoh)

Anda mungkin juga menyukai