LAPORAN
PRAKTIKUM
PEMOGRAMAN
WEB
Modul
5
NAMA : FITRIA DEWI PROBOWATI
NIM : L200120111
KELAS : F
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS
MUHAMMADIYAH SURAKARTA
2014
LANGKAH-LANGKAH
PRAKTIKUM
Telebih
dahulu membuat folder dengan nama L200120111 di dekstop untuk memudahkan
pencarian.
A.
Percobaan 1 (Border)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<html>
<head>
<title>
Border
</title>
<style>
p.dotted
{border-style: dotted}
p.dashed
{border-style: dashed}
p.solid
{border-style : solid}
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 Dotted Border</p>
<p
class='solid'>A Dotted Border</p>
<p
class='groove'>A Dotted Border</p>
<p
class='ridge'>A Dotted Border</p>
<p
class='inset'>A Dotted Border</p>
<p
class='outset'>A Dotted Border</p>
</body>
</html>
3. Simpan
dengan nama border.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
B. Percobaan 2 (Gambar)
1. Letakkan
gambar ber-ekstensi .jpg kedalam folder L200120111.
2. Buka
aplikasi Notepad
3. Ketik
scipt berikut :
<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 pada folder L200120111.
5. Buka
file dengan Web Broser
HASIL:
C.
Percobaan 3 (Bayangan)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<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>
3. Simpan
dengan nama bayangan.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
D.
Percobaan 4 (Hyperlink)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<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 target="_blank"
href="form.html"> tombol 1 </a>
<a href="#"> tombol 2
</a>
<a href="#"> tombol 3
</a>
<a href="#"> tombol 4
</a>
</body>
</html>
3. Simpan
dengan nama hyperlink.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
E.
Percobaan 5 (Form Menggunakan Eksternal
Style)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<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>
3. Simpan
dengan nama bayangan.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
TUGAS
A. Buatlah
border form pada percobaan 5 menggunakan salah satu style border pada percobaan
1.
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<html>
<head>
<title>
Form</title>
<link
rel='stylesheet' type='text/css' href='style2.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="1" cellspacing="1">
<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>
3. Simpan
dengan nama border.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
