KOMPETENSI DASAR • PETUNJUK • DASAR TEORI. STUDI KASUS

3 MODUL 2 CASCADING STYLE SHEET CSS

A. KOMPETENSI DASAR •

Memahami jenis dan struktur dasar dokumen CSS. • Mampu memanfaatkan CSS untuk memformat dokumen HTML. • Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman web yang elegan dan menarik.

B. PETUNJUK •

Awali setiap aktivitas dengan do’a, semoga berkah dan bermanfaat. • Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar. • Kerjakan tugas- tugas praktikum dengan baik, sabar dan jujur. • Tanyakan kepada asisten dosen apabila ada hal-hal yang kurang jelas.

C. DASAR TEORI.

1. Cascading Style Sheet. Cascading style sheet CSS merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:  Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.  Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.  Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML. Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division. 2. Pengenalan CSS 3 CSS Cascading Style Sheet dapat menerapkan suatu format ketika lebih dari satu style berlaku. Misalkan kita menginginkan semua paragraph harus memiliki font biru, namun secara khusus menginginkan satu kata agar berwarna merah. CSS bisa melakukan itu. File index.HTML: File stylesheet.css

D. LATIHAN

1. Menggunakan Style Sheet . - Inline. DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Inline Style title head body -- menerapkan embedded style pada paragraf -- p style = color:red; font-style:italic Ini paragraf pertama -- menerapkan embedded style pada paragraf -- p style = color:blue; font-weight:bold Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. p Ini paragraf ketiga body 3 html Gambar 1.1 kode HTML Gambar 1.2 Tampilan hasil halaman web Penjelasan : - Syntax html diatas menerapkan style CSS jenis inline dimana property style diterapkan secara langsung pada baris atau elemen HTML. Inline menerapakan style per baris atau per tag melalui atribut style.pada syntax HTML diatas , terdapat pendeklarasian DOCTYPE html dengan mengikutsertakan validator untuk dokumen html yang menggunakan CSS ini. Pada bagian head , terdapat pendeklarasian nama title yang digunakan yaitu “Inline Style”, tulisan ini akan muncul pada bagian title halaman yang sedang dibuka pada browser. Kemudain pada bagian body terdapat syntax penerapan inline style yang mendeklarasikan style yang digunakan pada pargraf 1 adalah warna merah dengan font style italic. Kemudian pendeklarasian paragraph kedua dengan menggunakan style warna biru dengan font-weight bold. Sehingga nanti hasilnya tulisan pada paragraph 1 adalah berwarna merah dengan italic, paragraph kedua berwarna biru dengan bold ditulis tebal dan paragraph ketiga ditulis default tanpa perubahan apapun. - Embedded Style DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Embedded Style title style type = textcss -- p { color: red; font-style: italic; } 3 -- style head body p Ini paragraf pertama p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. p Ini paragraf ketiga body html Gambar 1.3 kode HTML Gambar 1.4 Tampilan hasil halaman web Penjelasan : - Program diatas adalah penerapan menggunakan embedded style. Aturan penggunaan Embedded style didefinisikan ke dalam satu blok kemudan digunakan di elemen- elemen HTML. Pendeklarasian style pada bagian head. Sehingga hasilnya menyeluruh. Seperti pada program diatas, menggunakan style type = textcss, dengan aturan pada paragraph menggunakan tulisan warna merah dan font style italic. Hasilnya adalah setiap paragarf yang ada pada bagian body akan dituliskan dalam tulisan berwarna merah dan dicetak miring. 3 DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Embedded Style title style type = textcss -- p { color: red; font-style: italic; } style2 { color: blue; font-weight: bold; } -- style head body p class = style1 Ini paragraf pertama p id=style2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. p class=style3 Ini paragraf ketiga body html Gambar 1.5 Kode HTML Gambar 1.7 Tampilan hasil halaman web 3 Penjelasan : - Sama seperti contoh sebelumnya, hanya saja menggunakan 2 style yang dituliskan pada head. Style kedua menggunakan warna biru dengan font weight bold. Penulisan deklarasi style1 dan style2 berbeda. Style 1 menggunakan class sehingga nantinya dapat digunakan berulang kali pada satu halaman HTML, sedangkan style2 menggunakan id yang sifatnya unik , sehingga hanya dapat digunkana 1 kali dalam satu HTML. Penerapan style1 dan style2 , yaitu dituliskan pada p…  p class=”style1” Ini pargraf pertama. Sehingga nanti hasilnya adalah per paragraph dengan style yang digunakan. - Linked DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Linked Style title link rel = stylesheet href = style.css type = textcss head body p class = style1 Ini paragraf pertama p id = style2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. p class = style1 Ini paragraf ketiga body html Gambar 1.8 kode HTML 3 Gambar 1.9 Tampilan hasil halaman web Penjelasan : - Program diatas menggunakan pendekatan linked, yang aturannya menggunakan 2 dokumen html. Satu digunakan untuk pendeklarasian aturan style dan disimpan dalam format css, dan yang satunya adalah dokumen HTML. Cara kerjanya adalah menggunakan suatu link yang penulisannya diletakkan pada head. Link yang dituju adalah file css tersebut untuk dapat mengakses style-style yang ada pada file css. Hasilnya sama seperti program sebelumnya, yang membedakan adalah penggunaan pendekatan linked yang prinsipnya file dokumen dan CSS diletakkan terpisah menggunakan tag link. Penulisan tag link : link rel=”stylesheet” href=”style.css” type=”textcss” . 2. Tipografi - Style Font DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Style Font title style type = textcss -- .style font { font-family: Georgia; font-size: 18px; font-style: italic; font-weight: bold; text-decoration: underline; color: red; } -- style head body 3 p class = style_font Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. body html Gambar 2.0 kode HTML Gambar 2.1 Tampilan hasil halaman web Penjelasan : - Program diatas menerapkna pendekatan embedded karena mendeklarasikan penulisan aturan CSS pada satu blok head. Dengan menggunakan class sehingga nantinya dapat digunakan berulang kali. Aturan CSS yang digunakan adalah style font, dengan Font-family : Georgia, size : 18px, style : italic, weight : bold dan decoration textnya underline dengan fot color warna merah. Sehingga nanti hasilnya pada paragraph 1 ditulis dengan tulisan Georgia berukuran 18px dicetak miring dan ditebal serta diberi garis bawah. Seddangkan paragraph kedua ditulis default karena tidak menggunakan style CSS. - Initial Cap DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Style Font title style type = textcss -- 3 p:first-letter { font-size: 3em; background-color: black; color: white; } -- style head body p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. body html Gambar 2.2Kode HTML Gambar 2.3 Tampilan hasil halaman web Penjelasan : - Program diatas menggunakan pendekatan embedded style. Menggunakan style first- letter style pada paragraph dengan ketentuan font size 3em, background colour hitam dan warna tulisannya putih. Ini dimaksudkan menggunakan style CSS yang hasilnya adalah mengubah huruf awal first letter pada paragraph menjadi lebih besar dan memiliki tampilan berbeda dibandingkan penulisan huruf hinga kalimat setelahnya. 3. Elemen- elemen Halaman - Border DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Style Sheet title 3 style type = textcss -- .border1 { border: 1px solid red; } .border2 { border: 1px dashed red; } .border3 { border: 1px dotted red; } -- style head body p class=border1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. p class=border2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. p class=border3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. body html Gambar 2.4Kode HTML 3 Gambar 2.5 Hasil Tampilan Web Penjelasan : - Program diatas menggunakan pendekatan embedded style dengan pendeklarasian 3 class style border yang digunakan pada halam HTML ini. Style border 1 digunakan pada paragraph pertama dengan border 1px garris solid berwarna merah, yang artinya borderannya dalam bentuk garis penuh. Style border 2 digunakan pada paragraph kedua dengan border 1px garis dashed berwarna merah , yang artinya borderannya dalam bentuk garis putus-putus tebal dan berjarak, sedangkan style border 3 yang digunakan pada paragarf 3 menggunakan tipe dotted yang hasilnya borderan dalam bentuk garis putus-putus kecil sehingga jaraknya lebih kecil. - Padding DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Style Sheet title style type = textcss -- .border1 { border: 1px solid red; padding: 10px; } .border2 { border: 1px dashed red; padding: 20px 10px 5px 40px; } -- style 3 head body p class = border1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. p class=border2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. body html Gambar 2.6 Kode HTML Gambar 2.7 Tampilan hasil web Penjelasan : - Program diatas menerapkan padding yang befungsi untuk menetapkan jarak antara border dengan konten. Pada dokumen ini menggunakan menggunakan 2 border style dengan padding yang berbeda. Style border 1 menggunakan padding sebesar 10px, dan style border 2 menggunakan padding 20px 10px 5px 40px, yang artinya padding atas sebesar 20px, kanan 10px, bawah 5px dan kiri 40px. Hasilnya terlihat jelas berbeda antara paragraph 1 dan 2. Border 1 digunakan pada paragraph 1 yang nilai padding semua sisi 10px, sehinga rata kanan kiri atas bawah. 3 4. Link - Link 1 head title Style Link title style type = textcss -- .link_none { text-decoration: none; } -- style head body a href = link2.html Link Normal a br a href = link2.html class = link_none Link tanpa garis bawah a body html Gambar 2.8 Kode HTML Gambar 2.9 Tampilan Hasil Web Penjelasan : - Program diatas menggunakan pendekatan embedded style dengan class link_none yang artinya untuk link tanpa dekorasi apapun, termasuk underline, sehingga hasilnya sebuah link tidak memiliki garis bawah. Dimaksudkan untuk melakukan modifikasi pada penulisan sebuah link. - Link 2 head title Style Link title style type = textcss -- 3 .link1 a:hover { text-decoration: none; } .link2 a:hover { font-style: italic; font-weight: bold; } .link3 a:hover { cursor: wait; } -- style head body a href = link2.html Link Normal a br p class = link1 a href = link2.html Link tanpa garis bawah a p p class=link2 a href=link2.htmlUbah style fonta p p class=link3 a href=link2.htmlUbah kursora p body html Gambar 3.0 Kode HTML Gambar 3.1 Tampilan hasil halaman web Penjelasan : 3 - Program diatas menggunakan 3 style link , yang pertama tanpa dekorasi text, yang kedua dicetak miring dan tebal, yang ketiga dengan cursor wait. Pada Link Normal dan link tanpa garis bawah yang ada pada link 1, ditautkan ke link 2. Kemudian pada link 2 link bertambah 2 yaitu ubah style font dengan style link2 dicetak miring dan tebal dan ubah kursor menggunakan style link3 cursor: wait. 5. List head title Style List title style type = textcss -- leftmenu ul { width: 200px; list-style-type: none; padding:0; margin:0; } leftmenu a:link, leftmenu a:visited, leftmenu a:active { padding-left: 15px; text-decoration: none; } leftmenu a{ padding: 5px 0px 5px 15px; display: block; background: 6cae15 no-repeat left center; margin: 0px 0px 1px; color: ffffff leftmenu a:hover { background: 5e9711 no-request left center: color: ffffff } -- style head body List Normal ul liSatuli liDuali ul hr Style List div id=leftmenu ul lia href=Menu Satuali lia href=Menu Duaali lia href=Menu Tigaali ul 3 div body Gambar 3.2 Kode HTML Gambar 3.3 Tampilan hasil halaman web Penjelasan : - Menggunakan 4 id style : yang pertama leftmenu ul unordered list dengan width 200px, list style typenya none, dengan padding dan margin 0. Kedua leftmenu link, dengan aturan link dapat dikunjungi dan berstatus aktif kemudian padding kiri 15px tanpa text decoration. Yang ketiga leftmenu dengan aturan padding atas kanan bawah kiri berurutan 5px 0px 5px 15px dan diplay diberi block dengan background berwarrna kode 6cae15 no repeat left center dan margin 0px 0px 1px atas kanan bawah dengan warna white kode : ffffff. Dan style keempat leftmenu dengan ketentuan background bewarna hijau kode 5e9711 no repeat left center dengan warna putih ffffff. Sehingga hasilnya pada list Normal menggunakan default penulisan list dan untuk style list menu 1, 2, 3 menggunakan class leftmenu sehingga hasilnya terdapat 3 block menu seperti pada gambar. 6. Division - Ukuran area DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Demo Ukuran Division title style type = textcss 3 -- .box1 { width: 200px; height: 50px; background: grey; border: 1px solid red; } .box2 { margin: 10px; padding: 10px; width: 400px; height: 100px; border: 1px solid red; } -- style head body div class=box1 Paragraf ini di dalam tag lt;divgt; div div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. div Gambar 3.4 kode HTML Gambar 3.5 Tampilan hasil halaman web 3 Penjelasan : - Program diatas membuat 2 class box dengan ketentuan masing-masing box yang berbeda. Box 1 berukuran 200px x 50px dengan background berwarna abu dan border sebesar 1px garis solid bewarna merah. Sedangkan box 2 berukuran 400px x 100px menggunakan margin 10px untuk semua posisi dan padding sebesar 10px, border sebesar 1px garis solid berwarna merah. Sehingga hasilnya akan tampak berbeda antara box 1 dan 2 karena box 2 menggunakan margin dan padding, sedangkan box 1 tidak menggunakan margi sehingga secara default akan diletakkan pada pojok kiri atas halaman. - Format font DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Demo Ukuran Division title style type = textcss -- .box1 { width: 200px; height: 50px; background: grey; text-transform: uppercase; font-weight: bold; border: 1px solid red; } .box2 { margin: 10px; padding: 10px; width: 400px; height: 100px; border: 1px solid red; } -- style head body div class=box1 Paragraf ini di dalam tag lt;divgt; div div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, 3 sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. div Gambar 3.6 kode HTML Gambar 3.7 Tampilan hasil halaman web Penjelasan : - Program diatas sama seperti program sebelumnya, yang membedakan adalah style pada box 1 diubah menjadi berukuran 200px x 50px dengan text-transofrm : uppercase menjadi lebih besar tulisannya dan dicetak tebal. - Posisi area DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Demo Posisi Division title style type = textcss -- .box1 { float: left; width: 200px; height: 50px; 3 background: grey; border: 1px solid red; } .box2 { float: right; padding: 10px; width: 300px; height: 100px; border: 1px solid red; } -- style head body div class=box1 Paragraf ini di dalam tag lt;divgt; div div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. div - Posisi area 1 DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Demo Posisi Division title style type = textcss -- .box1 { float: left; width: 200px; height: 50px; background: grey; border: 1px solid red; } .box2 { float: right; padding: 10px; width: 300px; height: 100px; border: 1px solid red; } .box3 { 3 me-reset pengaturan float left maupun right clear: both; float: left; width: 200px; height: 50px; background: grey; border: 1px solid red; -- style head body div class=box1 Paragraf ini di dalam tag lt;divgt; div div class=box2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. div div class=box3 Paragraf ini di dalam tag lt;divgt; div body html Gambar 3.8 Kode HTML Awal: 3 modifikasi: Gambar 3.9 Tampilan hasil halaman web Penjelasan : - Program diatas adalah untuk mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS. Box1 dengan float= left, berukuran 200px x 50px background abu-abu dengan border solid 1px berwarna merah. Box2 dengan float= right berukuran 300px x 100px , dengan padding 10px dan border solid 1px berwarna merah. Maka nanti hasilnya adalah box1 terletak pada sisi kiri halam dan box 2 terletak pada sisi kanan halaman. Atribut float mencoba menempatkan area box sepanjang area yang masih bisa dilakukan. Kemudian untuk memodifikasi agar dapat muncul seperti gambar kedua, melakukan penambahan baru setelah batas kotak terluaskotak kanan, dengan mereset atribut float dengan menggunakan atribut clear. Sehingga hasilnya akan muncul seperti gambar kedua.

7. Membuat Kerangka

- Syntax : DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Demo Wrapper title style type = textcss -- wrapper { margin: auto; width: 700px; border: 1px solid red; } -- style head 3 body div id = wrapper p Paragraf ini di dalam tag lt;divgt; p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat. div body - Screen shoot : - Penjelasan : Program diatas menggunakan fungsi wrapper untuk menampung keseluruhan desain. Pada id wrapper terdapat pendeklarasian penggunaan margin auto yang berfungsi untuk menempatkan area kerangka tepat berada di tengah sehingga berapapun ukurannya tidak akan mempengaruhi letak area kerangka. Kemudian dengan ukuran width sebesar 700px dan border 1px garis solid berwarna merah. 8. Desain Layout - Syntax : DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Desain Layout Sederhana title link rel = stylesheet href = mystyle.css type = textcss head body 3 div id = wrapper div id = header Header div div id = inner div id = sidebar Sidebar div div id = content Content div div div id=footer Footer div div body html - Screen shoot : - Penjelasan : Program diatas menggunakan 2 file html, 1 file css untuk pendeklarasian style apa saja yang digunakan pada file dokumen html yang akan digunakan sebagai halaman web. Pendeklarasian wrapper, header, inner, sidebar, content dan footer yang menggunakan id sehingga tidak mungkin sama dengan id lainnya. Kemudian pada file document html , untuk dapat menggunakan pendeklarasian style yang telah disimpan dalam file css maka pendeklarasian fungsi pemanggilan dapat dituliskan pada bagian head dengan menggunakan pendekatan linked. Pada bagian body untuk header menggunakan id 3 wrapper dan header. Pada bagian sidebar menggunakan inner dan sidebar. Bagian content menggunakan fungsi content dan footer menggunakan fungsi footer. Maka hasilnya dapat dilihat pada screenshoot.

E. STUDI KASUS

- Membuat desain header web dengan memanfaatkan CSS dan background gambar. Source Code HTML - Box.css header { height : 100px; border : 1px solid blue; margin : auto; padding : 10px 10px 10px 10px; border-bottom : 12px solid black; background-image : -moz-linear-gradientbottom, FFFFFF 0, FFB24D 50, F56505 100; } . box1 { float : left; width : 200px; height : 100px; } . box2 { float : left; width : 405px; height : 100px; } . box3 { float : right; width : 350px; height : 50px; } . box4 { float : right; width : 350px; height : 50px; } textheader { float : left; margin : auto; height : 60px; padding : 20px 0px 20px 20px; font-size : 30px; font-weight : bold; text-align : left; font-family : Jokerman; color : black; } 3 menusearch { float : right; margin : 25px 60px 0 0; width : 250px; height : 30px; font-family : Monotype Corsiva } . link a : hover { text-decoration : underline; } - Dokumen HTML DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalEN http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd html xmlns = http:www.w3.org1999xhtml xml:lang= en lang = en head title Studi Kasus 1 title link rel = stylesheet href = box.css type = textcss head body div id = header div class = box1 align = left img src = um.png align = right height = 100 width = 100 img div div class = box2 align = left div id = textheader Teknik Elektro div div div class = box3 align = center div class = link a href = Link1.html Home a | a href = Link2.html Sitemap a | a href = Link3.html RSS a | a href = Link4.html Contact a | a href = Link5.html About us a div div div class = box4 align = right div id = menusearch label for = firstname Search: label input type = text name = search required pattern= [A- Za-z]{1,20} placeholder = search brbr div body html 3 Hasil Tampilan Web: Penjelasan : - Program diatas menggunakan 4box untuk mendesain header agar dapat tampil seperti pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Menggunakan pendekatan linked sehingga pada bagian head dicantumkan halaman html yang akan di link-an. Menggunakan file css bernama box yang isinya pengaturan dari desain penyusun header. Kemudian pada bagian body, hanya ada id header, karena hanya akan membuat sebuah header web. Pada bagian header, dicantumkan pemanggilan class box1,2,3,4 untuk dapat menampilkan pengaturan yang dideklarasikan pada file css. Untuk field search menggunakan fungsi required sehingga nantinya akan di link-an jika mengklik button atau meneka enter pada keyboard.

F. TUGAS CHALENGE Source Code HTML :