LAPORAN
PRAKTIKUM
PEMOGRAMAN
WEB
Modul
2
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 (Hyperlink)
1. Buka
aplikasi Notepad
2. Masukkan
gambar ber-ekstensi .jpg pada folder L200120111, karena PC saya tidak terhubung
dengan internet saya menggunakan gambar yang tersedia di PC.
3. Ketik
scipt berikut :
<HTML>
<HEAD><TITLE>Hyperlink</TITLE><HEAD>
<BODY>
<H1>Ini adalah halaman
1</H1>
</BR>
Untuk pergi ke halaman 2 klik
<a href='halaman 2.html'
target='_top'>Di sini
</a>
</BR>
Untuk pergi ke halaman Google silahkan
klik gambar dibawah :
</BR>
<a href='http://www.google.com'
target='_blank'> <img src='google.jpg' widht='200' height='50'
alt='google'></a>
</BR>
Untuk melihat referensi tentang
pemograman web silahkan klik teks dibawah : </BR>
<a href='#referensi'><b>Lihat
Referensi Tentang Pemograman Web</b></a>
</BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR>
<a
name='referensi'><b>Referensi Pemograman Web</b></a>
</BR>
Disini adalah Teks Berisi Tentang Pemograman.Disini
adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
Disini adalah Teks Berisi Tentang
Pemograman.Disini adalah Teks Berisi Tentang Pemograman.
</BR>
</BODY>
</HTML>
4. Simpan
dengan nama Hyperlink.html pada folder L200120111.
5. Buka
file dengan Web Broser
HASIL:
6. Buka
kembali notepad baru dan ketik scrip berikut:
<HTML>
<HEAD><TITLE>Hyperlink</TITLE></HEAD>
<BODY>
<HI>INI ADALAH HALAMAN
2</H1>
</BR>
UNTUK KEMBALI KEHALAMAN 1 SILAHKAN KLIK
DIBAWAH INI:
</BR>
<a href='halaman.html'
target='_top'>KEMBALI</A>
</BODY.
<HTML>
7. Simpan
file dengan nama halaman2.html di dalam folder L200120111
8. Buka
dengan menggunakan web browser.
HASIL:
P B. Percobaan 2 (Form)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<html>
<head>
<title>Form</title>
</head>
<body>
<h2 align='center'><font
color='#9966ff'> Free Registation</font></h2>
<form action="proses.php"
metohd="post" name="form">
<table width="68%"
border="0" align="center" cellpadding="0">
<tr>
<td
width="15%">nama</td>
<td
width="2%">;<td>
<td
width="83%"><input name="txtNama"
type="text" id="txtNama"></td>
</tr>
<tr>
<td>tgl 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">
</tr>
<tr>
<td>Alamat</td>
<td> :</td>
<td><textarea name="txtAlamat"
cols="40" rows="2"
id="txtAlamat"></textarea></td>
</tr>
<tr>
<td>kota</td>
<td>:</td>
<td><input
name="txtKota" type="text"
id="txtKota"></td>
</tr>
<tr>
<td> pekerjaan </td>
<td>:</td>
<td><select
name="cboJob" id="cboJob">
<option>Tani</option>
<option>karyawan</option>
<option>nelayan</option>
</select>
</tr>
<tr>
<td>jenis kelamin</td>
<td>:</td>
<td><input
name="radJk" type="radio" value="1" checked>
Laki-laki
<input name="radJk"
type="radio" value="2" checked>
Perempuan</td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input
name="cekReading" type="checkbox"
id="cekReading
value="1">
Reading</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input
name="cekSport" type="checkbox"
id="cekSport
value="2">
Sport</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input
name="cekSing" type="checkbox"
id="cekSing value="3">
Singing</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input
name="cekTrevel" type="checkbox"
id="cekTrevel
value="4">
Treveling</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 Form.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
P C. Percobaan 3 ( Animasi)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<HTML>
<HEAD><TITLE>ANIMASI</TITLE></HEAD>
<BODY>
<marquee>Teks ini
Berjalan</marquee>
</br>
<blink>teks ini
berkedip-kedip</blink>
</BODY>
</HTML>
3. Simpan
dengan nama Animasi.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
TUGAS
A. Tuliskan
script HTML untuk membuat gambar berjalan yang mana gambar tersebut adalah
Hyperlink menuju alamat www.yahoo.com
(ukuran gambar 100 x 50 pixel, dan target hyperlink pada jendela yang sama)
1. Buka
aplikasi Notepad
2. Ketik
scipt berikut :
<HTML>
<HEAD><TITLE>ANIMASI</TITLE></HEAD>
<BODY>
<marquee><img src='google.jpg'
width='100' height='50'
alt='google'></a></marquee>
</BODY>
</HTML>
3. Simpan
dengan nama Hyperlink.html pada folder L200120111.
4. Buka
file dengan Web Broser
HASIL:
B. Jelaskan
fungsi dari tag dan atribuk berikut:
|
No
|
Tag/atribuut
|
fungsi
|
|
1
|
<a
href=’halaman2.html’>
|
untuk menentukan
alamat URL yang dituju yaitu halaman 2
|
|
2
|
<a
href=’http://www.google.com’>
|
untuk menentukan
alamat URL yang dituju yaitu google
|
|
3
|
<a
href=’referensi’>
|
untuk menentukan
alamat URL yang dituju yaitu referensi
|
|
4
|
Target=’_blank’
|
Untuk membuat link
yang kemudian akan meloncat ke jendela browser baru
|
|
5
|
<INPUT
type=’checkbox’>
|
Untuk
membuat kotak-kotak chek
|
|
6
|
Name=’cekSing’
|
Untuk
memunculkan opsi Singing berupa checkbox
|
|
7
|
<INPUT type
=’tekt’>
|
Untuk
membuat data berupa isian berupa text
|
|
8
|
Id=’txtKota’
|
Untuk
memunculkan text bernama Kota
|
|
9
|
Maxlenght=’20’
|
Untuk
menuliskan isian pada kotak isian dengan maksimal 20 karakter
|
|
10
|
<TEXTAREA></TEXTAREA>
|
Untuk
pengisian teks atau karakter yang panjang seperti komentar dan email
|
|
11
|
COLS=’20’
|
Untuk
menentukan lebar kolom text area
|
|
12
|
|
Untuk
pengganti karakter spasi
|
|
13
|
<marquee>.
. .</marquee>
|
Untuk
membuat teks atau gambar berjalan
|
|
14
|
<blink>
. . .</blink>
|
Untuk
membuat teks atau gambar berkedip
|
