PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL
advertisement
PRAKTIKUM
NAMA
KELAS
TANGGAL PRAKTIKUM
: PRAKTIKUM CSS 2
:
:
:
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:
<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 :
<html>
<head>
<title>Jangan Menyerah</title>
<style type=”text/css”>
.judul {
background-color : green;
color : yellow;
}
.tubuh{
background-color : blue;
color : white;
}
<style>
</head>
<body>
<div> class=”judul”>
<p>Penggalan lirik : Jangan Menyerah</p>
<p>(D’Masiv)</p>
</div>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
2
Praktikum Dasar Web
<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>
<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>
<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>
</div>
</body>
</html>
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 :
<html>
<head>
<title>Selektor Kelas Khusus</title>
<style type=”text/css”>
.liga {
color : gray;
}
div.liga {
background-color : blue;
}
<style>
</head>
<body>
<p class=”liga”>Jakarta</p>
<div class=”liga”>Bandung</div>
<p class=”liga”>Surabaya</p>
</body>
</html>
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
<html>
<head>
<title>Selektor 2 Kelas</title>
<style type=”text/css”>
.umum {
color : yellow;
}
.khusus {
background-color : blue;
}
<style>
</head>
<body>
<div class = “umum khusus”>Umum, ya. Khusus, ya.</div>
</body>
</html>
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
Praktikum Dasar Web
Berikut ini adalah contoh penggunaan id selector pada dokumen HTML:
<html>
<head>
<style type="text/css">
#green{
color:green
}
p#para1{
text-align:center;
color:red
}
</style>
</head>
<body>
<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>
</body>
</html>
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Contoh penggunaan id dalam tag <div>
<html>
<head>
<title>Selektor ID</title>
<style type=”text/css”>
.isi {
background-color : green;
}
#bagian1 {
text-align : left ;
color : white ;
}
#bagian2 {
text-align : right ;
color : yellow ;
}
<style>
</head>
<body>
<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>
<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>
</div>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
5
Praktikum Dasar Web
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
<html>
<head>
<title>Selektor Universal</title>
<style type=”text/css”>
*{
color : blue ;
}
<style>
</head>
<body>
<h1>Selektor Universal</h1>
<p>Paragraf</p>
<div>Divisi</div>
</body>
</html>
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
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.
1. Groupping
//Internal Style Sheet
<html>
<head>
<title>Belajar CSS-Groupping</title>
<style type="text/css">
h1,h2,h3{
font-family:verdana;
color:green
}
h4,h5,h6{
font-family:arial;
color:red
}
</style>
</head>
<body>
<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>
</body>
</html>
2. Selector dengan Class
A.
//Internal Style Sheet
<html>
<head>
<title>Belajar CSS-Class[1]</title>
<style type="text/css">
p.kanan{
text-align: right;
}
p.kiri{
text-align: left;
}
</style>
</head>
<body>
<p class="kanan">Paragraf ini memakai right alignment </p>
<p class="kiri">Paragraf ini memakai left alignment </p>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
7
Praktikum Dasar Web
3. Selector dengan menggunakan Id
A.
//Internal Style Sheet
<html>
<head>
<title>Belajar CSS-Menggunakan ID[1]</title>
<style type="text/css">
#kanan{
text-align: right;
}
</style>
</head>
<body>
<h1 id=”kanan”>Judul ini memakai right alignment</h1>
<p id=”kanan”>Paragraf ini memakai right alignment</p>
</body>
</html>
B.
<html>
<head>
<title>Belajar CSS-Menggunakan ID[2]</title>
<style type="text/css">
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
}
</style>
</head>
<body>
<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>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
8
Praktikum Dasar Web
SOAL LATIHAN
1.
Perhatikan dokumen berikut
<html>
<head>
<title>Selektor</title>
<style type=”text/css”>
.biru {
Color : green ;
}
</head>
<body>
<div>Biarkan aku seperti ini</div>
<div class=”hijau”>
Hijaulah negeriku. Ijo royo-royo !
</div>
</body>
</html>
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>
<div>Anakku kedua Siti</div>
<div>Anakku ketiga Johan</div>
</div>
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
