Pemrograman berbasis Web dan Multimedia

1. Pemrograman berbasis Web dan Multimedia Web and Multimedia based Programming K2133

2. Cascading Style Sheet

3. Pendahuluan • Spesifikasi CSS1 dibuat tahun 1996 • CSS2 di-release tahun 1998 • CSS3 dalam pengembangan • CSS menyediakan sarana untuk mengatur (control) dan mengubah (change) tampilan (presentation) dari dokumen HTML • CSS secara teknis bukan HTML, tapi bisa dimasukkan (embedded) ke dalam dokumen HTML • Style sheet memungkinkan untuk ‘memaksakan’ (impose) gaya standar (standard style) untuk dokumen secara menyeluruh, atau bahkan beberapa sekaligus • Style ditetapkan pada suatu tag dengan nilai property-nya

4. Contoh penggunaan - before Murni HTML <table> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>Ini baris pertama</b></font> </td></tr> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>Ini baris kedua</b></font> </td></tr> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>Ini baris ketiga</b></font> </td></tr> </table>

5. Contoh penggunaan - after HTML + CSS <table> <tr><td class="subtext">Ini baris pertama</td></tr> <tr><td class="subtext">Ini baris kedua</td></tr> <tr><td class="subtext">Ini baris ketiga</td></tr> </table>

6. Kemampuan CSS • Dapat mendefinisikan tampilan di satu tempat saja daripada secara berulang-ulang • Kemudahan mengubah tampilan setelah halaman selesai dibuat • Dapat mendefinisikan tampilan seperti ukuran huruf, layout, dan atribut serupa, dengan akurasi setingkat word processor • Dapat mendefinisikan layer yang diletakkan di atas elemen lain

7. Tingkatan style sheets • Ada tiga tingkatan style sheets • Inline – ditetapkan pada tag secara khusus dan hanya berlaku untuk tag itu – ini adalah gaya yang lebih rinci (fine grain style), yang bertentangan dengan tujuan dari style sheets, yaitu gaya yang seragam • Document-level – berlaku untuk dokumen secara menyeluruh • External – bisa diberlakukan pada beberapa dokumen • Kalau ada lebih dari satu tingkatan – tingkatan yang lebih rendah yang didahulukan

8. Tingkatan style sheets(lanjutan) • Tempat deklarasi • Inline style sheets muncul di dalam tag • Document-level style sheets muncul di bagian head dari dokumen • External style sheets ada di dalam file terpisah, bisa ada di mana saja di internet Dalam bentuk file teks dengan tipe MIME text/css

9. Melinkexternal stylesheet • Desain filosopinya mudah – kita ingin memisahkan antara isi (content) dan gaya (style) • Aturan file • Harus memiliki ekstensi .css • File teks berisi aturan style dan comment • Cara melink • Tuliskan sebuah link di bagian head <link rel="stylesheet" type="text/css" href="./style.css" media="all" /> • Bisa divalidasi http://jigsaw.w3.org/css-validator/

10. Format spesifikasi style • Inline • Ditulis pada tag dalam nilai dari attribut style • Contohstyle="property1: value1; property2: value2; …" • Document-level • Ditulis di dalam tag <style> dengan attribut style diisi nilai "text/css" dan menggunakan HTML comment • Contoh<style type="text/css"> <!—-rule list --></style>

11. Format spesifikasi style(lanjutan) • External stylesheet • Berisi daftar aturan yang ditulis di dalam tag <style> seperti halnya document-level hanya tanpa atribut type • Contoh<style type = "text/css" > @import url("./style.css"); h1 {color: gray;}</style> • Di dalam <style> bisa diperintahkan untuk mengimpor external stylesheet (contoh lihat atas) • Bentuk aturan: selector {list of property/values}

12. Mengapa disebut cascading? “One can include (import) several style sheets within an xhtml document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion.”

13. Aturan-aturan dalam CSS • Struktur dokumen • Dokumen HTML memiliki struktur dokumen berbentuk tree/hierarchical • CSS memungkinkan untuk menentukan style terhadap struktur tersebut secara bersamaan • Nilai dan satuan • Warna bisa ditulis dengan nama atau nilai rgb • Panjang bisa menggunakan satuan in, cm, mm, pt, pc (absolute) atau em, ex, px (relative)

14. Aturan-aturan dalam CSS • Font • Ada lima generic font families: serif, sans-serif, monospace, cursive, fantasy – akhiri dengan generic • Contoh:h1 { font-family: Times, 'Times New Roman', Georgia, serif; } • Basic visual formatting • Element box • Colors • Background images • Positioning

15. Jenis-jenis selector • Simple – nama tag dalam dokumen HTML • Class selector – untuk menetapkan style yang berbeda pada tag yang sama • Contoh style: p.narrow { … } • Contoh penggunaan: <p class="narrow">…</p> • Generic selector – untuk menetapkan style yang sama pada tag yang berbeda • Contoh style: .really-big { … } • Contoh penggunaan: <h1 class="really-big">…</h1> <p class="really-big">…</p>

16. Jenis-jenis selector (lanjutan) • Id selector – untuk menetapkan style pada suatu elemen dalam dokumen • Contoh style: #section14 { … } • Contoh penggunaan: <h2 id="section14">…</h2> • Pseudo classes – style untuk behavior • Contoh: hover, focus, dll.

17. <span> dan <div> • Contoh <span> <p>Now is the <span class="bigred"> best time </span> ever!</p> • Penggunaan <div> • Untuk membuat suatu sesi atau divisi dalam dokumen HTML di mana style akan ditetapkan • <div> berbentuk kotak, di mana posisinya bisa relatif atau absolut

18. Konflik dalam resolusi style • Menurut tingkatan style • Inline-style didahulukan daripada document-level • Document-level didahulukan daripada external-level • Dalam satu tingkatan style • Style sheets bisa mempunyai sumber berbeda • Pembuat dokumen bisa menentukan style • Pengguna, via setting browser, bisa menentukan style