1 PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami penggunaan groupping, class dan id pada C...
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; }
Praktikum Dasar Web
3). Class Selector 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:
This paragraph will be right-aligned.
This paragraph will be center-aligned.
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”:
This heading will be center-aligned
This paragraph will also be center-aligned.
Note: Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
Misalnya, dalam HTML terdapat empat buah
, tetapi hanya
pertama hendak dibuat berbeda dari ketiga
yang lain, Implementasinya sebagai berikut : Jangan Menyerah <style type=”text/css”> .judul { background-color : green; color : yellow; } .tubuh{ background-color : blue; color : white; } <style>
class=”judul”>
Penggalan lirik : Jangan Menyerah
(D’Masiv)
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
2
Praktikum Dasar Web
class=”tubuh”>
Tak ada manusia
Yang terlahir sempurna
Jangan kau sesali
Segala yang telah terjadi
class=”tubuh”>
Kita pasti pernah
Dapatkan cobaan yang berat
Seakan hidup ini
Takada artinya lagi
class=”tubuh”>
Reff. 1:
Syukuri apa yang ada
Hidup adalah anugerah
Tetap jalani hidup ini
Melakukanyang terbaik
……
Perhatikan, tag
pertama menyertakan atribut class yang diisi dengan “judul”, sedangkan tiga
yang lain menggunakan nilai berupa “tubuh” untuk atribut class. Hal inilah yang membedakan antara
pertama dengan tiga
yang lain. Selektor kelas diawali dengan tanda titik (.) Contoh Selektor kelas diterapkan hanya pada elemen tertentu : Selektor Kelas Khusus <style type=”text/css”> .liga { color : gray; } div.liga { background-color : blue; } <style>
Jakarta
Bandung
Surabaya
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
Praktikum Dasar Web Selektor 2 Kelas <style type=”text/css”> .umum { color : yellow; } .khusus { background-color : blue; } <style>
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 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
Praktikum Dasar Web Berikut ini adalah contoh penggunaan id selector pada dokumen HTML:
Ini paragraph 1 yang tidak menggunakan id "para1". Ini paragraph 1 yang tidak menggunakan id "para1". Ini paragraph 1 yang tidak menggunakan id "para1".
Ini paragraph 2 yang menggunakan id "para1". Ini paragraph 2 yang menggunakan id "para1". Ini paragraph 2 yang menggunakan id "para1".
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Contoh penggunaan id dalam tag
Selektor ID <style type=”text/css”> .isi { background-color : green; } #bagian1 { text-align : left ; color : white ; } #bagian2 { text-align : right ; color : yellow ; } <style>
Pantun
Jalan-jalan ke hutan purba
Dapat buah enak rasanya
Pelan-pelan selalu mencoba
Pengetahuan pun bertambah tanpa terasa
Semangka erat diikat
Memang bisa banyak membawanya
Semangat yang kuat
membawa hasil yang sangat berharga
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
5
Praktikum Dasar Web Keterangan tag diatas : Kedua
mempunyai kelas yang sama, yaitu “isi”, namun, masing-masing
memiliki id yang berbeda, yang pertama berupa “bagian1” dan yang kedua “bagian2” Kedua
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
Selektor Universal <style type=”text/css”> *{ color : blue ; } <style>
Selektor Universal
Paragraf
Divisi
Bila dokumen tersebut dipanggil, semua teks baik dalam
,
maupun
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
akan bergaris bawah, dan seluruh tah
akan berukuran 14 pixel Efek dari elemen type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag
terdapat tag , maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup
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
Praktikum Dasar Web
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.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
8
Praktikum Dasar Web
SOAL LATIHAN 1.
Perhatikan dokumen berikut Selektor <style type=”text/css”> .biru { Color : green ; }
Biarkan aku seperti ini
Hijaulah negeriku. Ijo royo-royo !
Sebenarnya dokumen tersebut dimaksudkan untuk menampilkan semua tulisan yang berada dalam
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
Namaku Rani
Anakku pertama Edi
Anakku kedua Siti
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