Membuat
Frames
Frame
HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi
menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML
terpisah. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti
isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet
dan mempercepat proses download secara keseluruhan.
Format:
<html>
<head>
</head>
<frameset>
<frame
src>
</frameset>
</html>
Aturan penggunaan atribut ROWS dan
COLS pada frameset adalah:
<frameset
rows=”tinggi_baris,tinggi_baris,…”>
<frameset
cols=”lebar_kolom, lebar_kolom,…”>
Atribut-atribut yang digunakan
dalam FRAME adalah:
Atribut
|
Fungsi
|
FRAMESET COLS
|
Membuat
frame vertikal dengan lebar kolom tertentu
|
FRAMESET ROWS
|
Membuat frame horizontal dengan
tinggi baris tertentu
|
FRAME SRC
|
Memasukkan
dokumen HTML ke dalam FRAME
|
NOFRAME
|
Memasukkan
body teks untuk browser yang tidak dapat menampilkan frame
|
Model-model frame dan contoh
pembuatannya:
|
1
<FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> |
|
|
2
<FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> |
|
|
3
<FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> |
|
|
4
<FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> |
|
|
5
<FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET>
</FRAMESET>
|
|
|
6
<FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET>
</FRAMESET>
|
|
|
7
<FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET>
</FRAMESET>
|
|
|
8
<FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET>
</FRAMESET>
|
Latihan
Menggunakan FRAME
Buat
file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html,
bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:
File
latihan6.html
<html>
<head>
<title>.::
Latihan Membuat Frame ::.</title>
</head>
<frameset rows=20%,* framespacing="0"
border="0" frameborder="0">
<frame name=atas src=header.html
scrolling="no" noresize>
<frameset cols=25%,* framespacing="0"
border="0" frameborder="0">
<frame name=kiri src=kiri.html
scrolling="no" noresize>
<frame
name=kanan src=kanan.html scrolling="no" noresize>
</frameset>
</frameset>
</html>
Pada
tag <frameset rows=20%,*>
maksudnya adalah frame yang dibuat terdiri dari dua bagian/baris dengan ukuran
20% bagian paling atas dan selebihnya (80%) adalah frame bagian bawah/baris
kedua yang ditunjukkan dengan tanda ‘*’. <frame
name=atas src=header.html> menunjukkan bahwa nama frame adalah atas dan diisi dengan dokumen header.html.
<frameset cols=30%,*> mempunyai arti bahwa frame bawah
dibagi lagi menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya
untuk frame sebelah kanan.
Kalau file tersebut dijalankan hasilnya sebagai berikut:
Tampilan tersebut dikarenakan file-file yang dibutuhkan
oleh frame belum dibuat atau tidak ditemukan. Oleh karena itu lengkapi
file-file sebagai berikut:
File header.html
<html>
<head>
<title>.::
Latihan Membuat Frame ::.</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK N 1 PERCUT SEI
TUAn:::. </b><br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
</body>
</html>
File kiri.html
<html>
<head>
<html>
<head>
<title>:::
Latihan Membuat Frame:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 width="228"
height="28" cellspacing=0>
<tr>
<td
width="218" height="22" bordercolor="#800080"
bgcolor="#BDCED9">
<b><font face="Tahoma"
size="2"> M e n u</font></b>
</td>
</tr>
<tr>
<td
width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma"
size="2">
<a
href=kanan.html target=kanan>H o m
e</a></font></b></td>
</tr>
<tr>
<td
width="218" height="22" bordercolor="#800080">
<b><font
face="Tahoma" size="2">
<a href=proli.html target=kanan>Fasilitas</a>
</font></b></td>
</tr>
<tr>
<td width="218" height="22"
bordercolor="#800080">
<b><font
face="Tahoma" size="2">
<a href=ekstra.html
target=kanan>Keunggulan</a>
</font></b></td>
</tr>
</table>
</body>
File kanan.html
</html>
<title>::: Latihan Membuat Link Ke Dokumen
Lain :::</title>
</head>
<body bgcolor=#ffffff>
<table border=1
bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td
valign=top>
<font
face=verdana size=4 color=blue>
Selamat datang di web kami ...
</td>
</tr>
</body>
</html>
File proli.html
<html>
<head>
<title>:::
Link Dokumen Lain :::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td
valign=top>
<font
face=verdana size=4 color=blue>
Program
Keahlian :<br>
<font
size=1>
<ul
type=circle>
<li>Rekayasa
Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las
</ul>
</td>
</tr>
</body>
</html>
File ekstra.html
<html>
<head>
<title>:::
Link Dokumen Pariwisata
:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1
bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td
valign=top>
<font
face=verdana size=4 color=blue>
Ekstra Kurikuler :<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
</td>
</tr>
</body>
</html>
Hasilnya adalah sebagai berikut:
7. Form Html
Digunakan
untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di
server. User menerima informasi melalui sejumlah elemen yang disebut kontrol.
Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO BUTTON, PUSH BUTTON, LIST
MENU dan lainnya.
Sintak
penulisan form adalah:
<form method=”post atau get”
action=”program_pemroses”>
elemen-elemen
FORM
</form>
Atribut
METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET
mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL
yang ditunjuk. Metode POST mengirimkan datanya secara terpisah. Jika data
masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut ACTION
berisi URL dari program yang dipanggil oleh form tersebut.
TextBOX
Textbox digunakan untuk memasukkan data string sebanyak
satu baris. Cara
penulisannya adalah:
<input
type=text name=textbox1 size=xx value>
Atribut
TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox), NAME adalah
identifikasi/penamaan elemen ini untuk dibaca oleh program pemroses nantinya.
Atribut VALUE untuk memberi nilai suatu masukan. Sedangkan atribut SIZE
digunakan untuk menentukan panjang atau banyaknya karakter sebuah masukan.
Untuk menyembunyikan masukan yang ditulis user dalam textbox, dapat menggunakan
atribut TYPE=”PASSWORD”, sehingga tampilan dalam textbox menjadi karakter “*”.
contoh1_1.html
<html>
<head>
<title>::: Form Input dengan TEXTBOX
:::</title>
</head>
<body>
<h3>Rancangan
awal BUKU TAMU</h3>
<form
method=post>
<table
border=0>
<tr>
<td width=70>Nama</td>
<td width=10>:</td>
<td width=30><input type=text name=nama
size=30></td>
</tr>
<tr>
<td width=70>Alamat</td>
<td width=10>:</td>
<td width=30>
<input
type=text value=Jl. name=alamat size=30></td>
</tr>
<tr>
<td width=70>Homepage</td>
<td width=10>:</td>
<td width=30>
<input
type=text value=http:// name=page size=30></td>
</tr>
</table>
</form>
</body>
</html>
Tampilan untuk contoh diatas adalah:
CHECKBOX
CheckBox
digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat
memilih salah satu, lebih dari satu pilihan atau tidak memilih sama sekali.
Tata
cara penulisannya adalah:
<input type=checkbox name=checkbox1
value=on atau off checked>Pilihan 1
Dimana
attribut TYPE menentukan jenis masukan yang berupa CHECKBOX, NAME adalah
identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, VALUE
menentukan apakah pada keadaan awal checkbox ini terpilih (ON) atau tidak
(OFF). Parameter CHECKED menentukan apakah checkBOX sedang dicentang atau tidak
contoh1_2.html
<html>
<head>
<title>:::
Form Input dengan CHECKBOX :::</title>
</head>
<body>
<form method=post>
Pilih Program Keahlian Anda<br>
<h3>Daftar Program Keahlian SMK PGRI 3 Malang</h3>
<p>
<input
type=checkbox name=c1 checked>Rekayasa Perangkat Lunak<br>
<input type=checkbox name=c2>Teknik Elektronika
Industri<br>
<input type=checkbox name=c3>Teknik Pembangkit Tenaga
Listrik<br>
<input type=checkbox name=c4>Teknik
Otomotive<br>
</form>
</body>
</html>
Hasil
contoh diatas adalah sebagai berikut:
RADIO
Button
Digunakan
untuk membuat pilihan. User dapat memilih salah satu pilihan yang tersedia,
sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan yang
disediakan. Atribut CHECKED memberi tanda bahwa pilihan tersebut sedang
diaktifkan, VALUE adalah harga dari pilihan
contoh1_3.html
<html>
<head>
<title>:::
Form Input dengan RADIO Button :::</title>
</head>
<body>
<form
method=post>
<h3>Pilih Salah satu<br>
Pendidikan Terakhir Anda : </h3>
<input type=radio value="SD" checked
name=sekolah>SD<br>
<input
type=radio value="SLTP" name=sekolah>SLTP<br>
<input
type=radio value="SMU" name=sekolah>SMU<br>
<input
type=radio value="S1" name= sekolah >S1<br>
<input
type=radio value="S2" name= sekolah >S2<br>
</form>
</body>
</html>
Hasil
contoh program tersebut adalah:
DROP-DOWN Menu
Digunakan
untuk membuat menu pilihan. Cara menuliskannya adalah:
<select
name=menu1>
<option
value-pilihan1>Pilihan 1
<option
value-pilihan2>Pilihan 2
<option
value-pilihan3>Pilihan 3
dst …
</select>
Tag OPTION berfungsi untuk menampilkan pilihan-pilihan
yang akan tersedia. Setiap
pilihan ditentukan isinya dengan parameter VALUE.
contoh1_4.html
<html>
<head>
<title>::: Form Input dengan DROP-DOWN Menu
:::</title>
</head>
<body>
<form method=post>
<h3>Pilih Salah satu<br>
Jurusan : </h3>
<select name=jurusan>
<option value=TI selected>Teknik
Informatika</option>
<option value=EI>Elektronika
Industri</option>
<option value=MO>Mesin Otomotive</option>
<option value=BO>Bodi Otomotive</option>
<option value=MP>Mesin Perkakas</option>
<option value=ML>Mesin Las</option>
</select>
</form>
</body>
</html>
Tampilan contoh diatas adalah
sebagai berikut:
TEXT Area
Elemen ini digunakan untuk menampilkan masukan berupa
textbox yang mampu menerima masukan berupa string lebih dari satu baris.
Sintaknya
adalah:
<textarea
name=textbox1 rows=xx cols=xx>Isi Awal
</textarea>
Parameter
NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses
nantinya, COLS dan ROWS adalah ukuran kolom dan baris textbox ini dalam
banyaknya karakter
contoh1_5.html
<html>
<head>
<title>:::
Form Input dengan Text Area :::</title>
</head>
<body>
<form
method=post>
<h5>Isikan Pesan dan kesan</h5>
<textarea name=textbox1 rows=5 cols=40>Pesan
Anda:
</textarea>
</form>
</body>
</html>
Tampilan
contoh diatas adalah sebagai berikut:
Elemen
Tombol
Elemen
ini digunakan untuk menampilkan tombol yang dapat berupa tombol SUMBIT untuk
mengirimkan data ke pemroses di server, RESET untuk mengulangi/mengosongkan
isian form atau NORMAL yang tidak berfungsi apapun sebelum kita mendefinisikan
sebuah fungsi untuknya.
Format
penulisannya adalah:
<input
type=submit value=OK name=tombol1>untuk tombol SUBMIT
<input
type=reset value=reset name=tombol2>untuk tombol RESET
contoh1_6.html
<html>
<head>
<title>::: Buku Tamu :::</title>
</head>
<body>
<h3><p align=center>BUKU
TAMU</p></h3>
<form method=post>
<table border=0 align=center
width=500>
<tr>
<td width=11%>Nama</td>
<td width=3%>:</td>
<td width=86%><input
type=text name=nama size=20></td>
</tr>
<tr>
<td width=11%>Alamat</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=Jl.
name=alamat size=30></td>
</tr>
<tr>
<td width=11%>Email</td>
<td width=3%>:</td>
<td width=86%><input
type=text name=email size=20></td>
</tr>
<tr>
<td width=11%>Website</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=http://
name=pg size=30></td>
</tr>
<tr>
<td
width=11% valign=top>Homepageku</td>
<td
width=3% valign=top>:</td>
<td
width=86%>
<input type=radio value=hebat
name=saran checked>
Bagus Sekali<br>
<input type=radio value=bagus
name=saran>
Bagus<br>
<input type=radio value=biasa
name=saran>
Biasa Aja<br></td>
</tr>
</table>
<p
align=center>
<input
type=submit value=kirim name=b1>
<input
type=reset value=batal name=b2>
<hr>
</form>
</body>
</html>
Hasilnya
adalah:
0 komentar:
Posting Komentar