Frame digunakan untuk
membangun web page yang memungkinkan penampilan beberapa web
pagedalam satu window browser. Konsepnya hampir sama dengan table. Perbedaannya
terletak pada isi baris dan kolom. Pada table isi baris dan
kolom berupa sel, sedangkan pada frame berupa dokumen HTML
atau file lainnya.
Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset yang akan membungkus keseluruhan file frame. Perlu diingat bahwa pendefinisian frameset tidak boleh dituliskan dalam tag<body></body>. Untuk membuat frame pada dokumen HTML digunakan tag <frameset> dan<frame>. Berikut penjelasan tag-tag tersebut beserta atribut-atributnya :
Tag-Tag Pembentuk Frame
|
Elemen
|
Penjelasan
|
|
<frameset> </frameset>
|
Mendefinisikan sebuah frame dalam
HTML.
|
|
<frame>
|
Untuk menampilkan dokumen pada suatu
frame. |
|
Atribut-Atribut Tag
|
|
|
<frameset> </frameset>
|
|
|
rows="..."
|
Membagi frame ke dalam baris
secara otomatis
sesuai dengan ukuran yang ditentukan (lihat : Aturan pendefinisian ukuran). |
|
cols="..."
|
Membagi frame ke dalam kolom
secara otomatis
sesuai dengan ukuran yang ditentukan (lihat : Aturan pendefinisian ukuran). |
|
<frame>
|
|
|
src="..."
|
Menentukan nama file yang akan ditampilkan
pada
baris/kolom frame. |
|
name="..."
|
Sebagai penanda yang akan digunakan oleh
hyperlink untuk mengaktifkan link halaman ke dalam frame tertentu yang sesuai dengan target name-nya. |
Aturan Pendefinisian Ukuran :
- Nilai angka dalam pixel.
- Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan area tampilan yang tesedia.
- Tanda bintang (*) yang menandakan sisa ruang yang masih ada.
Contoh :
Area
tampilan dibagi menjadi 2 baris :
<frameset cols="40%,*">
<frame src="url">
<frame src="url">
</frameset>
<frame src="url">
<frame src="url">
</frameset>
Area tampilan dibagi menjadi 3 kolom :
<frameset
cols="40%,20%,*">
<frame src="url">
<frame src="url">
<frame src="url">
</frameset>
Dengan mendefinisikan ukuran-ukuran tersebut maka frameset otomatis akan membagi area tampilan frame sebanyak pendefinisian ukurannya.
Membuat Link Pada Frame
Membuat link pada frame tidak jauh berbeda seperti halnya membuat link pada halamanweb biasa (tanpa frame). Hanya ada sedikit perbedaan, terutama pada target link. Berikut penjelasannya :
<frame src="url">
<frame src="url">
</frameset>
Dengan mendefinisikan ukuran-ukuran tersebut maka frameset otomatis akan membagi area tampilan frame sebanyak pendefinisian ukurannya.
Membuat Link Pada Frame
Membuat link pada frame tidak jauh berbeda seperti halnya membuat link pada halamanweb biasa (tanpa frame). Hanya ada sedikit perbedaan, terutama pada target link. Berikut penjelasannya :
|
Target Frame
|
|
|
Target
|
Penjelasan
|
|
_self
|
Digunakan apabila target frame adalah frame tempat link
berada. |
|
_top
|
Digunakan apabila target link adalah window tempat frame
berada. Dengan target ini definisi frame pada window browser otomatis akan hilang dan diganti dengan definisi frame yang baru (jika ada). |
|
_parent
|
Digunakan apabila target link adalah
setingkat di atas
frame link berada. Akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level di bawah definisi frame window. |
|
_blank
|
Digunakan apabila target link adalah
sebuah window baru.
|
Selain target-target di atas, kita juga bisa membuat link navigasi dengan cara memberi atribut "name" pada frame yang dituju, lalu target dari link-nya adalah name dari frametersebut.
Contoh :
- Frame name : <frame src="url" name="Nama">
- Target link : <a href="url" target="Nama">Link Navigasi</a>
IFRAME
Dalam dokumen HTML suatu frame dapat dibuat tanpa harus membagi seluruh windowbrowser dengan menggunakan tag <iframe>. Tampilan frame ini mirip dengan text-box, jikabrowser melakukan scroll maka frame ini juga ikut ter-scroll.
Tag <iframe> juga memiliki atribut src dan name yang fungsinya sama seperti pada tag<frame>, lalu width dan height untuk mengatur luas area frame yang akan ditampilkan, serta atribut align untuk mengatur posisi dari frame dalam dokumen HTML.
Contoh :
<iframe src="url" width="300" height="200" align="center" name="A">
