Solusi Hebat Mempercantik Halaman Web
Cascading Style Sheets(CSS) adalah sebuah document yang digunakan untuk menangani pengaturan halaman web. Doucument ini tidak dapat disebut sebagai bahasa pemrograman, melainkan sebuah desain berbasiskan Scripting yang embeded pada tag HTML. Jadi, CSS merupakan sebuah pengembangan document yang dapat melalukan dukungan terhadap HTML dalam desain web.
CSS memiliki kemampuan yang sangat hebat. Bayangkan dengan menggunakan satu halaman document CSS Kita dapat melakukan pengontrolan desain pada semua halaman web yang ada pada portal yang Kita miliki. Fungsi inilah yang mengakibatkan document CSS juga sering digunakan sebagai pendukung Document Template.
Kemampuan lain yang dimiliki CSS adalah dapat menciptakan fungsi-fungsi yang dikolaburasikan dengan JavaScript, sehingga semua bentuk animasi ataupun Event yang dilakalukan oleh JavaScript dapat dipadukan dengan desain CSS.
Selain itu CSS juga dapat menggantikan fungsi tabel, hal tersebut sangat bermanfaat bagi Kita yang hendak mengembangkan sehuah sistem informasi maupun sistem komputerisasi yang menuntut kecepatan dan keindahan desain yang dapat selalu berubah tanpa harus merombak semua sistem yang telah berjalan.
Jadi, dengan menggunakan satu halaman Document CSS Kita dapat melakukan pengaturan terhadap semua halaman web yang ada. Sehingga apabila Kita ingin melakukan perubahan desain maka Kita tidak perlu untuk membuka semua halaman web yang ada, melainkan hanya perlu merubah satu halaman Document CSS saja.
DAFTAR ISI
Kata Pengantar
Daftar Isi
Bab .1 Mengenal CSS dan CSS2 ……….………….…….... 1
1.1 Mengenal CSS2 ………….………….………….……….…..... 1
1.2 Keuntungan menggunakan CSS2 ………….………….……..... 1
1.3 Style Sheet yang Pertama …………….………….…………..... 2
1.4 Cara menggunakan CSS2 ………….………….………...…...... 4
1.4.1. External Style Sheet ………….………….………….…...... 4
1.4.2. Internal Style Sheet ……….………….………….…......…. 6
1.4.3. Inline Style Sheet ………….………….………….……...... 8
Bab .2 Aturan Penulisan dan Type data pada CSS …..... 11
2.1. Aturan Penulisan …………….………….………….……….... 11
2.1.1. Tokenisasi ………….………….………….……………... 11
2.1.2. Kata Kunci sebagai Nilai atau
2.1.3. Penggunaan Karakter dan Huruf ……….………….……... 14
2.1.4. Aturan Penggunaan Ad (@ ) /
2.1.5. Penglompokan ………….………….………….……..…... 15
2.1.6. Aturan mendeklarasikan Penglompokan ……………….... 16
2.1.7. Aturan dalam membuat deklarasi …………….………....... 18
2.1.8. Komentar …………….………….………….………….... 19
2.1.9. Kesalahan dalam penulisan CSS ……….……………….... 20
2.2. Nillai (Value) yang digunakan dalam Statetment …………....... 22
2.2.1 Bilangan bulat dan pecahan ……….…….……………..… 22
2.2.2 Nilai yang berkaitan dengan Panjang Object/
2.2.3 Nilai bersifat Persentase /
2.2.4 Penggunaan URL /
2.2.5 Nilai Pewarnaan /
2.2.6 Ukuran yang berhubungan dengan Sudut /
2.2.7 Ukuran yang berhubungan dengan Waktu /
2.2.8 Frequencies ………….………….………….…..……....... 28
2.2.9 Karakter / String ……….………….………….………...... 28
Bab .3 Selector Sebagai Pengontrol Desain ……….……... 29
3.1 Mengenal Selector ………….………….…….…….………....... 29
3.2 Grouping ………….………….………….………….………... 33
3.3 Jenis-Jenis Selector ……….………….…………..………….... 34
3.3.1. Selector Bebas ……….………….………….….……….... 34
8.4.1. Selector Class (Selector dengan Kelas) ………………....... 35
8.4.2. Id Selector …………….………….………….………....... 39
3.3.2. Universal Selector ……….………….………….………... 43
8.4.3. Descendant Selectors ………….………….……….…....... 43
Bab .4 Memformat halaman Web …….........................…... 47
4.1 Pendahuluan ………….............………….………….…...…....... 47
4.1.1 Penentuan Margin Halaman ………….…………...……... 47
4.1.2 Margin pada komponen Lain ……….…………..…....…... 50
4.2 Pemetaan menggunakan Padding ………….…………….…........ 52
4.3 Dimensi pada Halaman Web ………….………….…………...... 54
4.3.1. Dimensi Gambar …………….………….………….….... 55
4.3.2. Dimensi Pada Paragraph ………….………….…...…....... 57
Bab .5 Halaman Web lebih menarik dengan Background 61
5.1 Pendahuluan ……….………….………….…………..……... 61
5.2 Pengaturan Warna …………….………….…………..…….... 62
5.3 Pengaturan Background Halaman ………….………………... 64
5.3.1. Background dengan Warna ………….………………….. 65
5.3.2. Background dengan Gambar …………….………….......... 68
8.4.4. Pengulangan Gambar Background ……….………..…...... 71
5.3.3. Mengatur Posisi Background …………….……….…........ 75
5.3.4. Kondisi Pemaasngan Background ………….……...…....... 78
Bab .6 Memformat Text pada Content Web ……………. .. 83
6.1 Pendahuluan ……….………….………….………………….... 83
6.2 Pengaturan Text dan Paragraph …………….………….…….... 83
6.2.1 Pengaturan Warna pada Text ………………….………. 84
6.2.2 Pengaturan Spasi …………….………….………….…. 86
6.2.3 Perataan Text ……….………….………….…………. 88
6.2.4 Pengaturan Bentuk Text ……….………….……….…. 90
6.2.5 Pengaturan Text Identasi ……….………….…………. 93
6.2.6 Pengubahan Bentuk Karakter ……….………….……. 95
6.2.7 Peregangan/Spasi per Kata ………….…….……….…. 98
6.2.8 Pengatuaran Text Yang lain ………….………………. 100
Bab .7 Pengaturan Bentuk Font ………….……...........…. 103
7.1 Pengenalan ………….………….………….……………...…. 103
7.2 Pengaturan Bentuk ……….………….………….……...……. 103
7.2.1 Pengaturan Jenis Font …………….………….………...... 104
7.2.2 Menentukan Ukuran Huruf ………….………….….….... 107
7.2.3 Pengaturan Gaya pada Font ………….………….……..... 110
7.2.4 Ketabalan Huruf ………….………….………….……..... 112
7.2.5 Pengaturan Bentuk lainya ……….……………………..... 115
7.2.6 Contoh Kolaborasi dengan beberapa bentuk Font ….…..... 117
7.2.7 Contoh –Contoh Format Font dan Nilainya ………...….... 119
Bab .8 Format Halaman menggunakan Border …......,…. 121
8.1 Pendahuluan …………….………….………….……………..... 121
8.2 Menggunakan Border ………….………….………….…...….... 122
8.3 Style Pada Border ………….………….………….…………..... 124
8.3.1 Mengganti Border Style Atas …………….…………........ 127
8.3.2 Mengganti Style kanan,bawah dan kiri ……….………..... 129
8.4 Warna Pada Border ………….………….………….……..…..... 131
8.4.5. Mengganti warna setiap sisi border …………….……....... 135
8.5 Mengubah Ukuran Border…………….………….…………...... 137
8.5.1. Pengubahan Lebar pada sisi Border ……….…………... 139
Bab .9 Membuat List/Daftar Lebih Menarik ….....…..... 143
9.1 Pendahuluan ………….………….………….………………. 143
9.2 Pengaturan pada Ordered List ………….………….……...…. 144
9.3 Pengaturan pada Unordered List ……….………….…...……. 151
9.4 Peletakan Posisi Dafatar ………….………….………………. 154
9.5 Memformat Daftar degan Warna dan Background ……….…. 159
9.6 Simbol Daftar dengan Gambar ……….………….……..……. 160
Bab .10 Pengaturan Tabel dan Pewarnaanya …….….. 165
10.1 Pendahuluan ………….………….………….………………. 165
10.2 Pengaturan Pading Tabel ………….………….…………...…. 165
10.2.1 Pengaturan Padding atas pada Tabel ……….…………. 165
10.2.2 Pengaturan padding kanan tabel …………….……….... 169
10.2.3 Pengaturan Padding bawah tabel ………….……..……. 171
10.2.4 Pengaturan padding kiri pada tabel ……….……….….. 173
10.3 Latihan Pengaturan pada Tabel Spesifikasi Komputer …….…. 175
10.1. Menciptakan Tabel ……….………….………….…....…. 176
10.2. Memberi Border pada Bagian Header ….…….…...….…. 178
10.3. Memberi Border pada bagian Body ………….………...... 180
10.4. Memberi Efect pada Cell Windows ………….…....…….. 182
10.4 Latihan Pengaturan pada Tabel Jadwal belajar ……….…...…. 185
10.4.1. Membuat tabel Jadwal ………….…….…………....…. 185
10.4.2. Memberi Border pada Cell Isi ………….…………..…. 189
10.4.3. Menyeleksi Isi tabel denan Bentuk yang berbeda ……... 191
10.4.4. Menampikan Semua Cell yang kosong …………….…. 194
10.4.5. Membedakan Setiap Bagian Tabel dengan Border ……. 196
10.4.6. Memberi warna yang berbeda pada setiap Kolom ….…. 199
Bab .11 Membuat Formulir Cantik .................................…. 205
11.1. Pendahuluan ……….………….………….…………………. 205
11.2. Mengenal Form dalam web ……….………….………...……. 206
11.3. Pengaturan dengan CSS ………….………….………………. 207
11.4. Pengaturan Komponen –Komponen Form………….……..…. 207
11.5. Pengaturan pada Text Field ………….………….………...…. 207
11.5.1. Memberi warna Background ………….……..……..…. 207
11.5.2. Pengaturan Textfield menjadi Flat ……….……....……. 110
11.5.3. Membuat Textfield seperti pada Formulir kertas …...…. 112
11.6. Pengaturan pada Komponen Button /Tombol ………………... 214
16.6.1. Menciptakan Tombol berwarna ………….………...…. 216
16.6.2. Membuat Tombol Flat berwarna ………….……….…. 218
11.7. Pengaturan pada Radio Button ……….………….……..……. 221
11.7.1. Pewarnaan pada Radio Button ……….………….……. 222
11.7.2. Memberi Border pada Pilihan Radio Button …….……. 224
11.8. Pengaturan pada Check Box ……….………….……….……. 227
11.9. Pengaturan pada List Box ………….………….………….…. 230
11.9.1. Pewarnaan Pada List Box ………….…………………. 230
11.9.2. Pewarnaan pada Setiap Option…………….…….…….. 232
11.10. Pengaturan pada Komponen Text Area ……….………….….. 237
11.10.1. Pewarnaan pada Text Area…………….…………...….. 238
11.10.2. Pewarnaan Scroll pada Text Area………….….........….. 240
11.10.3. Menghilangkan Scroll Bar pada Text Area ………...….. 242
11.10.4. Memberi Background Gambar pada Komponen Form ... 244
Bab .12 Membuat Hyperling dan Tombol yang menarik . 247
12.1. Pendahuluan ………….………….………….….……….... 247
12.2. Pengaturan Hyperlink ……….…..….………….…….…..... 247
12.2.1. Hyperlink berganti bacground saat di lewati Mouse ....... 252
12.2.2. Pergantian Jenis Font saat dilewati Mouse ……………. 254
12.3. Pengaturan Tombol ………….………….………….……..…. 260
12.4. Hyperlink Menggunakan List / Daftar ……….………………. 266
12.5. Membuat Tombol Visual …….......……….………….………. 270
12.5.1. Tombol 3 Dimensi 1 …………….………….……....….... 270
12.5.2. Membuat Tombol Visual 2 ……….……………..…....…. 274
12.5.3. Isi tombol di tampilkan dalam satu halaman …………...... 277
Bab .13 Penggunaan CSS dengan JavaScript ……….......... 283
13.1 Pendahuluan …………...…………...…………...………….…….. 283
13.2 Fungsi JavaScript …………...…………...…………...…………... 283
13.3 Kejadian pada Mouse dengan In Line Style …………...………... 285
13.3.1 Menggunakan Kejadian OnMouseOver ………….…… 286
13.3.2 Menggunakan Kejadian OnMouseOut ………….…….. 287
13.3.3 Menggunakan Kejadian OnMouseDown ………….….. 289
13.3.4 Menggunakan Kejadian OnMouseUP ………….…….... 290
13.4 Kejadian pada Mouse dengan Internal Style …………...……….. 291
Bab .14 Desain Web Tanpa Tabel …………...………........ 295
14.1 Pendahuluan …………...………................................................. 295
14.2 Pengaturan dan Penempatan Content …………...……......….. 297
14.3 Membuat Kolom Koran …………...……...........................….. 301
Bab .15 Tips dan Trik ……….………….……………......…. 308
13.1. Menghilangkan Garis bawah pada Link ………….……..….... 308
13.2. Efect Stabilo ………….………….………….………….…..... 309
13.3. Membuat Scrollbar Berwarna ……….………….…………..... 310
13.4. Membuat Gambar Statis pada Background ……….…….…..... 313
13.5. Format Tabel dengan Frame …………….………….……....... 315
13.6. Pointer Mouse ……….………….………….………...…….... 319
Lampiran 1, Propertie yang digunakan pada CSS dan CSS2 .
Lampiran 2, Symbol dan Karakter Khusus ………….……….
Lampiran 3, Warna Dasar dan Warna Campuran ….......…….
Tidak ada komentar:
Posting Komentar