MEMBUAT 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
|
|
|
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 seperti
ini, file menu.htm seperti
ini dan file isi.htm seperti
ini. Maka bila anda membuka file gabung.htm, akan tampaklah sebuah
halaman web yang terdiri dari tiga frame seperti
ini. (klik masing-masing kata "seperti ini" untuk melihat
tampilannya).
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, tampak seperti ini. 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> |
Klik di
sini untuk melihat tampilannya dalam browser.
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.
sumber :images.mellyssahara.multiply.multiplycontent.com/.../
