LAPORAN
PRAKTIKUM PEMROGRAMAN WEB
HTML
(Hypertext Markup Language)
Disusun
Oleh :
Nama
: Rafli Setiadi
NIM
: L200120106
FAKULTAS
KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS
MUHAMMADIYAH SURAKARTA
2014/2015
A. Tujuan
Mengetahui dan
memahami tag-tag HTML sebagai bahasa pemrograman untuk membuat halaman
web statis.
B. Landasan Teori
Dalam mengakses
infromasi dari dunia internet, pengguna akan menuju ke sebuah alamat unik
internet yang disebut dengan nama domain dan akan menemukan informasi berbentuk
teks, gambar, animasi bergerak ataupun suara dalam media yang disebut
situs/website. Wibsite ini dibuka melalui sebuah program penjelajah yang berada
di sebuah komputer. Program penjelajar bisa berupa : Mozila, Googlechrome,
Internet Explore, dll.
.
C. ALAT dan BAHAN
1.
PC
2.
Sistem
Operasi Windows 7
3.
Browser
Mozilla Firefox/Chrome
4.
Notepad
5.
File
gambar ber-ekstensi .jpg
6.
Lembar
kerja percobaan
D. LANGKAH-LANGKAH PRAKTIKUM
Percobaan 1 (Membuat Hyperlink)
1.
Cari gambar, misal
gambar google ekstensi terserah anda, disini nama file gambar saya google.png.
contoh gambar :
2.
Buka aplikasi
Notepad++
3.
Save dulu filenya pada
save as file type diganti dengan HyperText Markup Language File untuk
file namenya terserah mau diisi apa, disini saya buat file namenya halaman1.html
4.
Kemudian tulis script
:
5. Setelah itu simpan, dan cari folder dimana
file halaman1.html disimpan, lalu double click dan
lihat hasilnya. Dan klik teks yang berbeda maka halaman akan berpindah.
6. lalu buat halaman html lagi untuk laman yang
dituju oleh link tersebut. Disini saya membari nama halaman2.html sebagai
halaman link yang dituju.
7. Ketikkan script dibawah :
8. Setelah itu simpan, dan cari folder dimana file halaman1.html disimpan,
lalu double click dan lihat hasilnya. Dan klik teks yang berbeda maka halaman
akan berpindah.
9. Hasilnya
Percobaan 2 (From)
Langkah – langkah percobaan:
1.
Buka aplikasi
Notepad++
2.
Save dulu filenya pada
save as file type diganti dengan HyperText Markup Language File untuk
file namenya terserah mau diisi apa, disini saya buat file namenya form.html
3.
Kemudian tulis script
berikut:
<html>
<head><title>from</title>
</head>
<body>
<h2 align="center"><font color="#9966FF">free registration</font></h2>
<form action="proses.php" method="post" name="from">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
<td width="15%">nama</td>
<td width="28%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
</tr>
<tr>
<td>tanggal lahir</td>
<td>:</td>
<td><input name="txtTanggal" type="text" id="txtTanggal" 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>
<td>kota</td>
<td>:</td>
<td><input name="txtKota" type="te" id="txtKota"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><input name="cboJob" id="cboJob">
<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 type="radio" name="radJk" value="2">
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"> sing</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>
</from>
</body>
</html>
Percobaan 3
Langkah - langkah percobaan:
1. 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. buka file yang sudah disimpan menggunakan browser
E. Tugas
1 Tuliskan script HTML untuk membuat gambar
berjalan yang mana gambar tersebut adalah hyperlink menuju alamat www.yahoo.com. (ukuran gamabr 100 x 50 pixel,
yang target jendela adalah sama.)
- Cari gambar yahoo dulu. ini contohnya
- Cari gambar yahoo dulu. ini contohnya
- Buka notepad++
- Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language File untuk file
namenya terserah mau diisi apa, disini saya buat file namenya tugas.html
- Kemudian tulis script :
<html>
<head><title>Tugas</TITLE></HEAD>
<body>
<h1>
Ini adalah Tugas 1</h1>
</br>
<h3>
Untuk pergi ke halaman Yahoo silahkan klik gambar berjalan dibawah : </h3>
</br>
<marquee>
<a href='http://www.yahoo.com' target='_top'> <img src='yahoo.png'
width='100' height='50' alt='yahoo'></a>
</marquee>
</BODY>
</HTML>
<head><title>Tugas</TITLE></HEAD>
<body>
<h1>
Ini adalah Tugas 1</h1>
</br>
<h3>
Untuk pergi ke halaman Yahoo silahkan klik gambar berjalan dibawah : </h3>
</br>
<marquee>
<a href='http://www.yahoo.com' target='_top'> <img src='yahoo.png'
width='100' height='50' alt='yahoo'></a>
</marquee>
</BODY>
</HTML>
- Setelah itu simpan, dan cari folder dimana
file tugas.html disimpan, lalu double click dan lihat
hasilnya.
- Hasilnya :
2. Jelaskan fungsi tag atau atribut berikut :
No
|
Tag/atribut
|
Fungsi
|
1
|
<a href=’halaman2.html’>
|
Menuju ke halaman link yang dituju yaitu
halaman2.html
|
2
|
<a href=’http://www.google.com’>
|
Menuju ke link halaman website google.com
|
3
|
<a href=’#referensi’>
|
Menuju ke link referensi yang berada dalam 1
halaman html
|
4
|
Target=’_blank’
|
Link dokumen ke jendela baru (new tab)
|
5
|
<input type=’checkbox’>
|
Membuat inputan berupa kotak-kotak cek
|
6
|
Name=’cekSing’
|
Memberi nama
|
7
|
<input type=’text>
|
Membuat inputan berupa text
|
8
|
Id=’txtkota’
|
Memanggil id textkota
|
9
|
Maxlenght=’20’
|
Lebar maksimal 20
|
10
|
<textarea> </textarea>
|
Membuat inputan berupa textarea/area text.
|
11
|
Cols=’20’
|
Membuat colom berukuran 20
|
12
|
|
Membuat spasi/karakter kosong
|
13
|
<marquee> .. </marquee>
|
Membuat karakter berjalan
|
14
|
<blink> .. </blink>
|
Membuat karakter berkedip
|
Tidak ada komentar:
Posting Komentar