Frame
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
|
|
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:
1. 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.
2. MARGINHEIGHT
untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi
frame.
3. MARGINWIDTH
untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi
frame.
4. 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).
5. 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.
6. 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 tentang atribut TARGET pada pelajaran
tentang LINK? Seandainya semua link yang terdapat dalam file menu.htm akan kita arahkan pada frame
"utama" maka kita bisa menyisipkan tag <BASE TARGET="utama"> diantara tag <HEAD> dan
</HEAD>. Dengan demikian, kita tidak perlu lagi menuliskan dalam setiap
link atribut TARGET tersebut satu-persatu.
Karena dengan adanya tag BASE TARGET itu, secara otomatis, semua link
yang ada dalam halaman tersebut akan diarahkan ke frame yang dicantumkan dalam
BASET TARGET. Kecuali link yang mempunyai TARGET tersendiri.
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.
