Pada materi kali ini akan dibahas mengenai cara membuat frame dan form pada halaman web, berikut pembahasannya :
A. FRAME.
Untuk membuat sebuah frame terlebih dahulu kita harus membuat halaman-halaman web yang ingin kita gabungkan dalam frame tersebut. Berikut adalah halaman-halaman web yang telah dibuat berikut sintaksnya.
Asal.html.
<HTML><HEAD> <TITLE> ASAL </TITLE> </HEAD>
<BODY>
<H1> <center> WELCOME </H1>
<marquee direction="down"> <center> <font size="5">To Edy'S Site's</font> </marquee>
<p><font size="6"> This site connecting people </font></P>
</BODY>
</HTML>
sintaksnya.
menu.html.
<html><head><title> menu </title></head>
<body>
<a href="Web 1.html" target="isi">Pembuka</a><br>
<a href="asal.html" target="isi">Iklan</a>
</body>
</html>
sintaksnya
web 1.html
<html><body>
<head><title>WEB</title></head>
<body>
<p align="center"> <font size="45"></font><hr align="center" width="100"></p>
<p> <font face="arial" color="ff0000" >
One piece adalah film yang menceritakan tentang sebuah perjalanan dari sekelompok
bajak laut yang ingin menjadi raja dari segala bajak laut.</font></p>
<p> Tokoh-tokoh dari One Piece adalah :
<ul type="circle">
<li>Luffy</li>
<li>Nami</li>
<li>Zoro</li>
<li>Sanji</li>
<li>Usop</li>
<li>Choper</li>
<li>Robin</li>
</ul></P>
<p> <img src="image/luffy2.jpg" width="100" height="110">
<img src="image/nami.jpg" width="85" height="110">
<img src="image/zoro.jpg" width="75" height="110">
<img src="image/sanji.jpg" width="85" height="110">
<img src="image/usop.jpg" width="95" height="110">
<img src="image/choper.jpg" width="85" height="110">
<img src="image/robin.jpg" width="85" height="110">
</body>
</html>
header.html
<html><head><title> awalan </title></head>
<body>
<h1 align="center"><img border="10" src="image/luffy2.jpg" width="100" height="120">Monkey D Luffy</h1>
</body>
</html>
isi.html
<html><head><title> </title></head>
<body>
</body>
</html>
Sebenarnya isi.html merupakan sebuah halaman kosong yang sengaja dibuat sebagai halaman awal untuk frame pembuka.
Kemudian selanjutnya bila kita gabungkan halaman-halaman web tersebut di dalam sebuah frame maka hasilnya akan seperti berikut :
Berikut adalah sintaksnya :
<html>
<head></head>
<frameset rows="26%,74%">
<frame src="Section/header.html">
<frameset cols="13%,67%,20%">
<frame src="Section/menu.html">
<frame src="Section/Web 1.html">
<frame src="Section/isi.html" name="isi">
</frameset>
</frameset>
</html>
Selanjutnya tampilan framenya adalah
Kemudian bilakita klik pembuka maka tampilan frame yang akan keluar adalah
Selanjutnya bila yang diklik adalah iklan maka tampilan framenya
B. Form.
Pengertian form adalah suatu halaman web yang digunakan untuk memasukkan data. Proses kerja form pada umumya setelah diisi data akan dikirim oleh client ke server dengan menunjuk kepada program yang akan menerima input di server. Proses inilah yang disebut dengan Action. Dalam form dikenal bebrepa perintah yang sangat penting dan selalu digunakan saat membangun suatu website. Diantaranya METHOD=GET, METHOD=POST dan juga ACTION. Berikut adalah pengertian dari perintah-perintah tersebut :
1. Method=Get
Yaitu suatu cara bagaimana program di server membaca komponen form yang diterima. Method ini akan mengolah input yang dikirim dengan teknik tertentu. Dalam hal ini yang digunakan adalah membaca parameter dari sebuah fungsi.
2. Method=Post.
Digunakan untuk mengolah input dari suatu client dengan teknik program yang membaca standard input. Yang menjadi acuan adalah bahasa program seperti ASP/CGI, sehingga seolah-olah program tersebut membaca input dari papan ketik atau keyboard.
3. Method=Action.
Yang dimaksud dengan Action adalah suatu aksi yang menunjuk pada program CGI/ASP. Dalam hal ini adalah nama program yang berakhiran ASP. Dalam penulisan dokumenHTML khususnya yang berhubungan dengan form ada beberapa komponen input yang sering digunakan. Komponen-komponen tersebut diantaranya yaitu :
Þ Text
Disebut juga komponen string. Berikut tagnya < INPUT TYPE=TEXT NAME=”nama” SIZE=”20” >
Kemudian dari tag diatas ada beberapa criteria yang harus diketahui :
Ø Input adalah kata kunci.
Ø Type adalah jenis atau tipe input.
Ø Name adalah nama variabel untuk input tersebut
Ø Size digunkan untuk mengatur lebar komponen tersebut.
Þ Radio Button
Radio Button adalah suatu tombol yang digunakan untuk mengambil salah satu pilihan dari banyak pilihan yang tersedia. Cara penggunaan perintah tersebut yaitu :
< INPUT TYPE=RADIO NAME=”radio” VALUE=”nama” CHECKED > CAPTION
Þ Check Box
Komponen ini hampir sama dengan radio, yaitu untuk menampilkan pilihan. Selain bentuk tampilannya yang berbeda, pada Check Box pilihan yang disediakan bebas untuk dipilih atau tidak, bisa dipilih semua bahkan bisa juga dikosongi. Tidak seperti Radio yang hanya satu pilihan saja yang bisa dipilih.
Þ Button
Dalam HTML terdapat dua tombol yang sangat sering digunakan yaitu Submit dan Reset. Tombol Submit digunkan untuk mwngaktifkan action ketika kita sudah berhadapan dengan ASP/CGI yang ada dalam server. Sedang Reset digunakan untuk membersihkan data pada form yangtelah kita masukkan. Caption pada tombol dapat diganti dengan perintah Value.
Þ Select dan Option
SELECT adalah perintah yang digunakan untuk memilih salah satu pilihan dari daftar pilihan dalam bentuk dropdown. SELECT digunakan untuk mengidentifikasi pilihan sedangkan untuk membuat dan menampilkan pilihan adalah dengan perintah OPTION.
Þ Password
Komponen ini penting untuk menjaga keamanan data yang kita masukkan. Biasanya berupa angka atau huruf yang tidak ditampilkan ketika kita mengisinya. Berikut adalah tagnya < INPUT TYPE=PASSWORD NAME=”xxxx” SIZE=”xxx” >
Sebenarnya masih banyak lagi komponen-komponen yang lain. Tetapi tidak dapat disebutkan satu-persatu.
Kemudian penulisan sintaks form untuk digunakan sebagai pembahas untuk permasalahan diatas yaitu :
<html>
<head><title>   </title></head>
<body>
<form name="biodata" method="post" action="inisialisasi2.html">
<table border>
<tr>
<td width="200">User Name</td>
<td><input type="text" name="user_name" ></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" ></td>
</tr>
<tr>
<td>Re-type Password</td>
<td><input type="password" name="re_password" ></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="e_mail" size="40"></td>
</tr>
<tr>
<td></td></tr>
<tr>
<td>Nama</td>
<td><Input type="text" name="nama",size="100"></td>
</tr>
<tr>
<td>NIM</td>
<td><Input type="text" name="NIM",size="50"></td>
</tr>
<tr>
<td>Alamat</td>
<td><Input type="text" name="alamat",size="50"></td>
</tr>
<tr>
<td>kota asal</td>
<td><select name="kota_asal">
<option selected> </option>
<option>magelang</option>
<option>Yogyakarta</option>
<option>Semarang</option>
</select></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td><input type="radio" name="jenis_kelamin" value="pria">pria
<input type="radio" name="jenis_kelamin" value="wanita">wanita</td>
</tr>
<tr>
<td>HOBI</td>
<td><input type="checkbox" name="hobi" value="coding">coding<br>
<input type="checkbox" name="hobi" value="PSan">PSan<br>
<input type="checkbox" name="hobi" value="Bilyard">Bilyard</td>
</tr>
<tr>
<td>Deskripsi Pribadi</td>
<td><textarea name="descript" cols="25" rows="10"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="kirim">
<input type="reset" name="reset" value="hapus"></td>
</tr>
</table>
</form>
</html>
Setelah perintah telah selesai ditulis maka tampilan dari form tersebut adalah :
0 komentar:
Posting Komentar