MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan, dan untuk memenuhi tujuan dasar praktikum Web ini yaitu mampu membangun situs yang memanfaatkan DHTML. Untuk keperluan tersebut, yang akan dilatihkan pertama kali adalah penggunaan style sheet/CSS. CSS tidak hanya dapat membuat tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman web menjadi jauh lebih efisien karena menghilangkan semua kesulitan yang muncul pada halaman web biasa tanpa style. Referensi CSS lebih lengkap dapat dilihat pada materi perkuliahan.
TUJUAN Dikarenakan CSS merupakan salah satu elemen pendukung untuk mengimplementasikan DHTML pada sebuah situs Web, maka tujuan sesi ini adalah mengenalkan dan membiasakan Anda pada standar metode pembentukan tampilan pada halaman Web, dan kemudian agar Anda memiliki pengetahuan serta menguasai penggunaan CSS sebagai salah satu komponen utama dari situs Web yang Anda buat.
SINTAKS Tag
Kegunaan
<style>
Mendefinisikan style dalam sebuah dokumen
Menutup definisi style dalam dokumen
Properti
Deskripsi
Nilai
background
Perintah untuk mengatur semua properti latar belakang dalam suatu deklarasi
background-color background-image background-repeat background-attachment background-position
font
Perintah untuk mengatur semua properti font dalam suatu deklarasi
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
border
Perintah untuk mengatur semua properti border dalam suatu deklarasi
border-width border-style border-color
margin
Perintah untuk mengatur semua properti margin dalam suatu deklarasi
margin-top margin-right margin-bottom margin-left
padding
Perintah untuk mengatur semua properti padding dalam suatu deklarasi
padding-top padding-right padding-bottom
padding-left list-style
Perintah untuk mengatur semua properti list dalam suatu deklarasi
list-style-type list-style-position list-style-image
MATERI LATIHAN Bagian ini mencakup penggunaan CSS untuk mengubah tampilan standar pada halaman web Anda. Tidak semua tag style digunakan disini karena jumlahnya sangat banyak, silakan Anda cari referensi lain sebagai tambahan untuk mempelajari CSS. Seperti biasa, simpan file-file Anda dalam folder Anda sendiri, kemudian cobalah langsung untuk melihat hasil setiap contoh, lalu ubahlah isinya untuk melihat variasi tampilannya yang memungkinkan. Perhatikan bahwa semua contoh disini menggunakan CSS internal, silakan Anda berlatih untuk mengubahnya menjadi CSS eksternal. Gunakan sembarang gambar yang dapat Anda temui untuk contoh yang memerlukan gambar (sesuaikan dulu dengan nama file dalam contoh). Referensi dasar mengenai sintaks dapat dilihat pada materi perkuliahan Web 1, sedangkan referensi atribut serta nilai properti dapat dilihat pada lampiran materi tersebut. 1. Pengaturan latar belakang <style type="text/css"> body { background-color: #00ff00; background-image: url("gambar.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center center }
Catatan: Properti background-attachment dan background-position tidak bisa digunakan dalam browser Netscape 4.0.
Ada teks disini
Tuliskan sekehendak kalian
Terserah apa saja
Yang penting ada tulisannya
2. Penanganan teks & font <style type="text/css"> p.normal {font-weight: normal} p.tebal {font-weight: bold} p.teballl {font-weight: 900} p.lengkap {font: italic small-caps 900 12px arial} h2 { color: #dda0dd; text-align: center; text-decoration: overline }
p.berwarna { color: rgb(0,0,255); text-indent: 1cm } p.kecil { text-transform: lowercase; font-family: times; font-style: italic } p.besar { text-transform: uppercase; font-family: courier; font-style: oblique; font-size: 150% } p.depan { text-transform: capitalize; font-variant: small-caps}
Perhatikan paragraf ini
Bandingkan dengan paragraf diatasnya
Bandingkan yang ini juga
Paragraf dengan semua atribut font dimasukkan
Ini header 2 berwarna, di tengah, dan bergaris atas
Sedangkan ini paragraf dengan teks diwarnai, indentasi 1 cm
Perhatikan paragraf ini baik-baik
Perhatikan juga paragraf ini dengan baik
Kemudian, apa bedanya dengan paragraf ini? 3. Pembuatan border
<style type="text/css"> p.borderous { border-style: double; border-width: 5px 10px 1px medium; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) }
Catatan: Properti "border-color" dan "border-width" tidak dikenali oleh browser Internet Explorer bila digunakan secara langsung. Gunakan properti "border-style" untuk menyiapkan border dalam Internet Explorer.
Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 - 5.0 tidak mendukung nilai "dotted" dan "dashed"
4. Pengaturan margin <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 80px}
Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.
Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window browser agar terlihat lebih jelas perbedaannya.
This is a paragraph
5. Mengatur padding pada sel tabel <style type="text/css"> td {padding: 1.5cm} td.value2 {padding: 0.5cm 2.5cm}
| Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap sisinya (1,5cm). |
| Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki nilai 0,5cm, sedangkan padding kanan dan kiri nilainya 2,5cm. |
6. Menggunakan list <style type="text/css"> ul { list-style: square outside url("gambarkecil.gif") }
Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list. Properti outside akan menyebabkan list menjadi lebih rapi bila terdiri atas item yang berupa kalimat panjang dan window browser berukuran kecil.
7. Elemen latar depan dan latar belakang
