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>
Tidak ada komentar:
Posting Komentar