PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM :

Transkripsi

1 PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami penggunaan groupping, class dan id pada CSS. 2. Siswa dapat mengimplementasikan groupping, class dan id pada halaman web. B. PENDAHULUAN 1). Syntax CSS Syntax pada CSS terdiri dari tiga bagian, yaitu selector, property dan value. selector {property: value Bagian selector untuk menentukan pada elemen/tag HTML apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. Property dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari property nya, misalnya red untuk warna dll. Setiap akhir penulisan property dan value diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antar satu property dengan property lain. Selector h1 {color:red; Property Value Jika value lebih dari sebuah kata, maka harus diapit dengan tanda kutip ganda diantara value: p{font-family: "sans serif" Jika Anda ingin menetapkan lebih dari satu property, maka property harus dipisahkan dengan titik koma (semicolon). Berikut ini adalah contoh yang menampilkan pendefinisian elemen paragraph agar rata tengah serta warna text nya adalah merah: p{text-align:center;color:red Agar definisi style lebih mudah dibaca, maka kita dapat menuliskannya dengan bentuk berikut: p{ text-align: center; color: black; font-family: arial 2). Groupping Kita dapat mengelompokkan selector, pisahkan tiap selector dengan sebuah koma. Berikut ini adalah contoh pengelompokkan element header yang memiliki style warna text yang sama: h1,h2,h3,h4,h5,h6 { color: green;

2 3). Class Selector Praktikum Dasar Web Dengan menggunakan class selector, kita dapat mendefinisikan style yang berbeda untuk elemen HTML yang sama. Secara umum syntax style untuk class adalah sebagai berikut:.namakelas{ Property1: value1; Property2: value2;.. Misalnya kita ingin mendefinisikan dua buah tipe paragraph yaitu paragraph dengan rata kanan, sedang yang lainnya adalah rata tengah. Berikut bentuk penulisannya: p.right {text-align: right p.center {text-align: center Dalam dokumen HTML kita harus menambahkan attribut class: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Pada contoh dibawah ini, semua elemen HTML dengan class="center", akan menjadikan rata tengah..center {text-align: center Pada dokumen HTML dibawah, elemen h1 dan elemen p menggunakan class "center", artinya kedua elemen tersebut akan mengikuti aturan pada selector center : <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> Note: Do NOT start a class name with a number! It will not work in Mozilla/Firefox. Misalnya, dalam HTML terdapat empat buah <div>, tetapi hanya <div> pertama hendak dibuat berbeda dari ketiga <div> yang lain, Implementasinya sebagai berikut : <title>jangan Menyerah</title>.judul { background-color : green; color : yellow;.tubuh{ background-color : blue; color : white; <div> class= judul > <p>penggalan lirik : Jangan Menyerah</p> <p>(d Masiv)</p> Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 2

3 <div> class= tubuh > <p>tak ada manusia </p> <p>yang terlahir sempurna</p> <p>jangan kau sesali</p> <p>segala yang telah terjadi</p> <div> class= tubuh > <p>kita pasti pernah </p> <p>dapatkan cobaan yang berat</p> <p>seakan hidup ini</p> <p>takada artinya lagi</p> <div> class= tubuh > <p>reff. 1: </p> <p>syukuri apa yang ada</p> <p>hidup adalah anugerah</p> <p>tetap jalani hidup ini</p> <p>melakukanyang terbaik</p> <p> </p> Perhatikan, tag <div> pertama menyertakan atribut class yang diisi dengan judul, sedangkan tiga <div> yang lain menggunakan nilai berupa tubuh untuk atribut class. Hal inilah yang membedakan antara <div> pertama dengan tiga <div> yang lain. Selektor kelas diawali dengan tanda titik (.) Contoh Selektor kelas diterapkan hanya pada elemen tertentu : <title>selektor Kelas Khusus</title>.liga { color : gray; div.liga { background-color : blue; <p class= liga >Jakarta</p> <div class= liga >Bandung <p class= liga >Surabaya</p> Perhatikan bahwa hanya divisi 2 yang diberi latar belakang, ini karena kode div.liga { background-color : blue; Selektor div.liga berarti div yang mengandung kelas liga Dengan demikian yang tidak terletak dalam elemen div tidak ikut diberi latar belakang Namun efek.liga { color : gray; berlaku untuk semua yang berkelas liga Sebuah elemen bisa mempunyai lebih dari satu kelas, didalam atribut class, nama-nama kelas dipisahkan oleh spasi, contoh : Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 3

4 <title>selektor 2 Kelas</title>.umum { color : yellow;.khusus { background-color : blue; <div class = umum khusus >Umum, ya. Khusus, ya. pada contoh diatas bahwa elemen div tersebut mempunyai dua buah kelas, yaitu umum dan khusus, kedua nama kelas dipisahkan dengan spasi 4). Id Selector Kita juga dapat mendefinisikan style dengan menggunakan id selector. Id selector didefiniskan dengan menggunakan karakter #. Berikut adalah contoh penggunaan id selector: #green {color: green Aturan style dibawah ini akan diterapkan pada elemen p yang menggunakan id dengan value adalah para1 : p#para1 { text-align: center; color: red Selektor ID berguna untuk mengatur elemen yang mempunyai ID tertentu. Atribut ID bisa dikenakan pada suatu elemen dengan bentuk seperti berikut <nama Tag id = nama Identitas..> Sebuah ID dapat dipakai untuk mendapatkan sebuah elemen secara unik, hal ini berbeda dengan class, sebagaimana diketahui, beberapa elemen boleh memiliki kelas yang sama Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 4

5 Berikut ini adalah contoh penggunaan id selector pada dokumen HTML: Praktikum Dasar Web #green{ color:green p#para1{ text-align:center; color:red <h2 id="green">ini heading 2</h2> <p>ini paragraph 1 yang tidak menggunakan id "para1". Ini paragraph 1 yang tidak menggunakan id "para1". Ini paragraph 1 yang tidak menggunakan id "para1".</p> <p id="para1">ini paragraph 2 yang menggunakan id "para1". Ini paragraph 2 yang menggunakan id "para1". Ini paragraph 2 yang menggunakan id "para1".</p> Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. Contoh penggunaan id dalam tag <div> <title>selektor ID</title>.isi { background-color : green; #bagian1 { text-align : left ; color : white ; #bagian2 { text-align : right ; color : yellow ; <h1>pantun</h1> <div id = bagian1 class = isi > <p>jalan-jalan ke hutan purba</p> <p>dapat buah enak rasanya</p> <p>pelan-pelan selalu mencoba</p> <p>pengetahuan pun bertambah tanpa terasa</p> <div id = bagian2 class = isi > <p>semangka erat diikat</p> <p>memang bisa banyak membawanya</p> <p>semangat yang kuat</p> <p>membawa hasil yang sangat berharga</p> Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 5

6 Keterangan tag diatas : Kedua <div> mempunyai kelas yang sama, yaitu isi, namun, masing-masing <div> memiliki id yang berbeda, yang pertama berupa bagian1 dan yang kedua bagian2 Kedua <div> tersebut akan diatur oleh 2 buah selektor, selektor pertama berupa.isi dan yang kedua #bagian1 atau #bagian2 5). Universal Selector Selektor yang ditujukan untuk semua elemen, contohnya sebagai berikut * { color : blue ; Dengan cara seperti itu, semua teks dalam semua elemen akan berwarna biru <title>selektor Universal</title> *{ color : blue ; <h1>selektor Universal</h1> <p>paragraf</p> <div>divisi Bila dokumen tersebut dipanggil, semua teks baik dalam <h1>, <p> maupun <div> berwarna biru 6). Element Type Selector Element Type Selector atau Tag Selector adalah istilah untuk selektor yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selektor, dan seluruh tag tersebut akan ditangkap oleh selektor ini Contoh : h1 { text-decoration : underline; p { Font-size : 14px; Contoh kode diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tah <p> akan berukuran 14 pixel Efek dari elemen type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p> 7). Komentar pada CSS Komentar digunakan untuk menjelaskan baris kode Anda, sehingga dapat membantu juga suatu hari nanti Anda akan melakukan pengeditan terhadap source code. Sebuah komentar akan diabaikan oleh browser. Komentar pada CSS dimulai dengan dengan /* dan diakhiri dengan */, seperti contoh berikut: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 6

7 C. PRAKTIKUM Ketentuan Praktikum: 1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser. 3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan. 1. Groupping //Internal Style Sheet <title>belajar CSS-Groupping</title> h1,h2,h3{ font-family:verdana; color:green h4,h5,h6{ font-family:arial; color:red <h1>ini adalah Heading 1</h1> <h2>ini adalah Heading 2</h2> <h3>ini adalah Heading 3</h3> <h4>ini adalah Heading 4</h4> <h5>ini adalah Heading 5</h5> <h6>ini adalah Heading 6</h6> 2. Selector dengan Class //Internal Style Sheet A. <title>belajar CSS-Class[1]</title> p.kanan{ text-align: right; p.kiri{ text-align: left; <p class="kanan">paragraf ini memakai right alignment </p> <p class="kiri">paragraf ini memakai left alignment </p> Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 7

8 3. Selector dengan menggunakan Id //Internal Style Sheet A. <title>belajar CSS-Menggunakan ID[1]</title> #kanan{ text-align: right; <h1 id= kanan >Judul ini memakai right alignment</h1> <p id= kanan >Paragraf ini memakai right alignment</p> B. <title>belajar CSS-Menggunakan ID[2]</title> p{ color: #FFFFFF; font-family: arial; background: #00FF00; font-size:"16pt"; font-weight: bold p.group{ color: yellow; font-family: verdana; font-size:"12pt"; font-weight: normal; background: #0000FF p#one{ color: #00FF00; background: #FFFFFF <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group" >Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p id="one" >Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 8

9 SOAL LATIHAN Praktikum Dasar Web 1. Perhatikan dokumen berikut <title>selektor</title>.biru { Color : green ; <div>biarkan aku seperti ini <div class= hijau > Hijaulah negeriku. Ijo royo-royo! Sebenarnya dokumen tersebut dimaksudkan untuk menampilkan semua tulisan yang berada dalam <div class= hijau > agar berwarna hijau. Namun, kalau kalian mencoba menjalankannya maka warnanya tetap hitam. Di mana kesalahannya? Cobalah untuk memperbaikinya supaya sesuai dengan yang dikehendaki 2. Terdapat empat div seperti berikut <div>namaku Rani <div>anakku pertama Edi <div>anakku kedua Siti <div>anakku ketiga Johan Tanpa mengubah kode HTML tersebut, bagaimana cara agar tulisan Anakku pertama Edi Diberi warna biru, sedangkan yang lain hijau? Cobalah dengan menuliskan dokumen HTML beserta kode CSS-nya Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 9