HOMEArtikel HTML
Pelajari kegunaan, kelebihan dan kekurangan penggunaan Frames pada HTML
Ditulis oleh Dhimas Ronggobramantyo
Kategori: HTML
Dibaca 9989 kali
Banyak orang tidak suka menggunakan frames, saya setuju karena saya sendiri jarang memakai frames. Tetapi untuk beberapa kasus, frames sangat berguna. Jadi anda perlu mengetahui kasus anda sebelum memutuskan apakah ingin menggunakan frames apa tidak.
Frames memungkinkan sebuah jendela browser dibagi menjadi jendela-jendela yang lebih kecil. Tiap-tiap jendela menampilkan file HTML yang berbeda. Frames pertama kali muncul didalam browser Netscape Navigator 2.0 tetapi frames sekarang telah menjadi standar HTML 4.0 yang telah distandarisasi oleh W3C (World Wide Web Consortium). Kelebihan frames adalah memungkinkan bagian suatu halaman tidak bergerak ketika bagian yang berada di jendela lain di scroll kebawah/keatas. Hal ini berguna apabila kita melakukan scroll tetapi kita tetap ingin menampilkan suatu bagian, seperti iklan, menu dan sidebar.
Frameset
Sebuah halaman web yang dibagi kedalam frame, diletakkan bersama didalam
frameset. Sebuah halaman frameset juga memiliki header, tetapi tidak seperti
dokumen HTML biasa yang memiliki body, frameset tidak memiliki tag <body> hanya memiliki tag <frameset>
yang digunakan untuk mendefinisikan baris dan kolom setiap frames.
Untuk lebih jelasnya cobalah ketik kode berikut ini dan simpan dengan nama frames1.html:
<html>
<head>
</head>
<body>
Frames 1
</body>
</html>
Sekarang tulislah kode berikut ini dan simpan dengan nama frames2.html:
<html>
<head>
</head>
<body>
Frames 2
</body>
</html>
Sekarang kita harus membuat halaman frameset untuk menampilkan frames1.html dan frames2.html. Tulislah kode berikut ini dan simpan dengan nama main.html:
<html>
<head>
<title>Main frame</title>
</head>
<frameset cols="20%,80%">
<frame src="frames1.html" name="sidebar">
<frame src="frames2.html" name="main">
</frameset>
</html>
Jalankan main.html dan tampilannya kira-kira seperti ini:
Isi dari 2 dokumen HTML yaitu frames1.html dan frames2.html ditampilkan dalam
1 halaman didalam setiap frames. Isi dari frames yang sebelah kiri sebenarnya
merupakan file HTML biasa yaitu frames1.html dan sebelah kanan merupakan isi
dari frames2.html. Sekarang apabila kita ingin membuat frames seperti ini:
Kita cukup mengganti main.html menjadi seperti ini:
<html>
<head>
<title>Main frame</title>
</head>
<frameset rows="20%,80%">
<frame src="frames1.html" name="sidebar">
<frame src="frames2.html" name="main">
</frameset>
</html>
Frame attribute
Frame memiliki atribut untuk mengontrol bagaimana kita ingin menampilkan tiap frames. Atribut-atribut tersebut antara lain:
FRAMEBORDERS: Untuk menampilkan ukuran garis pembatas frames. Sebagai contoh,frameborder="0"menghilangkan garis, danframeborder="1"memunculkan kembali. Secara default frameborders bernilai 1.MARGINHEIGHTdanMARGINWIDTH: Mengatur jarak antara frames. sebagai contoh,marginwidth="10"memberi jarak 10 pixel antara batas kiri dan kanan.NORESIZE: Mengunci frames agar ukurannya tidak bisa diubah oleh pengunjung website.SCROLLING: Kondisi apakah anda ingin menampilkan scrollbar pada frames atau tidak. Nilai yang ada yaitu: yes, no, dan auto (nilai defaultnya adalah auto).
Sekarang coba ganti file main.html dengan kode berikut ini dan lihatlah perbedaannya:
<html>
<head>
<title>Main frame</title>
</head>
<frameset cols="20%,80%">
<frame src="frames1.html" name="sidebar" scrollbar="yes">
<frame src="frames2.html" name="main" noresize>
</frameset>
</html>
Targeting Frames
Salah satu tantangan dalam membuat frames adalah mengatur dimana link akan
ditampilkan. Secara default sebuah link dokumen akan diload di frame yang sama
dengan link tersebut. Tetapi apabila kita ingin menampilkan link pada frame yang
berbeda kita memerlukan atribut target pada tag <a> untuk mengarahkan hasil dari link ke frame yang dituju.
Sekarang cobalah ketik kode berikut ini dan simpan dengan nama frames3.html:
<html>
<head>
</head>
<body>
Frames changed
</body>
</html>
Ubahlah file frames1.html dengan kode dibawah ini:
<html>
<head>
</head>
<body>
<a href="frames3.html" target="main">Change frames 2</a>
</body>
</html>
Sekarang jalankan main.html, perhatikan apabila anda mengklik link diframes yang sebelah kiri maka frames sebelah kanan akan berubah menjadi frames3.html.
Inline Frames
Inline Frames merupakan tipe frames yang banyak digunakan. Micrsoft Internet
Explorer 3.0 memperkenalkan sebuah fitur yang disebut inline frames yang
didefinisikan dengan tag <iframe>. Inline Frames memungkinkan
sebuah frames dengan scrollbar dipasang ditengah-tengah kode HTML seperti halnya
image. Tag <iframe> beserta atributnya telah ada didalam standar W3C's HTML 4.0. Memasang inline frame caranya hampir sama dengan
memasang image didalam sebuah dokumen HTML. Didalam <iframe> kita mengatur
tinggi dan lebar frame dan dokumen HTML yang ingin ditampilkan. Sama seperti
images kita bisa mengatur align dan mengatur atribut hspace dan vspace.
Kita pun dapat mengatur garis sama seperti images.
Oke, langsung saja coba kode berikut ini dan simpan dengan nama iframe.html:
<html>
<head><title>Inline Frame</title></head>
<body>
<h2>Inline Frames</h2>
your contents here
<iframe src="frames2.html" width="150" height="100" align="left" hspace="12"></iframe>
</body>
</html>
Jalankan iframe.html dan anda akan melihat frames2.html berada ditengah-tengah halaman anda.
Selesai sudah semuanya, anda sekarang telah memahami penggunaan frames. Pergunakan frames dengan bijak.
Komentar [17]
Dikirim oleh Tias pada 01 November 2007 09:18:46 WIB
tolong cari versi internet explorer
Dikirim oleh muhammad sadda pada 14 Mei 2008 09:15:54 WIB
mas tolong donk........
coz saya neyh adalah orang ssh banget .....
jadi tolong donk kirimin kekurangan dari PHP itu...
skrg ya mas ya....
Dikirim oleh muhammad syifa pada 19 Juli 2008 11:00:35 WIB
wah hebat...
Dikirim oleh zoel pada 16 Oktober 2008 02:36:48 WIB
salam kenal...
saya admin, desainer, dan jurnalis web www.ongisnade.net
bebrapa fitur di dalam nya jg pake frame2, dgn kombinasi flash...
anwy, nice artikel... blog saya di www.lunjap.co.cc
Dikirim oleh Riin pada 05 November 2008 09:13:09 WIB
Terima kasih atas infonya..
Dikirim oleh fauzi pada 10 Februari 2009 03:01:03 WIB
makasih banget aqtlh dpt gimanacara belajar html
Dikirim oleh Mr Programer Amatir pada 16 Februari 2009 05:08:42 WIB
Mohon artikel php tingkat lanjut. Seperti : obyek2 pada sebuah form ketika diklik (onClick), ketika diubah(onChange) dll. Saya yakin sangat bermanfaat bagi kita semua para programer.
Terima kasih atas perhatiannya
Dikirim oleh bondan pada 27 Mei 2009 09:35:50 WIB
mantap
Dikirim oleh benny-guntoro pada 28 Mei 2009 06:25:17 WIB
met pagi semuanya...!!!
Dikirim oleh Galih pada 26 September 2009 08:46:29 WIB
Mas Kalau mau menampilkan 3 frame bagaimana..?
Dikirim oleh harenz pada 10 Oktober 2009 08:03:34 WIB
mas tolong kirimin kekurangan dan kelebihan,perbedaan PHP AJAX dan PHP standard.tolong bdikirimin dan beritahukan sya.thax
Dikirim oleh harenz pada 10 Oktober 2009 08:04:32 WIB
mas tolong kirimin kekurangan dan kelebihan,perbedaan PHP AJAX dan PHP standard.tolong bgt dikirimin dan beritahukan sya.secepatnya!thax
Dikirim oleh bangunbi pada 01 Januari 2010 07:47:37 WIB
tx berat atas ilmunya mas....
sy tunggu terus postingan2nya
Dikirim oleh bangunbi pada 01 Januari 2010 07:47:48 WIB
tx berat atas ilmunya mas....
sy tunggu terus postingan2nya
Dikirim oleh rakhmat pada 16 Januari 2010 03:22:08 WIB
Mas ysh. saya punya Problem . Dan Help..
1. Bila file target mainframe bila kita isi dengan Target File Type .php kok tidak mau jalan (Justru di tunjukkan Dialog utk Download File php tsb.) .
2. Apakah memang Main Frame harus Type .html.
3. Mohon Masukan Solusi Mas dann Rekan Sekalian.
Wass.
Dikirim oleh rakhmat pada 16 Januari 2010 03:24:36 WIB
Mas ysh. saya punya Problem . Dan Help..
1. Bila file target atau isi Frame ( mainframe/letfframe/topframe) bila kita isi dengan Target File Type .php kok tidak mau jalan (Justru di tunjukkan Dialog utk Download File php tsb.) .
2. Apakah memang Frame harus Type .html.
3. Mohon Masukan Solusi Mas dann Rekan Sekalian.
Wass.
Dikirim oleh fauzi pada 20 Januari 2010 07:58:30 WIB
no coment
RSS Feeds
Valid XHTML Strict