PRAKTIKUM : PRAKTIKUM CSS 1 NAMA : KELAS : TANGGA
advertisement
PRAKTIKUM
NAMA
KELAS
TANGGAL PRAKTIKUM
:
:
:
:
PRAKTIKUM CSS 1
___________________________________
___________________________________
___________________________________
A. TUJUAN
1. Siswa dapat mengenal, memahami fungsi dan manfaat CSS dalam halaman web.
2. Siswa dapat membuat format template sederhana pada halaman web.
B. PENDAHULUAN
CSS adalah kependekkan dari Cascading Style Sheet. Dengan menggunakan CSS kita dapat menciptakan
sebuah format template pada setiap halaman web Anda dengan sangat mudah dan dinamis. Di dalam
halaman web terdapat terdapat beberapa elemen HTML yang kesemuanya itu dapat dikendalikan dengan
menggunakan sebuah bahasa script CSS, dalam pengaturannya biasanya style disimpan di dalam sebuah file
yang bernama style sheet.css. Style sheet ini dapat juga berupa file maupun embeded bersama tag HTML
itu sendiri.
Dengan menggunakan CSS kita dapat menghemat pekerjaan pengaturan web, karena HTML hanya
mengijinkan untuk pengaturan halaman per-elemen saja. Jadi jika kita membuat sebuah web yang besar
kita akan dipersulit dengan pengaturan halaman baik itu warna background, jenis text, maupun ukuran
text.
Dengan adanya kesulitan di atas, maka CSS telah memberi solusi. Jika mengggunakan CSS, cukup sekali
saja dalam menentukan sebuah bentuk Lay Out halaman web kita yang kemudian semua halaman akan
dihubungkan dengan file CSS yang telah kita buat. Selain itu kita juga diberikan kemudahan dalam
mengelola web. Jadi kapan pun kita dapat mengganti tampilan halaman dengan hanya merubah file
dokumen Style sheet yang telah kita buat.
a.
Di dalam HTML dikenal tiga macam teknik dalam penulisan dokumen Style sheet, yaitu:
External Style Sheet
External Style Sheet atau juga kita dapat menyebutnya dengan istilah Linking Style Sheet. Kita sebut
External karena pada teknik ini kita menuliskan semua efek style di dalam sebuah dokumen tersendiri
yang kita panggil dengan menggunakan Link. Teknik pemanggilannya kita deklarasikan di dalam tag
head.
<link rel=”stylesheet” type=”text/css” href=”css_file.css”>
b.
Internal style sheet (inside the <head> tag)
Internal Style Sheet atau sering juga disebut Embeding Style Sheet adalah sebuah metode penulisan
dokumen Style CSS pada satu halaman HTML, dokumen ini diletakkan bercampur dengan tag HTML
yang dibaca diantara tag <head></head>.
<style type=”text/css”>
…definisi style…
</style>
c.
Inline style (inside an HTML element)
Inline Style adalah sebuah metode penulisan CSS langsung pada komponen tag HTML. Akan tetapi cara
ini kurang begitu digunakan karena proses penulisannya yang langsung dituliskan di dalam elemen
HTML sehingga mempersulit apabila kita memiliki dokumen HTML yang begitu banyak. Jadi dengan
metode ini kita harus meletakkan efek-efek yang kita inginkan di dalam setiap tag HTML yang kita
inginkan. Teknik penulisannya adalah sebagai berikut:
<tag STYLE=definisi_style…>
teks
</tag>
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. Berikut ini terdapat dua buah dokumen yang memiliki tujuan sama, yaitu menangani ukuran huruf
di dalam halaman web. Pada dokumen A tidak memasukkan elemen CSS, sedang pada dokumen B
menggunakan style CSS.
A.
B.
<html>
<head>
<title>Tanpa menggunakan CSS</title>
</head>
<body>
<h1><font face="verdana" color="red">SMK Negeri 2 Surabaya</font></h1>
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 1 Surabaya.
</body>
</html>
<html>
<head>
<title>Menggunakan CSS</title>
<style type="text/css">
h1
{
font-family: verdana;
color: red
}
</style>
</head>
<body>
<h1>SMK Negeri 2 Surabaya</h1>
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 2 Surabaya.
</body>
</html>
2. External Style Sheet
ex1.css
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css">
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
2
Praktikum Dasar Web
3. Internal Style Sheet
A.
<html>
<head>
<style type="text/css">
h1 {
text-decoration: overline;
text-align: center;
color: red
}
h2 {
text-decoration: line-through;
text-align: left;
color: green
}
h3 {
text-decoration: underline;
text-align: right
}
hr {
color:pink
}
</style>
</head>
<body>
<h1>This is header 1</h1>
<hr>
<h2>This is header 2</h2>
<hr>
<h3>This is header 3</h3>
<hr>
</body>
</html>
B.
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
P{
color:red;
}
em {
color:green;
}
b {
color:blue;
}
</style>
</head>
<body>
<p>
Ini adalah paragraf pertama. <em>Ini adalah teks dicetak miring dan hijau.</em> Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. <b>Ini adalah teks dicetak tebal dan biru.</b> Ini adalah paragraf pertama.
</p>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
3
Praktikum Dasar Web
4. Inline Style
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1 style="color:red; text-align:center;">Paragraf Pertama</h1>
<p style="color:white; background:red; font-family:arial;">
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
</p>
<h1 style="color:orange; text-align:right;">Paragraf Kedua</h1>
<p style="color:yellow; background:orange; font-family:verdana;">
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
</p>
</body>
</html>
D. TUGAS PRAKTIKUM
1. Buat tampilan halaman web berikut ini dengan menggunakan CSS, dalam format:
a. Inline Style
b. Internal Style Sheet
c. External Style Sheet
h1
Verdana
10pt
E. KESIMPULAN PRAKTIKUM
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
4
