Anda di halaman 1dari 4

FRAME HTML

Adalah layout sebuah HTML untuk menampilkan beberapa halaman web secara bersamaan dan ditampilkan dalam
sebuah window browser.

Berdasarkan fungsinya, frame terbagi atas:

1. Frame Kolom
adalah Frame yang menampilkan informasi dalam sebuah web browser dalam bentuk kolom. Misalnya kita akan
membuat tiga buah frame kolom dengan ukuran masing-masing frame adalah 30, 40, dan 30 (dilustrasikan 1
browser web memiliki ukuran total adalah 100). Kita akan membuat 4 buah halaman web, dengan komposisi 1
halaman web dan 3 halaman pendukung.

Sintaksnya: (halaman utama)


<frameset cols=”#,#,...”>
<frame name=”namaframe” src=”lokasi web”>
...................
</frameset>

contohnya:
<html>
<head>
<title>
contoh frame kolom
</title>
</head>
<frameset cols="30,40,30">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>

2. Frame Baris
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris.
Sintaksnya: (halaman utama)
<frameset rows=”#,#,...”>
<frame name=”namaframe” src=”lokasi web”>
...................
</frameset>

Contohnya:
<html>
<head>
<title>
contoh frame baris</title>
</head>
<frameset rows="30,50,20">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm"></frameset></html>
3. Frame Campuran
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris dan kolom.
Sintaksnya: (halaman utama)
<frameset rows=”#,#,...”>
<frame name=”namaframe_1” src=”lokasi web”>
...........
<frameset cols=”#,#,...”>
<frame name=”namaframe_2” src=”lokasi web”>
<frame name=”namaframe_3” src=”lokasi web”>
...........
</frameset>
</frameset>

Contohnya:
<frameset rows="*,*">
<frame src="homepage.htm" name="frame1">
<frameset cols="*,*">
<frame src="menu.htm" name="frame2">
<frame src="menu2.htm" name="frame3">
</frameset>
</frameset>

4. Frame Navigasi
Frame yang menampilkan informasi dalam sebuah web browser,apabila terdapat teks/gambar link bila di-klik
akan memunculkan halaman targetnya dalam frame tertentu.Contoh:
<FRAMESET ROWS="20%,80%" BORDERCOLOR="red">
<FRAME src="/judul.htm" NORESIZE>
<FRAMESET COLS="30%,70%" BORDER="10">
<FRAME src="/menu.htm" BORDERCOLOR="blue">
<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.

5. Frame InLine

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.

Catatan:

1. Kita dapat juga menempatkan gambar di dalam frame. Dalam folder contoh ada file dengan nama
world.gif. Cari dan copykan ke folder anda sendiri.

<FRAMESET COLS="50%,50%">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
<FRAME SRC="putri.html">
</FRAMESET>

2. Scrollbar yang anda lihat bisa diubah dengan YES, NO atau AUTO. YES berarti frame tersebut selalu memiliki
scrollbar- baik diperlukan atau tidak. NO artinya tidak akan ada scrollbar, bahkan jika isi frame anda sebesar
Pulau Jawa... browser hanya akan menampilkan sebanyak yang dia bisa. AUTO adalah defaultnya. Jika
diperlukan, scrollbar akan dimunculkan, jika tidak, scrollbar akan disimpan di tempat yang aman. Mari kita
hilangkan scrollbar tersebut.

<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="putri.html">
</FRAMESET>

3. _top adalah satu di antara 4 'magic targets'. Selengkapnya adalah _self, _blank, _parent dan _top. Hanya
inilah target yang dapat diawali dengan karakter selain alfa-numerik. Sebagai tambahan, setiap target berawalan
garis bawah_ yang bukan salah satu dari keempat 'magic targets' akan diabaikan. Untuk saat ini, _top adalah
satu-satunya yang perlu kita perhatikan.

Catatan- Jangan salah menuliskan TARGET="_top" dengan TARGET="_TOP". Pada umumnya HTML bisa
dituliskan dalam huruf besar maupun kecil, tetapi tidak dalam hal ini. Penggunaan _TOP dan bukannya _top
kadang-kadang menyebabkan link tersebut ditampilkan di browser baru dan bukan di browser yang sudah
terbuka. Karena sudah disinggung, itulah yang dilakukan oleh TARGET="_blank".... menampilkan link di
window browser yang baru.
Frames

Anda mungkin juga menyukai