Modul Praktikum Pemrograman Web BABV DESAIN WEB CSS A. KOMPETENSI DASAR * Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSSICSS3. + Mampu mengoptimalkan_fitu-fitur CSS dalam desain web, * Mampu memanfiatkan pendekatan untuk menghasikan halaman web ‘yang rapi, standar, dan mena. B, ALOKASI WAKTU 1 JS (2.x 50 menit) ©. PETUNJUK Awalisetiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan, Pabami tujuan, dasar teosi, dan lathan-lachan praktikum dengan baik dan benat: Kerjakan tmgas-ragas praktikum dengan baik, sabas, dan jujur. “Tanyakan kepada asisten/ dosen apabila ada hal-bal yang kurang jelas. D. DASAR TEORI Pada bab sebelummya telah dibahas apa itu CSS (Cascading Style Sheet) dan bagaimana cara penggunaannya secara mendasar. Pada bab ini akan membahas lebih lanjut mengenai fingsionalitas CSS secara spesifk berkaitan dengan desain web. Desain web merupakan bagin terpenting dalam pembangunan sebuah halaman website. Dalam desain web yang baik, unsur estetika yang harus diperhatikan adalah: wamna, tata letak, dan bentuk. Ketiga unsur tersebut dapat diatur dengan menggunakan CSS, seperti mengatur wama background, wama hhuruf, bentuk mena, letak menu, dan lain sebagainya, Berkut alasan mengapa menggunakan CSS dalam mendesain web: a Kode HTML menjadi lebih sederhana dan kebih mudah distur (clean design). . Kode HTML kebih rapid an mendukung SEO fiiendly Memungkinkan aspek guna ulang (reusability) Mudah untuk dikelola (maintainability) Ukuran file menjadi lebih kecil, schingga load file lebih cepat Digunakan dalam hampir semua web browser. aes © 2016 Jurusan Teknik Elektro FT UM 1 Didik Dwi PrasetyaModul Praktikum Pemrograman Web E. LATIHAN 1. Desain Layout Untuk mendesain sebush Jayout website secara utuh, dibutuhkan sebush kerangka untuk menampung seluruh isi website tersebut (misalnya mulai dati agian header, content dan footer) agat layout bersifit ajeg atau presisi Kerangka ini sering disebut wrapper atau container. Pada modul ini akan digunakan istilah wrapper untuk menyebut kerangka tersebut = Pendekatan Sebelum HTMLS Pertama, definiskan —terlebihdahulu style untuk wrapper. Setelah mendefinisikan wrapper, langkah selanjutaya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style id terpisah. Definisikan style seperti berikut dan simpan dengan nama mystyle.css twcapper ( argin: autos width: 750px; border: ipx solid red; ? #header { eight: 0px: yrder: ipx solid blue; 1 tinner { float: lefty margin: 5px 0; rder: 1px solid blacks , tsidebar ( float: lefty argin-right: 20px: wedeh: L60px7 Sgt: 330ex2 border: ipx solid red; : feontent { float: lefty width: 5¢4pqz height: 330px; border: ipx solid green; both height: 50px: border: ipx solld bluer © 2016 Jurusan Teknik Elektro FT UM 2 Didik Dwi PrasetyaModul Praktikum Pemrograman Web Buat desain layout HTML seperti berikut: boay>

Beader ‘sidebar> Content, «sai

Footer