MODUL 5
CSS
(Cascading Style Sheets)
A.
TUJUAN
Memahami dan mengetahui fungsi dari CSS
(Cascading Style Sheets) sebagai
bahasa pemrograman guna mengatur desain dan layout web.
B.
LANDASAN TEORI
CSS adalah sebuah cara untuk memisahkan
isi dengan layout dalam halaman-halaman web yang dibuat.
Cara
Kerja CSS
Cara kerja CSS sangat mudah, karena CSS
hanya membutuhkan style sebagai penentu dari font, warna, dan format-format
lain untuk memformat atribut sebuah halaman web yang dibuat.
Penempatan
CSS dalam HTML
Cara penempatan dalam HTML adalah dengan
menggunakan beberapa cara diantaranya adalah
1.
Inline
Style
2.
Internal
Style
3.
Import
Style
4.
Eksternal
Style
C.
ALAT DAN BAHAN
1.
Laptop
2.
Aplikasi
Notepad
3.
Web
Browser
4.
Lembar
kerja percobaan
D.
LANGKAH-LANGKAH
PRAKTIKUM
Percobaan
1 (Border)
1.
Buka
Aplikasi Notepad
2.
Ketik
script berikut ke dalam notepad
<html>
<head>
<title>Border</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.dashed {border-style:dashed}
p.solid {border-style:solid}
p.double {border-style:double}
p.groove {border-style:groove}
p.ridge {border-style:ridge}
p.inset {border-style:inset}
p.uotset {border-style:uotset}
</style>
</head>
<body>
<p class='dotted'>A dotted border</p>
<p class='dashed'>A dashed border</p>
<p class='solid'>A solid border</p>
<p class='double'>A double border</p>
<p class='groove'>A groove border</p>
<p class='ridge'>A ridge border</p>
<p class='inset'>A inset border</p>
<p class='uotset'>A uotset border</p>
</body>
</html>
<head>
<title>Border</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.dashed {border-style:dashed}
p.solid {border-style:solid}
p.double {border-style:double}
p.groove {border-style:groove}
p.ridge {border-style:ridge}
p.inset {border-style:inset}
p.uotset {border-style:uotset}
</style>
</head>
<body>
<p class='dotted'>A dotted border</p>
<p class='dashed'>A dashed border</p>
<p class='solid'>A solid border</p>
<p class='double'>A double border</p>
<p class='groove'>A groove border</p>
<p class='ridge'>A ridge border</p>
<p class='inset'>A inset border</p>
<p class='uotset'>A uotset border</p>
</body>
</html>
3.
Simpan
file denngan nama border.html
4.
Buka
file dengan menggunakan browser
5.
Perhatikan
hasilnya dan printscreen hasilnya
Percobaan
2 (Gambar)
1.
Letakkan
sebuah file gambar ber-ekstensi .jpg ke dalam folder yang telah dibuat. Beri
nama file tersebut dengan nama gambar.jpg
2.
Buka
Aplikasi Notepad
3.
Ketik
script berikut ke dalam notepad
<html>
<head>
<title>Gambar</title>
<style type="text/css">
body
{
background-image:url('gambar.jpg');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
</style>
</head>
<body>
</body>
</html>
<head>
<title>Gambar</title>
<style type="text/css">
body
{
background-image:url('gambar.jpg');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
</style>
</head>
<body>
</body>
</html>
4.
Simpan
file denngan nama gambar.html
5.
Buka
file dengan menggunakan browser
6.
Perhatikan
hasilnya dan printscreen hasilnya
Percobaan 3 (Bayangan)
1.
Buka
Aplikasi Notepad
2.
Ketik
script berikut ke dalam notepad
<html>
<head>
<title>Bayangan</title>
<style type="text/css">
h1
{text-shadow: 5px 5px 5px #ff0000}
.posisi1
{position:relative; top:15; left:25; z-index:10;
color:#000000; font-family:arial; font-size:25pt}
.posisi2
{position:relative; top:-22; left:28; z-index:6;
color:#00ccff; font-family:arial; font-size:25pt}
.posisi3
{position:relative; top:-59; left:29; z-index:6;
color:#ff00ff; font-family:arial; font-size:25pt}
</style>
</head>
<body>
<div class='posisi1'>Pemrograman WEB dengan CSS</div>
<div class='posisi2'>Pemrograman WEB dengan CSS</div>
<div class='posisi3'>Pemrograman WEB dengan CSS</div>
<h1>Efek bayangan dengan CSS 3</h1>
</body>
</html>
<head>
<title>Bayangan</title>
<style type="text/css">
h1
{text-shadow: 5px 5px 5px #ff0000}
.posisi1
{position:relative; top:15; left:25; z-index:10;
color:#000000; font-family:arial; font-size:25pt}
.posisi2
{position:relative; top:-22; left:28; z-index:6;
color:#00ccff; font-family:arial; font-size:25pt}
.posisi3
{position:relative; top:-59; left:29; z-index:6;
color:#ff00ff; font-family:arial; font-size:25pt}
</style>
</head>
<body>
<div class='posisi1'>Pemrograman WEB dengan CSS</div>
<div class='posisi2'>Pemrograman WEB dengan CSS</div>
<div class='posisi3'>Pemrograman WEB dengan CSS</div>
<h1>Efek bayangan dengan CSS 3</h1>
</body>
</html>
3.
Simpan
file denngan nama bayangan.html
4.
Buka
file dengan menggunakan browser
5.
Perhatikan
hasilnya dan printscreen hasilnya
Percobaan 4 (Hyperlink)
1.
Buka
Aplikasi Notepad
2.
Ketik
script berikut ke dalam notepad
<html>
<head>
<title>Hyperlink</title>
<style type="text/css">
body
{font-variant:small-caps}
A:link
{text-decoration:none; color:yellow; background-color:lime}
A:visited
{text-decoration:none; color:green; background-color:lime}
A:active
{text-decoration:none; color:yellow; background-color:lime}
A:hover
{text-decoration:none; color:white; background-color:lime}
</style>
</head>
<body>
Hyperlink Menggunakan CSS</br>
<a href="#">tombol 1</a>
<a href="#">tombol 2</a>
<a href="#">tombol 3</a>
<a href="#">tombol 4</a>
</body>
</html>
<head>
<title>Hyperlink</title>
<style type="text/css">
body
{font-variant:small-caps}
A:link
{text-decoration:none; color:yellow; background-color:lime}
A:visited
{text-decoration:none; color:green; background-color:lime}
A:active
{text-decoration:none; color:yellow; background-color:lime}
A:hover
{text-decoration:none; color:white; background-color:lime}
</style>
</head>
<body>
Hyperlink Menggunakan CSS</br>
<a href="#">tombol 1</a>
<a href="#">tombol 2</a>
<a href="#">tombol 3</a>
<a href="#">tombol 4</a>
</body>
</html>
3.
Simpan
file denngan nama hyperlink.html
4.
Buka
file dengan menggunakan browser
5.
Perhatikan
hasilnya dan printscreen hasilnya
Percobaan 5 (Form
Menggunakan Eksternal Style)
1.
Buka
Aplikasi Notepad
2.
Ketik
script berikut ke dalam notepad
body
{background:blue}
h2
{font-famiy:comic sans ms;
background-color:white;
text-align:center}
table
{background:white;}
.td
{font-weight:bold}
{background:blue}
h2
{font-famiy:comic sans ms;
background-color:white;
text-align:center}
table
{background:white;}
.td
{font-weight:bold}
3.
Simpan
file denngan nama style.css
4.
Buka
kembali lembar kerja baru notepad, kemudian ketik script berikut
<html>
<head>
<title>Form</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h2><marquee>Free Registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="8" maxlength="4">
/<input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="2">
/<input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>
</tr>
<tr>
<td class='td'>Alamat</td>
<td>:</td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td class='td'>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Form</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h2><marquee>Free Registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="8" maxlength="4">
/<input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="2">
/<input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>
</tr>
<tr>
<td class='td'>Alamat</td>
<td>:</td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td class='td'>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
5.
Simpan
file dengan nama form.html
6.
Buka
file form.html dengan menggunakan
browser
7.
Perhatikan
hasilnya dan printscreen hasilnya
E.
TUGAS
1.
Buatlah
border form pada percobaan 5 menggunakan salah satu style border pada percobaan
1. Tulis scriptnya dan printscreen hasilnya.
style.css
body
{background:blue}
h2
{font-famiy:comic sans ms;
background-color:white;
border:2px solid;
text-align:center}
table
{background:white;
padding:20px 20px 20px 20px;
border:2px dotted}
.td
{font-weight:bold}
{background:blue}
h2
{font-famiy:comic sans ms;
background-color:white;
border:2px solid;
text-align:center}
table
{background:white;
padding:20px 20px 20px 20px;
border:2px dotted}
.td
{font-weight:bold}
form.css
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h2><marquee>Free Registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="40%" border="0" align="center" cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="date" id="txtTgl" size="8" maxlength="4"></td>
</tr>
<tr>
<td class='td'>Alamat</td>
<td>:</td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td class='td'>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Form</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h2><marquee>Free Registration</marquee></h2>
<form action="proses.php" method="post" name="form">
<table width="40%" border="0" align="center" cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="date" id="txtTgl" size="8" maxlength="4"></td>
</tr>
<tr>
<td class='td'>Alamat</td>
<td>:</td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td class='td'>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
0 comments:
Posting Komentar