LAPORAN PRAKTIKUM
PEMOGRAMAN WEB
MODUL 2
Nama : Alfi Nur Rohmat
NIM : L200120074
Kelas : D
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
A.
TUJUAN
Mengetahui dan
memahami tag-tag dalam HTML lebih lanjut, dan mengetahui fungsi dari tag-tag
tersebut.
B. PERCOBAAN
Percobaan
1 (Hyperlink)
Langkah-langkahpercobaan
:
1.
Cari gambar logo Google ber-ekstensi.jpg dan simpan di
folder yang sama dengan file percobaan.
2.
Ubah nama gambar menjadi “Google.jpg”
3.
Buka aplikasi Notepad
4.
Ketik script berikut:
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<h1>Ini
adalah halaman 1</h1>
</br>
untuk
pergi ke halaman 2 klik <a href='halaman2.html' target='_top'>Di
sini</a>
</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 pemrograman web silahkan klik teks di bawah :
</br>
<a
href='#referensi'><b>Lihat Referensi Tentang Pemrograman
Web</b></a>
</br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br>
<a
name='referensi'><b>Referensi Pemrograman Web</b></a>
</br>
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
Di sini
adalah teks berisi tentang referensi pemrograman web.
</br>
</body>
</html>
5.
Simpan file dengan nama halaman1.html
6.
Buka kembali notepad baru. Kemudian script berikut
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<h1>Ini adalah halaman 2</h1>
</br>
Untuk kembali ke halaman 1 silahkan klik di bawah ini
:</br>
<a href='halaman1.html'
target='_top'>Kembali</a>
</body>
</html>
7.
Simpan file dengan nama halaman2.html
Percobaan 2 (Form)
Langkah-langkahpercobaan
:
1.
Bukaaplikasi
Notepad.
2.
Ketikkan
Script berikut di dalamNotepad :
<html>
<head>
<title>Form</title>
</head>
<body>
<h2
align='center'><font color='#9966FF'>Free
Registration</font></h2>
<form
action='proses.php' method='post' name='form'>
<table
widht='68%' border='0' align='center'>
<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'></td>
</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='cobjob'>
<option>Tani</option>
<option>Nelayan</option>
<option>Karyawan</option></select></td>
</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='cekTravel' type='checkbox' id='cekTravel
value='4'>Traveling</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
4.
Buka file yang sudah di simpan
Percobaan 3 (Animasi)
Langkah-langkahpercobaan :
1.
Buka aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head>
<title>Animasi</title>
</head>
<body>
<marquee>Teks
ini berjalan</marquee>
</br>
<blink>
Teks ini berkedip-kedip</blink>
</body>
<html>
3. Simpan file dengannama animasi.html.
4.
Buka
file yang sudahdisimpanmenggunakan browser.
5.
Gambarhasilnya
di lembarkerjapercobaan.
C. TUGAS
1.
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 tyarget hyperlink pada
jendela yang sama)
<html>
<head>
<title>Tugas
3</title>
</head>
<body>
<marquee><a
href='https://id.yahoo.com/' target='_top'><img src='yahoo.jpg'
widht='100'
height='50' alt='google'></a></marquee>
</body>
<html>
2.
Jelaskanfungsidari
tag atauatributberikut :
No
|
Tag/Atribut
|
Fungsi
|
1
|
<a href=’halaman2.html’>
|
Membuat link menuju ke halaman 2
|
2
|
<a href=”http://www,google.com’>
|
Membuat link menuju ke halaman google
|
3
|
<a href=”referensi’>
|
Membuat link menuju ke halaman referensi
|
4
|
Target=’_blank’
|
Target hyperlink pada jendela baru
|
5
|
<INPUT type=’checkbox’>
|
Kotak centang
|
6
|
Name=’cekSing’
|
Untuk menuliskan nilai
|
7
|
<INPUT type=;text’
|
Satu baris field input yang pengguna dapat memasukan
teks
|
8
|
Id=’TxtKota”
|
Memberi identitas
|
9
|
Maglenght=’20’
|
Maximal karakter yang bisa di masukan adalah 20
karakter
|
10
|
<TEXTAREA> . . . </ TEXTAREA >
|
Untuk pengisian teks/karakter yang panjang seperti
komentar dan email
|
11
|
Cols=’20
|
Teks area memiliki lebar 20 karakter
|
12
|
 
|
karakter
spesial untuk spasi yang tak dapat dipecah
|
13
|
<marquee>....</marquue>
|
Membuat teks berjalan
|
14
|
<blink>....../blink>
|
Membuat teks berkedip
|
