1. Disusun oleh : AHMAD AFANDI - 1210651245 Universitas Muhammadiyah Jember 2014 PEMROGRAMAN BERBASIS WEB CSS (Cascading Style Sheets)

2. AHMAD AFANDI 1 Pemrograman Berbasis WEb CSS 1. Maksud Modul ini membahas bagaimana membuat tampilan web menggunakan CSS. 2. Tujuan a. Kita dapat menyesuaikan tampilan web dengan Script CSS. b. Kita dapat memahami tag / penulisan Script CSS 3. Dasar Teori CSS adalah singkatan dari Cascading Style Sheets. CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan. CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. 4. Tools Disini telah disiapkan sebuah tampilan web, tinggal bagaimana cara kita mengatur tampilan dan menyesuaikan dengan yang diharakan. File yang ada didalamnya : Kemudian kita buka file php, yaitu index.php dengan editor apa saja yang menurut anda itu nyaman dalam mengkode. 3. AHMAD AFANDI 2 Pemrograman Berbasis WEb 4. AHMAD AFANDI 3 Pemrograman Berbasis WEb Dari tampilan web tersebut ada beberapa pembahasan cara merubah tampilan tersebut melalui script diatas, yaitu 1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraph pertama) 2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor , warna teks dan background-nya berubah. 3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda 4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman. 5. AHMAD AFANDI 4 Pemrograman Berbasis WEb Pembahasan 1. Menyesuaikan teks pada paragraf pertama Untuk merubah tampilannya buka script, Pada script nomor 1 untuk membuat id dimana padding atau jarak atas, kiri, kanan, dan bawah dengan 10px. Untuk id nomor 2 untuk mengatur format penulisan paragraf. Dengan penyesuaian : warna hitam, ukuran teks 11px model teks Candara, Arial, Tahoma, jarak bawah 5px. Untuk menyesuaikan dengan paragraf pertama, tambahkan tag ,ul setelah p. 6. AHMAD AFANDI 5 Pemrograman Berbasis WEb Maka hasilnya: 2. Membuat menu menjadi sebuah link. Pada script css ada fungsi untuk mengatur menu link. 1. #menu : untuk membuat background menggunakan gambar bg-nav.jpg dengan perulangan horisontal sesuai tinggi(height) dan lebar(width). 2. #menu table : membuat table tanpa border. 3. #menu a : tag a yaitu anchor untuk mengatur teks link. 4. #menu a:hover : (hover) untuk mengatur fungsi link setelah disorot oleh kursor. 5. #menu td : mengatur teks pada kolom menu. 7. AHMAD AFANDI 6 Pemrograman Berbasis WEb Untuk membuat link pada menu navigasi kita buka script : Tambahkan tag anchor dan penutup anchor pada menu-menu yang akan dijadikan sebuah link. Hasilnya bisa lihat pada tampilan web. 8. AHMAD AFANDI 7 Pemrograman Berbasis WEb 3. Menambahkan Konten pada sidebar sebelah kanan. Tambahkan kode CSS didalam tag Penjelasan : 1. Membuat id #menu-sidebar yang akan mengatur pada kolom sebelah kanan. 2. Membuat class judul : digunakan untuk membuat Tampilan Judul. 3. Membuat id #li-judul a, dan #li-judul a:hover digunakan untuk mengatur aksi pada link. 4. #li-sub : membuat tampilan awal dengan ukuran 14px. 5. #li-sub a dan #li-sub a:hover untuk mengatur aksi pada link. (pada submenu) 6. Untuk mengatur semua anchor /link pada semua halaman. Karena buan termasuk id(#) atau class(.) 9. AHMAD AFANDI 8 Pemrograman Berbasis WEb Contoh : Hasilnya : 10. AHMAD AFANDI 9 Pemrograman Berbasis WEb 4. Membuat Teks Judul pada Header Tambahkan kode CSS didalam tag Code diatas digunakan untuk membuat fungsi id header. Yaitu padding/jarak, Ukuran teks, warna teks, teks bercetak tebal, tinggi background, lebar background, dan kemudian background menggunakan image header.jpg. Kemudian ganti script header yang pertama Menjadi Script header seperti dibawah ini Maka hasilnya tampak seperti gambar dibawah ini 11. AHMAD AFANDI 10 Pemrograman Berbasis WEb Kesimpulan : Dari beberapa percobaan diatas, banyak sekali cara yang dapat digunakan dalam membuat tampilan / mengatur tampilan dari tataletak, posisi, ukuran, warna, model teks, dll menggunakan CSS. Bahwasanya dalam mengkode, tiap orang itu berbeda, tergantung bagaimana alur logika dari masing-masing orang itu menggunakan. Seperti yang saya gunakan, bisa saja itu adalah cara yang paling mudah menurut saya. Dan bisa jadi pula menurut orang itu masih terlalu susah. Jadi, tergantung bagaimana logika kita.