Dengan menggunakan frame, kita bisa
menampilkan beberapa halaman HTML sekaligus dalam sebuah jendela browser. Apa
artinya? Artinya dengan membuka sebuah halaman HTML saja (yang mengandung
frame), browser akan menampilkan beberapa halaman sekaligus yang masing-masing
termuat dalam sebuah frame. Apa gunanya? Disamping untuk mempercantik tampilan,
fungsi utama frame adalah untuk memudahkan navigasi atau penelusuran isi
website. Kok, bisa? Daripada membahas panjang lebar, lebih baik kita langsung
saja belajar membuat frame. Perhatikan contoh layout halaman ber-frame berikut
ini:
frame I berisi file judul.htm
|
|
frame II berisi file menu.htm
|
frame III berisi file isi.htm
|
Anggaplah gambar di atas adalah tampilan dari
sebuah halaman HTML yang terdiri dari tiga frame. Halaman yang ber-frame ini
kita namakan gabung.htm. File gabung.htm ini menampilkan tiga
halaman HTML sekaligus yaitu file judul.htm, menu.htm dan isi.htm.
Jadi untuk membuat tampilan seperti di atas kita harus membuat empat buah file
HTML, 3 file berfungsi sebagai halaman yang ditampilkan sedang satu file
berfungsi sebagai halaman yang menampilkan. Halaman inilah yang merupakan
halaman utama atau halaman yang mengandung frame.
Untuk membuat halaman utama atau halaman yang
ber-frame, kita hanya membutuhkan dua buah tag yaitu <FRAMESET> untuk
mengatur pembuatan frame, dan <FRAME> untuk menentukan file target bagi
setiap frame. Baiklah kita mulai membuat file gabung.htm ini:
<HTML>
<HEAD> <TITLE>Halaman utama</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> |
Di atas anda bisa melihat bahwa empat tag
yang pertama hanyalah tag pembukaan HTML yang sudah biasa. Sedangkan tag untuk
membuat frame adalah tag <FRAMESET> dengan tag penutupnya. Perhatikanlah
bahwa halaman yang berframe tidak membutuhkan tag BODY karena yang menjadi isi
dari halaman utama ini adalah isi dari halaman-halaman lain yang menjadi target
dari setiap frame.
Perhatikan kembali layout halaman berframe
yang digambarkan di atas tadi. Halaman tersebut terdiri dari atas dua baris dimana
baris pertama (atas) lebih kecil (anggaplah 20%) daripada baris kedua (80%).
Dan baris kedua terbagi atas dua kolom dimana kolom pertama (kiri) lebih kecil
(anggaplah 30%) daripada kolom kedua (70%). Bagaimana cara mengaturnya?
Pertama, kita membagi halaman menjadi dua
baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Agar lebih
bersih dan jelas, tag <HTML>, <HEAD> dan <TITLE> tidak
dicantumkan lagi. Ingat, anda harus tetap menuliskannya di dokumen
anda.
<FRAMESET
ROWS="20%,80%">
</FRAMESET> |
Atribut ROWS dalam tag FRAMESET di atas
memerintahkan browser untuk membagi halaman menjadi dua baris, baris pertama
tingginya 20% dan baris kedua tingginya 80%. Sekarang kita akan mengisi baris
pertama dengan frame kosong terlebih dahulu menggunakan tag <FRAME>.
<FRAMESET
ROWS="20%,80%">
<FRAME> </FRAMESET> |
Sekarang kita akan mengisi baris kedua.
Sebelumnya kita harus membagi baris kedua ini dalam dua kolom. Untuk itu, kita
harus menambahkan lagi sepasang tag <FRAMESET> yang di dalamnya disisipkan
atribut pembagi kolom yaitu COLS.
<FRAMESET
ROWS="20%,80%">
<FRAME> <FRAMESET COLS="30%,70%"> </FRAMESET> </FRAMESET> |
Setelah terbagi dalam dua kolom kita harus
mengisi setiap kolom tersebut dengan frame. Jadinya seperti ini:
<FRAMESET
ROWS="20%,80%">
<FRAME> <FRAMESET COLS="30%,70%"> <FRAME> <FRAME> </FRAMESET> </FRAMESET> |
Kini selesailah sudah pembuatan file gabung.htm
yang merupakan halaman web yang terdiri dari tiga buah frame. Tugas kita
tinggal mengisi frame-frame yang masih kosong itu dengan file-file yang akan
kita tampilkan di dalamnya. Untuk mendefinisikan nama file target pada setiap
frame, kita tinggal menambahkan atribut SRC dalam setiap tag <FRAME>.
Contoh:
<FRAMESET
ROWS="20%,80%">
<FRAME SRC="judul.htm"> <FRAMESET COLS="30%,70%"> <FRAME SRC="menu.htm"> <FRAME SRC="isi.htm"> </FRAMESET> </FRAMESET> |
Tentu saja sebelumnya anda harus sudah
membuat ketiga file tersebut dan menempatkan keempat file ini dalam folder yang
sama. Bila foldernya tidak sama, gunakanlah cara penulisan alamat file seperti
cara penulisan alamat file untuk link (lihat kembali pelajaran tentang link
yang lalu).
Misalnya kita mempunyai file judul.htm,
file menu.htm dan file isi.htm. Maka bila anda membuka file gabung.htm,
akan tampaklah sebuah halaman web yang terdiri dari tiga frame.
Seperti halnya dalam penentuan ukuran tabel,
selain menggunakan satuan persen, kita juga bisa menggunakan satuan pixel.
Misalnya atribut COLS="200,400" memerintahkan browser untuk
membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel
sedang kolom kedua lebarnya 400 pixel. Bahkan anda pun dapat membagi frame
seperti ini COLS="200,*". Apa artinya? Artinya anda membagi
halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel sedang kolom
kedua lebarnya adalah sisa dari ukuran layar monitor. Hal ini berguna karena
setting layar monitor yang dipakai oleh user bisa berbeda-beda; pada umumnya
adalah (lebar x tinggi dalam satuan pixel) 640x480, 800x600 atau
1024x768.
Atribut lainnya yang bisa disisipkan dalam
tag <FRAMESET> antara lain: BORDER untuk mengatur ukuran border yang
memisahkan antara dua frame dan BORDERCOLOR untuk menentukan warna border.
Contoh:
<FRAMESET
ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm"> <FRAMESET COLS="30%,70%" BORDER="10"> <FRAME SRC="menu.htm"> <FRAME SRC="isi.htm"> </FRAMESET> </FRAMESET> |
Bila dilihat dalam browser, ukuran
BORDER="2" adalah default sedang ukuran BORDER="0" berarti
frame tanpa border.
Sedangkan untuk tag <FRAME> biasanya
dilengkapi dengan atribut-atribut berikut:
- BORDERCOLOR,
fungsinya sama dengan BORDERCOLOR pada tag FRAMESET. Dalam hal ini, warna
yang didefinisikan oleh tag yang lebih dalam menang atas warna yang
didefinisikan oleh tag yang luar.
- MARGINHEIGHT
untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi
frame.
- MARGINWIDTH
untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi
frame.
- NORESIZE,
dengan adanya atribut ini maka border dari frame yang bersangkutan tidak
bisa digeser. Dengan kata lain, ukuran frame tersebut tidak bisa diubah
(diperkecil atau diperbesar).
- SCROLLING,
mengatur fasilitas scroll (penggulung layar) dari frame. Nilainya
bisa YES, NO atau AUTO. Nilai YES berarti penggulung selalu ada, NO
berarti penggulung selalu tidak ada, sedang AUTO berarti penggulung ada
bila diperlukan (isi frame melebihi ukuran layar) dan tidak ada bila tidak
diperlukan (isi frame dimuat oleh layar). Nilai AUTO merupakan nilai
default. Artinya, bila atribut SCROLLING tidak dituliskan, maka penggulung
layar otomatis akan muncul bila diperlukan.
- NAME,
untuk memberi nama terhadap frame yang bersangkutan. Kegunaannya akan
dijelaskan kemudian.
Berikut sekelumit contoh penggunaan
atribut-atribut di atas:
<FRAMESET
ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm" NORESIZE> <FRAMESET COLS="30%,70%" BORDER="10"> <FRAME SRC="menu.htm" BORDERCOLOR="#9C661F"> <FRAME SRC="isi.htm"SCROLLING="YES"> </FRAMESET> </FRAMESET> |
Adapun atribut NAME diperlukan dalam
kaitannya dengan fungsi navigasi dari halaman ber-frame. Misalnya kita ingin
mengatur agar suatu link bila di-klik akan memunculkan halaman targetnya dalam
frame tertentu. Maka terlebih dahulu kita harus memberi nama terhadap frame
tersebut. Contoh:
<FRAMESET
ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm" NORESIZE> <FRAMESET COLS="30%,70%" BORDER="10"> <FRAME SRC="menu.htm" BORDERCOLOR="#9C661F"> <FRAME SRC="isi.htm"SCROLLING="YES" NAME="utama"> </FRAMESET> </FRAMESET> |
Dalam contoh di atas, frame ketiga (frame
pada kolom kedua dari baris kedua halaman) kita berinama "utama".
Dengan adanya nama tersebut, kita bisa mengatur agar link yang terdapat pada
halaman di frame lainnya bila di-klik akan memunculkan halaman targetnya pada
frame "utama" tersebut. Bingung? Misalnya, pada halaman menu.htm
terdapat link dengan kode HTML seperti berikut:
<A HREF="bab2.htm">BAB
II</A>
Bila
kata BAB II di-klik maka akan membuka file bab2.htm. Tapi halaman
bab2.htm tersebut akan mengisi seluruh jendela browser. Artinya halaman
yang berframe akan hilang. Agar file bab2.htm itu muncul pada frame
"utama" saja, kita harus memberi atribut TARGET seperti ini:
<A HREF="bab2.htm"
TARGET="utama">BAB II</A>
Masih ingat, kan
Berikut beberapa cara pengarahan link dengan
atribut TARGET:
- _blank
: halaman yang dipanggil akan muncul pada jendela baru (ini sudah
kita pelajari)
- _top :
halaman yang dipanggil akan mengisi penuh jendela yang sama, meskipun
tadinya ada frame.
- _self :
halaman yang dipanggil akan mengisi tempat yang sama, bila link tersebut
dalam sebuah frame maka halaman yang dipanggil akan mengisi frame
tersebut.
- _parent :
halaman yang dipanggil akan akan mengisi FRAMESET, satu tingkat lebih
tinggi dari FRAME tempat link yang bersangkutan.
No comments:
Post a Comment
Kasih Pendapat anda Tentang Koleksi Games Kami ^_^