Sebelum anda melangkah lebih lanjut, saya sangat menyarankan agar anda meminimalisir penggunaan frame. Karena Search Engine sangat membenci frame dan membuat halaman websitemu tak terindex dengan sempurna. Upayakan untuk mengganti frame dengan tabel. Terutama di halaman utama. Bila anda terpaksa menggunakan frame maka gunakan juga tag <NOFRAME> sebagai antisipasi agar search engine dapat membacanya.
Frame adalah bingkai yang membagi jendela browser sesuai keinginan kita. Dengan frame, kita bisa menampilkan beberapa file html sekaligus. Misalnya file pertama adalah file menu dan file kedua adalah isinya. Sehingga tampilan pada browser kira-kira seperti ini :
Untuk membuat website dengan tampilan seperti diatas, kamu perlu menyiapkan 2 buah file pengisi frame dan 1 buah file yang menggabungkan keduanya. Oke, misalnya file 1 kita beri nama menu.htm dengan source seperti ini :
<HTML>
<BODY
bgcolor="#0000FF" TEXT="#FFFFFF">
<A HREF="isi1.htm">Isi pertama</a>
<A HREF="isi2.htm">Isi kedua</a>
</BODY>
</HTML>
Dan file 2 kita beri nama isi1.htm dengan source seperti ini :
<HTML>
<BODY bgcolor="#FFFFCC">
Ini adalah halaman pertama, halaman ini muncul di
awal
tampilan.
</BODY>
</HTML>
Terakhir, kita akan menggabungkan dua file tersebut ke dalam satu file yang kita beri nama gabung.htm dengan source seperti ini:
<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="menu.htm">
<FRAME
SRC="isi1.htm"></FRAMESET>
<NOFRAME>
Maaf, browser anda tak
mendukung Frame
</NOFRAME></HTML>
Untuk melihat hasilnya silahkan klik disini. Mari kita coba bedah satu per satu :
- Tag FRAMESET adalah memberi tahu browser bahwa halaman ini akan terbagi menjadi beberapa kolom yaitu 20% dan 80%.
- Tag FRAME memberi tahu browser halaman yang dimaksud
- Tag NOFRAME bertugas sebagai alternatif apabila browser tak mampu menangani fungsi frame. Tulisan Maaf, browser anda tak mendukung Frame bisa anda ganti dengan tulisan lain atau kode HTML lain sehingga pengujung masih dapat menikmati websitemu.
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.
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:
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.
Apa bedanya frame dengan ifreme ya?