LAPORAN PRAKTIKUM
PEMOGRAMAN WEB
MODUL 5
Nama : Alfi Nur Rohmat
NIM : L200120074
Kelas : D
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
A.
TUJUAN
Mengetahui
dan mengetahui fungsi dari CSS (Cascading
Style Sheets) sebagai bahasa pemograman guna mengatur desain dan layout web
B. PERCOBAAN
Percobaan
1 (Border)
Langkah-langkahpercobaan
:”
1.
Buka aplikasi Notepad
2.
Ketik script berikut:
<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.outset{border-style:outset}
</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'>An inset border</p>
<p class='outset'>An outset border</p>
</body>
</html>
3.
Simpan file dengan nama border.html
4.
Buka file menggunakan browser
Percobaan 2 (Gambar)
Langkah-langkahpercobaan
:
1.
Letakkan sebuah file gambar berektensi .jpg didalam
folder yang sudah dibuat. Beri nama file gambar tersebut dengan nama gambar.jpg
2.
Bukaaplikasi
Notepad.
3.
Ketikkan
Script berikut di dalamNotepad :
<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 dengan nama gambar.html
5.
Buka file yang sudah di simpan
Percobaan 3 (Bayangan)
Langkah-langkahpercobaan :
1.
Buka aplikasi Notepad.
2.
Ketikkan
Script berikut di 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></br></br>
<div
class='posisi2'>Pemrograman Web dengan CSS</div></br>
<div
class='posisi3'>Pemrograman Web dengan CSS</div></br></br>
<h1>Efek
Bayangan dengan CSS3</h1>
</body>
</html>
3.
Simpan
file dengannama bayangan.html.
4.
Buka
file yang sudahdisimpanmenggunakan browser.
5.
Gambarhasilnya
di lembarkerjapercobaan.
Percobaan 4 (Hyperlink)
Langkah-langkahpercobaan :
1.
Buka aplikasi Notepad.
2.
Ketikkan
Script berikut di 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>
3.
Simpan
file dengannama hyperlink.html.
4.
Buka
file yang sudahdisimpanmenggunakan browser.
5.
Gambarhasilnya
di lembarkerjapercobaan.
Percobaan 5 (Form Menggunakan Eksternal Style)
Langkah-langkahpercobaan :
1.
Buka aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
body{background:grey}
h2{font-family:calibri;
background-color:white;
text-align:center}
table{background:white}
.td{font-weight:bold}
3.
Simpan
file dengannama style.css.
4.
Buka kerja baru di notepad, kemudian ketik script berikut
<html>
<head>
<title>Form</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.ridge{border-style:ridge}
p.inset{border-style:inset}
p.outset{border-style:outset}
</style>
<link rel='stylesheet' type='text/css'
href='style.css'>
</head>
<body>
<p class='ridge'><h2><marquee>Free
Registration</marquee></h2></p>
<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>
<p class='ridge'><td class='td'>Tgl Lahir</td></p>
<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="txtBTahun" 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 yang sudah disimpanmenggunakan
browser.
7.
Gambarhasilnya
di lembarkerjapercobaan.
C. TUGAS
1.
Buatlah border form pada percobaan 5 menggunakan salah
satu style border pada percobaan 1. Tuliskan scripnya
<html>
<head>
<title>Form</title>
<style type="text/css">
p.dotted {border-style:dotted}
p.ridge{border-style:ridge}
p.inset{border-style:inset}
p.outset{border-style:outset}
</style>
<link rel='stylesheet' type='text/css'
href='style2.css'>
</head>
<body>
<p class='ridge'><h2><marquee>Free
Registration</marquee></h2></p>
<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>
<p class='ridge'><td class='td'>Tgl Lahir</td></p>
<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="txtBTahun" 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>
Tidak ada komentar:
Posting Komentar