- . MODUL PERTEMUAN 5 CSS PEMROGRAMAN BERBASIS WEB LAPORAN CSS DIBUAT OLEH : NAMA : ACHMAD NUR FADILLAH NIM : 1210651001 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
- 2. MODUL CSS Definisi CSS : Apa itu CSS ? CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup laguage). Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID. CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web. CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS. Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.
- 3. Sintaks CSS : Terdiri dari beberapa set peraturan yang memiliki : selector, property, value. selector {property: value;} Selector menunjukkan bagian mana yang hendak diatur/diformat. Property bagian dari selector yang hendak diatur. Value adalah nilai dari pengaturannya Contoh sintaks CSS: h1 {color: red;} Keterangan: Selector: h1 Property: color Value: red Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah). Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan pemisah koma. Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna merah, maka CSSnya menjadi: h1, h2, h3 {color: red;} Untuk mengatur lebih dari satu property gunakan pemisah titik koma ( ; ) Contoh: h1, h2, h3 { color: red; font-family: arial; font-size: 150%; }
- 4. Tugas : Editlah template web ini dengan CSS : Langkah – langkah : Disini saya menggunakan teks editor Sublime Text 2 Bagian yang harus diedit adalah : Deskripsi tulisan susu disetarakan dengan font penjelasan kandungan susu. Bila kursor diarahkan ke link menu, maka background menu akan berubah menjadi warna putih. Hiaslah dengan kreasi css Isi bagian- bagian web yang kosong / tambahkan beberapa sentuhan agar hiasan web terisi dengan baik.
- 5. Jawab : 1.) Deskripsi font web susu yang telah di edit : Script yang telah di edit :
- 6. 2.) Halaman link menu edit : Script link menu : 3.) Efek 3D pada tulisan ayo minum susu Script :
- 7. 4.) Isi bagian web yang kosong Konten sebelah kanan footer
- 8. Script konten :
- 9. Tampilan template web setelah di edit secara keseluruhan : Demikian pengerjaan tugas ini, mohon maaf bila ada kekurangan dalam pengerjaan seperti gambar yang tak menyatu dan lain-lain.
