KOMPETENSI INTI
3. Memahami, menerapkan dan menganalisis pengetahuan faktual, konseptual, dan prosedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan masalah.
4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu melaksanakan tugas spesifik di bawah pengawasan langsung.
KOMPETENSI DASAR
3.6. Memahami format formulir pada halaman web
4.6. Menyajikan formulir pada halaman web
TUJUAN PEMBELAJARAN
Setelah mengikuti kegiatan belajar 3 ini siswa diharapkan dapat :
URAIAN MATERI
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.
Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
form{ margin-left:0; }
Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } .
Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma img. Bentuk umumnya :
Contoh :
Latihan 1
Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML, namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style jika terjadi perubahan tampilan website dikemudian hari.
Latihan 2
Pada listing kode diatas, penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style> <style> input.btn
{ …….}
Di bagian body terdapat penerapan CSS dengan cara memanggil nama class nya
Latihan 3
File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file HTML. Contoh penulisan file.css
input.btn {color: #fff; background: #ffa20f; border: 2px outset #BBD16D; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold; width : auto;}
Latihan 4
3. Memahami, menerapkan dan menganalisis pengetahuan faktual, konseptual, dan prosedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan masalah.
4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu melaksanakan tugas spesifik di bawah pengawasan langsung.
KOMPETENSI DASAR
3.6. Memahami format formulir pada halaman web
4.6. Menyajikan formulir pada halaman web
TUJUAN PEMBELAJARAN
Setelah mengikuti kegiatan belajar 3 ini siswa diharapkan dapat :
- Mengetahui penggunaan cascading style sheet
- Memahami anatomi cascading style sheet
- Mengetahui cara kerja cascading style sheet
- Memahami cara kerja cascading style sheet
URAIAN MATERI
DEFINISI DAN FUNGSI CSSCascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
- Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
- Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
- Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
- Dapat digunakan dalam hampir semua jenis web browser.
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan. Ketika sebuah web yang semula menggunakan CSS 2 bermigrasi CSS 3, tidak perlu mengubah apapun.
Dengan adanya CSS mempermudah pengaturan dan pemeliharaan sebuah website dan tampilannya karena CSS memisahkan antara bagian pengatur gaya dan isi dari web.ANATOMI DARI CSSBagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value.
Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }
Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah formform{ margin-left:0; }
Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :
- form : selector yang akan di atur stylenya
- margin-left : property yang digunakan untuk jarak fieldset dari batas kiri layout
- 0 : nilai dari property margin-left
CARA KERJA CASCADING STYLE SHEETCara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class, untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } .
Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma img. Bentuk umumnya :
Contoh :
A. Inline Style SheetCSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <p></p> atau paragraf.
Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML, namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style jika terjadi perubahan tampilan website dikemudian hari.
Latihan 2
B. Embedded Style SheetCSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>, lebih tepatnya didalam tag <head>.
Pada listing kode diatas, penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style> <style> input.btn
{ …….}
Di bagian body terdapat penerapan CSS dengan cara memanggil nama class nya
Latihan 3
C. External Style SheetCSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file HTML. Contoh penulisan file.css
input.btn {color: #fff; background: #ffa20f; border: 2px outset #BBD16D; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold; width : auto;}
Latihan 4
RANGKUMANPada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat disimpulkan menjadi beberapa poin penting seperti berikut :
- CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
- Beberapa manfaat dari penggunaan CSS
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
- Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
- Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS
- Dapat digunakan dalam hampir semua jenis web browser.
- CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan
- Anatomi CSS terbagi ke dalam tiga bagian yaitu: selector, property, dan value. Selector{ Property : value; }
- Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class)
- Format penulisan CSS dengan Selector HTML adalah Nama-elemen
- Format penulisan CSS dengan Selector class adalah .nama-class { … }
- Format penulisan CSS dengan Selector id adalah #id { … }
- Penerapan CSS pada sebuah halaman web dapat dilakukan dengan beberapa alternatif di antaranya adalah: inline style sheet, embedded style sheet, external style sheet
MATERI DAN MODUL PRAKTIKUM
VIDEO PRAKTIKUM
SOAL DISKUSI
Buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut :
Kemudian secara bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas.
ALAT DAN BAHAN
- Modul Praktikum
- Perangkat Komputer
- Aplikasi Notepad ++
- Aplikasi Browser (Mozilla, IE, Chrome dan lain-lain)
VIDEO PRAKTIKUM
SOAL DISKUSI
Buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut :
- Jelaskan tentang anatomi cascading style sheet
- Jelaskan tentang macam selector yang dapat digunakan pada penerapan cascading style sheet
- Jelaskan cara kerja CSS pada penulisan style dengan cara inline style sheet, embedded style sheet, external style sheet
Kemudian secara bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas.
