Membuat frame & form HTML.docx

Membuat frame dan form

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>&nbsp</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> &nbsp </title></head>

<body>

<form name="biodata" method="post" action="inisialisasi2.html">

<table border>

<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 :

Kembali ke materi awal

Membuat frame & form HTML.docx

Documents

Transcript of Membuat frame & form HTML.docx