Memahami
dan mengetahui fungsi dari CSS sebagai bahasa pemrograman guna mengatur desain
dan layout web.
B.
LANDASAN
TEORI
Apa itu CSS ?
Cascading Style Sheet (CSS)merupakan
salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan
kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya
heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat
digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bahasa HTMLdan XHTML.
CSS dapat mengendalikan ukuran gambar,
warna body teks, warna tabel, ukuran border, warna border, warna hyperlink,
warna mouse over, spasi antar paragraf, spasi antar teks, margin
kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet
yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan
kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Keuntungan CSS
-
Memudahkan
dalam penggantian format secara keseluruhan.
-
Lebih
praktis.
-
Untuk
mengubah tampilan web, tanpa mengubah layout utamanya.
C.
ALAT
DAN BAHAN
Alat dan bahan
yang digunakan untuk praktikum adalah :
1.
PC (Personal Computer)
2.
Sistem Operasi Windows
3.
Browser (Mozila Firefox/Chrome)
4.
Notepad
5.
Server local XAMPP
6. buku praktikum
D.
LANGKAH-LANGKAH
PRAKTIKUM
1. Percobaan 1 border
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama border.html
b. hasilnya
2. Percobaan 2 Gambar
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama gambar.html
dan simpan gambarnya pada satu folder
b. hasilnya
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama border.html
<html>
<head>
<title>Border</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.dashes {border-style:dashes}
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.outset {border-style:outset}
</style>
</head>
<body>
<p class='dotted'> A dotted border </p>
<p class='dashes'> A dotted dashes </p>
<p class='solid'> A dotted solid </p>
<p class='double'> A dotted double </p>
<p class='groove'> A dotted groove </p>
<p class='ridge'> A dotted ridge </p>
<p class='inset'> A dotted inset </p>
<p class='outset'> A dotted outset </p>
</body>
</html>
<head>
<title>Border</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.dashes {border-style:dashes}
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.outset {border-style:outset}
</style>
</head>
<body>
<p class='dotted'> A dotted border </p>
<p class='dashes'> A dotted dashes </p>
<p class='solid'> A dotted solid </p>
<p class='double'> A dotted double </p>
<p class='groove'> A dotted groove </p>
<p class='ridge'> A dotted ridge </p>
<p class='inset'> A dotted inset </p>
<p class='outset'> A dotted outset </p>
</body>
</html>
b. hasilnya
2. Percobaan 2 Gambar
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama gambar.html
dan simpan gambarnya pada satu folder
<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>
b. hasilnya
3. Percobaan 3 bayangan
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama bayangan.html
<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 css3</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 css3</h1>
</body>
</html>
b. hasilnya
4. Percobaan 4 Hyperlink
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama hyperlink.html
<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>
b. hasilnya
5. Percobaan 5 Form
langkahnya :
a. ketik script dibawah ini kemudian simpan dengan nama form.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="68%" border="0" align="center" cellpadding="0">
<tr>
<td class='td' width="15%">Nama</td>
<td class='td' width="2%">:</td>
<td class='td' width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>tanggal lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlength="2">
/
<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><textarea name="txtKota"type="text" id="txtKota"></textarea></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 class='td' width="2%">:</td>
<td class='td' width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td class='td'>tanggal lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlength="2">
/
<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><textarea name="txtKota"type="text" id="txtKota"></textarea></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>
b. kemudian ketik script style.css
body{background:blue}
h2 {font-family: comis sans ms; background-color:red; text-align:center}
table{background:grey}
.td{font-weight:bold}
h2 {font-family: comis sans ms; background-color:red; text-align:center}
table{background:grey}
.td{font-weight:bold}
c. hasilnya
D. TUGAS
buat form pada percobaan 5 menggunakan salah satu style css pada percobaan 1a. form.html dari percobaan 5
b. kemudian edit style.css nya
body{background:blue}
h2 {font-family: comis sans ms; background-color:red; text-align:center}
table{background:grey; border:solid}
.td{font-weight:bold}
h2 {font-family: comis sans ms; background-color:red; text-align:center}
table{background:grey; border:solid}
.td{font-weight:bold}
c. hasilnya
Tidak ada komentar:
Posting Komentar