PRAKTIKUM PEMROGRAMAN WEB #2

A.   Tujuan  
       Mengetahui dan memahami Tag-tag dalam HTML lebih lanjut, dan mengetahui fungsi dari    tag-tag tersebut

B.   Landasan Teori
      1. Hyperlink

          Hyperlink sering disebut anchor digunakan untuk menghubungkan (link) antara satu halaman web dengan halaman web yang lain, dalam satu website ataupun antar website juga dapat digunakan berpindah ke halaman Deskripsi dari sifat yang dimiliki hyperlink :

a. link saat hyperlink belum dikunjungi

b. visited telah dikunjungi

c. active dalam keadaan in focus atau terpilih.

alamat tujuan dalam hyperlink dapat ditentukan oleh berikut ini :

a. nama file, yaitu pindah ke halaman web lain dalam satu website.

   <a href="namafile.html">dijadikan hyperlink</a>

b. alamat website lain, pindah ke alamat website lain.

   <a href="http://www.namadomain.com">dijadikan hyperlink</a>

c. book mark, pindah ke posisi lain dalam satu halaman web.

   <a href="#nama_posisi">dijadikan hyperlink</a>

      2. Form

     Form adalah area yang dapat berisi elemen form. Elemen form adalah elemen yang memungkinkan user untuk memberikan informasi. Elemen form ini antara lain text field, textarea field, drop-down menu, radio button, checkbox dan lain-lain.

Form didefinisikan oleh tag <form>

Contoh :

1 <form> 2 <input> 3 <input> 4 </form>

Tag form terletak dalam tag BODY yang meliputi :

a.  input

Tag dalam form yang sering dipakai adalah tag <input>. Tipe dari input ditentukan dari atribut type. Yang sering dipergunakan untuk tipe dari input adalah : 

 - Text Fields

Text fields ini dipakai jika kita ingin user memberikan input berupa beberapa huruf, angka, dan lain-lain dalam form.

1 <form> 2 Nama : <input type="text" name="nama"><br> 3 Email : <input type="text" name="email"> 4 </form>

Akan nampak dibrowser seperti :

Nama :
Email :

catatan : tag form sendiri tidak kelihatan dalam browser. Kebanyakan browser secara default akan menampilkan text fields dengan panjang 20 karakter. 

-Radio Button

Radio button digunakan jika anda ingin user memilih salah satu dari beberapa pilihan.

1 <form> 2 <input type="radio" name="golongan" value="a"> Golongan A<br> 3 <input type="radio" name="golongan" value="b"> Golongan B 4 </form>

Akan nampak dibrowser seperti ini :

Golongan A
Golongan B

 -CheckBox

Checkbox memungkinkan user untuk memilih lebih dari satu dari pilihan yang diberikan dalam form.

1 <form> 2 <input type="checkbox" name="sepeda" value=yes> Sepeda<br> 3 <input type="checkbox" name="mobil" value=yes> Mobil 4 </form>

Akan nampak pada browser seperti :

Sepeda
Mobil

-Password

Input type="password" akan menampilkan seperti input type="text" namun jika user mengetikkan pada field maka akan muncul * (asterik) sehingga tidak terbaca teks yang diketikkan

.

-Hidden

Input type="hidden"akan tidak ditampilkan pada browser. Biasanya tipe input seperti ini dipergunakan untuk parameter yang mana tidak memerlukan masukan dari user.

-Submit/Reset

Input type="submit" akan menampilkan tombol "submit" yaitu jika tombol ini ditekan data akan dikirimkan ke file yang akan menangani form ini.

Input type="reset" akan menampilkan tombol yang mana jika user menekannya akan menghapus isi form.

b. DropDown

- DropDown Menu

Dropdown menu ini memungkinkan user untuk memilih dari pilihan yang berupa list box

1 <form> 2 Pilih : 3 <select name="elektronik"> 4 <option value="video">Video</option> 5 <option value="audio">Audio</option> 6 </select> 7 </form>

Pilih : Video Audio

- DropDown List

Tag Select ini dapat juga tampil bukan dalam bentuk drop-down menu namun berupa daftar yang kita dapat memilihnya. Untuk menampilkan dalam bentuk daftar maka tambahkan atribut size=<angka> yang akan menunjukkan banyaknya pilihan yang akan tampil.

c. Textarea

Textarea akan memungkinkan user untuk memberikan data dalam banyak baris. Hampir sama seperti pada <input type=text> namun untuk textarea tampilan dapat dibuat dalam beberapa baris. Textarea ini biasa dipakai untuk menerima user input yang berupa teks yang panjang/beberapa baris.

1 <form> 2 Berita : <br> 3 <textarea name="berita" rows=5 cols=50> 4 </textarea> 5 </form>

Akan tampil seperti ini :

Berita :

d. Atribut Action form dan tombol submit

Ketika user mengklik tombol "Submit", isi dari form dikirim ke file lain. Atribut Action pada tag form mendefinisikan file yang akan menerima data yang dikirim oleh user. File ini biasanya melakukan sesuatu dengan data yang diterimanya.

C.   Langkah Kerja  
       1. percobaan 1 (Hyperlink)
           a. membuat file dengan nama halaman 1.html

<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'>Disini</a>
</br>
untuk pergi kehalaman google silahkan klik gambar di bawah :
</br>
<a href='http://www.google.com' target='_blank'><img src='google.jpg' width=200 height=50 alt='google'></a>
</br>
untuk melihat referensi tentang pemrograman web silahkan klik teks dibawah ini</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>
<a name='referensi'><b>Referensi Pemrograman Tentang Web</b></a>
<br>
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
disini adalah teks berisi tentang referensi pemrograman web.
</BR>
</BODY>
</HTML>

      Hasil dari percobaan 1 :

       b. membuat halaman 2.html untuk link

<HTML>
<HEAD><TITLE>HYPERLINK</TITLE></HEAD>
<BODY>
<h1>INI ADALAH HALAMAN 2</h1>
</br>
untuk kembali ke halaman 1 silahkan klik dibawah ini :
</br>
<a href='halaman1.html' target='_top'>kembali</a>
</BODY>
</HTML>

       2. percobaan 2 (Form)

<HTML>
<HEAD><TITLE>FORM</TITLE></HEAD>
<BODY>
<h2 align="center"><font color="#9966FF"> Free Regristation </font></h2>
<FORM action="proses.php" method="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 width="83%"><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="2">
</td>
</tr>

<tr>
<td>Alamat</td>
<td>&nbsp;</td>
<td><textarea name="txtAlamat" type="text" 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>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>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSport" type="checkbox" id="cekSport" value="2">Sport</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSing" type="checkbox" id="cekSing" value="3">Singing</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekTravel" type="checkbox" id="cekTravel" value="4">Travelling</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
<td><input name="btnCencel" type="reset" id="btnCencel" value="Cancel">
</td>
</tr>
</table>
<form>
</BODY>
</HTML>

Hasil :     

   3. percobaan 3 (Animasi)

<HTML>
<HEAD><TITLE>ANIMASI</TITLE></HEAD>
<BODY>
<marquee>Teks ini Berjalan</marquee>
</br>
<blink>Teks ini Berkedip-kedip</blink>
</BODY>
</HTML>

Hasilnya :

 

Teks ini Berjalan

Teks ini Berkedip-kedip 

D.   Tugas

       1. Tulis script HTML untuk membuat gambar berjalan, gambar tersebut adalah hyperlink menuju alamat yahoo.com (ukuran gambar 100 x 50 pixel)

<HTML>
<HEAD><TITLE>Tugas 1</TITLE></HEAD>
<BODY bgcolor="blue">
<marquee><a href='http://www.yahoo.com' target='_blank'><img src='yahoo.jpg' width=100px height=50px></a></marquee>
</br>
</BODY>
</HTML>

Hasilnya:

       

 2. fungsi dari tag :

No	Tag/atribut	Fungsi
1	<a href='halaman2.html' >	Hyperlink, berpindah ke halaman lain dalam satu website
2	<a href='http://www.yahoo.com'>	Hyperlink, berpindah ke website lain
3	<a href=’referensi’ >	Hyperlink Bookmark, berpindah ke posisi lain dalam satu halaman web(web yang sama)
4	Target=’blank’	Link dokumen ke jendela baru
5	<input type=’checkbox’>	Untuk membuat kotak-kotak cek
6	<name=’cekSing’>	Memberi nama untuk input checkbok yang berlaku
7	<input type=’text’>	Digunakan untuk isian seperti nama orang/ alamat(berupa tulisan teks).
8	Id=’txtKota’	Untuk melihat hasilnya
9	Maxlenght=’20’	Untuk menentukan batas maksimal masukan karakter yang dapat diberikan ke dalam kotak masukan teks
10	<TEXTAREA></TEXTAREA>	Untuk pengisian text /karakter yng panjang seperti komentar/ email
11	Cols=’20’	Membuat kolom dengan ukuran 20
12	&nbsp;	Untuk memberikan spasi
13	<marquee>...</marquee>	Membuat teks atau gambar berjalan
14	<blink>....</blink>	Membuat teks atau gambar berkedip-kedip