Minggu …8… Page 1 MINGGU Ke delapan Web Teknologi 2 Pokok Bahasan: CSS and Themes Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan dan mengaplikasikan CSS dan Themes pada ASP.NET Referensi:  Microsoft ASP.NET dengan VB 2005, Bab 3

Minggu …8… Page 2 Agenda Pengantar CSS Sintaks Style Penerapan CSS dalam halaman Web Membuat StyleSheet Menggunakan dan membuat Themes Menerapkan Theme Mendesain Theme Sendiri

Minggu …8… Page 3 Pengantar CSS CSS (cascading style sheet)??? –Bahasa style sheet yang digunakan untuk meng- attach style seperti font, spasi dan pengaturan halaman) ke dokumen terstruktur seperti dokumen Html dan aplikasi XML. –Dapat digunakan untuk mendefinisikan look and feel/ tampilan spesifik dari situs web anda. –Mendefinisikan bagaimana tiap-tiap tipe elemen halaman akan terlihat. –Membuat definisi untuk style spesifik yang dapat anda pilih untuk diterapkan ke elemen spesifik dari halaman.

Minggu …8… Page 4 Sintaks CSS 3 dasar penyusun file CSS : Elemen, Class, Id. Mendefinisikan semua elemen Html khusus dalam situs web anda. Contohnya jika anda menginginkan semua paragraf dalam dokumen HTML dengan tag pada kode memiliki perataan teks kiri-kanan (justify), anda dapat menulis kode CSS sebagai berikut: –P {Text-align: justify;}

Minggu …8… Page 5 Elemen Perintah CSS terdiri dari dua bagian utama yaitu: –Selector adalah nilai yang menetapkan bagaimana browser memilih definisi pemformatan khusus yang diatur dalam halaman web. Selector pada contoh adalah p. –Declaration adalah satu atau beberapa properti dan nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Contoh: text-align : justify. Declaration ditandai dengan kurung kurawal, dan properti dan nilai css yang berbeda dipisahkan satu dengan yang lain menggunakan titik koma (;). Declaration terdiri dari dua bagian utama yaitu: –Property (text-align) adalah elemen pemformatan yang anda definisikan seperti tampilan font, warna dan ukuran dari selector khusus. –Value (justify) adalah informasi pemformatan aktual. Misalnya ketika bekerja dengan perataan teks, anda mengatur nilainya dengan justify.

Minggu …8… Page 6 Class Pada contoh sebelumnya jika kita terapkan pada situs web akan membuat paragraf rata kiri-kanan untuk semua tag dalam kode html tetapi bagaimana kalau anda ingin ada paragraf rata tengah??? –Gunakan class, dengan class anda dapat mengatur sebuah “class” dari elemen memiliki pemformatan yang berbeda dengan class lainnya dari elemen yang sama atau default class. Anda dapat membuat class kustom dengan menambahkan titik sebelum nama class seperti contoh berikut:.RataTengah { Text-align: center; }

Minggu …8… Page 7 Class (Continued …) Untuk menerapkan style ke elemen, anda dapat menggunakan atribut class seperti contoh berikut: aaaaaaaaaaaa, bbbbbbbbbbbb bbbb. Ccccccccccccccccc cccccccccccc.

Minggu …8… Page 8 Id Id mirip dengan class dalam hal mereferensikan pengaturan khusus elemen. Perbedaan utama di antara keduanya adalah id hanya dapat digunakan sekali saja dalam kode HTML anda sedangkan class dapat digunakan berulang kali. Id digunakan terutama untuk sesuatu seperti header dan footer di mana hanya satu id yang diperlukan per halaman. Untuk menerapkan id, tanda titik sebelum nama class diganti dengan sharp (#) seperti contoh berikut: #RataKanan {Text-align: Right;}

Minggu …8… Page 9 Id (Continued …) Untuk menerapkan style ke elemen, anda dapat menggunakan atribut Id seperti contoh berikut: aaaaaaaaaaaa, bbbbbbbbbbbb bbbb. Ccccccccccccccccc cccccccccccc.

Minggu …8… Page 10 Informasi Style Informasi style dapat juga diterapkan pada elemen seperti tag anchor ( ), seperti contoh berikut: a:link, a:visited {color: #cc3300; Text-decoration; underline;} a: hover {text-decoration: none;} a: active {color: #ff9900; Text-decoration; underline;} Kode diatas akan menampilkan link berwarna merah dengan garis bawah di halaman, ketika anda menggerakkan mouse di atasnya, garis bawah akan hilang dan ketika anda mengklik di sana akan muncul link warna oranye muda dengan garis bawah.

Minggu …8… Page 11 Penerapan CSS dalam halaman web Ada 2 cara dalam menerapkan pemformatan CSS dalam halaman web: –Stylesheet internal Cara ini akan mengatur definisi style dalam blok di daerah di dokumen web anda. –Stylesheet eksternal Cara ini akan mengatur definisi style dalam dokumen stylesheet terpisah dan di-link/dikaitkan ke halaman (atau banyak halaman) melalui tag dalam daerah di dokumen web anda.

Minggu …8… Page 12 Stylesheet Internal Jika anda ingin menerapkan style pada satu halaman saja, anda dapat menanam informasi style dalam seksi dari HTML. Untitled Page p {text-align: justify;}.RataTengah {text-align: center;} #RataKanan {Text-align: Right;} Berikan contoh Stylesheet Internal

Minggu …8… Page 13 Stylesheet Eksternal Untuk menerapkan Stylesheet eksternal pada aplikasi web yang perlu anda lakukan adalah membuat file Stylesheet dengan ekstensi.css, file sttylesheet hanya berisi informasi style saja. Berikan contoh Stylesheet Eksternal

Minggu …8… Page 14 Menggunakan dan membuat Themes Themes adalah definisi style berbasis teks. Themes mirip dengan CSS yang digunakan untuk mendefinisikan style visual dari halaman web anda. Themes dapat anda gunakan pada level aplikasi, halaman atau kontrol server. Untuk melakukan penerapan dari theme, anda dapat menambahkan atribut theme dalam directive page sehingga menjadi seperti berikut :

Minggu …8… Page 15 Menerapkan Themes Menambahkan attribut theme ke directive page akan mengubah tampilan keseluruhan halaman sesuai yang didefinisikan dalam theme langit. Jika anda ingin mengaplikasikan themes tidak hanya di halaman saja tetapi dikeseluruhan aplikasi, anda dapat menambahkan atribut theme ke file web.config dengan contoh sebagai berikut:

Minggu …8… Page 16 Menerapkan Themes (Continued …) Jika anda mengatur theme dalam file web.config, anda tidak perlu lagi mendefinisikan theme dalam directive page di halaman ASP.NET anda. Jika anda menginginkan satu level lebih tinggi lagi yaitu menerapkan theme pada semua aplikasi web diserver, anda perlu menambahkan atribut theme di machine.config.

Minggu …8… Page 17 Mendesain Theme sendiri Untuk membuat theme sendiri, anda perlu melakukan empat langkah berikut: –Membuat folder themes. –Mendefinisikan file CSS untuk theme. –Mendefinisikan skin untuk theme. –Menambahkan gambar dan sumber lain yang diperlukan. Notes : langkah 1 harus dilakukan lebih dahulu, untuk langkah selanjutnya tidak harus dilakukan secara berurutan dan tidak harus ada.

Minggu …8… Page 18 Membuat Folder Theme

Minggu …8… Page 19 Mendefinisikan file CSS

Minggu …8… Page 20 Mendefinisikan skin

Minggu …8… Page 21 Questions & Answers

Minggu …8… Page 22 Thank You