Frame dan aplikasinya dalam html
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. Bagian berikut menerangkan atribut-atribut yang dapat ditambahkan pada elemen frame :
| Atribut | fungsi |
| ROWS | Menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat berupa pixel, % setelah nilai atau nilai relatif (*) |
| COLS | Fungsi sama sepert ROWS hanya digunakan untuk kolom. |
| NAME | Menentukan nama frame sehingga dapat berfungsi sebagai TARGET dari URL lain |
| SRC | Berisi URL yang menjadi sumber dari frame |
| MARGINWIDTH | Untuk menentukan margin frame bagian kanan dan kiri. contoh, marginwidth="10" memberi jarak 10 pixel antara batas kiri dan kanan. |
| MARGINHEIGHT | Menetukan margin frame bagian atas dan bawah. |
| SROLLING | Menentukan scrollbar pada frame Diisi dengan YES selalu menampilkan scrollbar, NO tidak menapilkan srollbar. Nilai yang ada yaitu: yes, no, dan auto (nilai defaultnya adalah auto). |
| BORDER | Mengubah ketebalan pembatas frame |
| BORDERCOLOR | Memberikan warna pada pembatas frame |
| FRAMEBORDER | Pembatas frame. Dapat dihilangkan dengan memberi nilai NO. Sebagai contoh, frameborder="0" menghilangkan garis, dan frameborder="1" memunculkan kembali. Secara default frameborders bernilai 1. |
| NORESIZE | Mencegah pengguna untuk mengubah ukuran dari frame |
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.
Untuk membuat halaman web yang memiliki frame biasanya akan dibuat satu halaman web utama yang memiliki frame ditambah dengan file-file HTML lainnya yang digunakan sebagai sumber untuk frame tersebut. Berikut akan diberikan contoh penggunaan frame pada suatu halaman web.
(Satu.html)
<html>
<body bgcolor=”#008080″>
<h1 align=”center”><font face=”Arial”>Halaman Satu dari File Satu.Html </font> </h1>
</body>
</html>
(Dua.html)
<html>
<body bgcolor=”#ff0080″>
<h1 align=”center”><font face=”Arial”>Halaman Dua dari File Dua.Html</font></h1>
</body>
</html>
(Tiga.html)
<html>
<body bgcolor=”#aa00ff”>
<h1 align=”center”><font face=”Arial”>Halaman tiga dari File tiga.Html</font></h1>
</body>
</html>
File dengan framerows :
<html>
<frameset rows=”80,*”>
<noframes>
maaf hanya bisa tampil pada web yang mendukung frame
</noframes>
<frame src=”satu.html” name=”atas” scrolling=”no” noresize>
<frame src=”dua.html” name=”bawah”>
</frameset>
<html>
File dengan framecols
<html>
<frameset cols=”200,*”>
<noframes>
maaf hanya bisa tampil pada web yang mendukung frame
</noframes>
<frame src=”satu.html” name=”kiri” scrolling=”no” noresize>
<frame src=”dua.html” name=”kanan”>
</frameset>
<html>
Contoh gabungan dari framecols dan framerows
<html>
<frameset rows=20%,* border=10 bordercolor=”red”>
// <
Gambar 11.2 Halaman Web dengan Tiga Frame
Sebagai tambahan, file-file sumber dapat dibuat hyperlink ke file-file lain dengan mengarah ke salah frame yang ada di halaman web tersebut. Berikut akan diberikan contoh file yang membuat target ke salah satu frame.
(judul.html)
<html>
<body bgcolor=”yellow”>
<h1 align=”center”>Mas Awonk’S Web</h1></body>
</html>
(home.html)
<HTML>
<HEAD>
<TITLE>Membuat Frame- Home</TITLE>
</HEAD>
<BODY BGCOLOR=”#000ddd”>
<H1 ALIGN=center>Halaman Utama.</H1>
<p>Selamat datang di homepage saya! Homepage ini pasti menarik dan
mudah diikuti karena guru saya, selain SANGAT menarik dan menyenangkan, telah mengajarkan cara yang benar dalam membuat Frame!</P>
<CENTER><img src=”work.gif”><br>Selamat menikmati!</CENTER>
</BODY>
</HTML>
(Daftar.html)
<HTML>
<HEAD>
<TITLE>Membuat Frame- Daftar</TITLE>
</HEAD>
<BODY BGCOLOR=”#aaaFFF”>
<H3>—Daftar—</H3>
<A HREF=”home.html” TARGET=”bawahkanan”>Home</A><P>
<A HREF=”satu.html” TARGET=”bawahkanan”>Ke File-1</A><BR>atau
<A HREF=”dua.html” TARGET=”bawahkanan”>ke File-2</A><P>
atau kunjungi<BR>
<A HREF=”http://www.technogetz.wordpress.com/” TARGET=”_top”> TECHNOGETZ WESITE</A> <BR>
<A HREF=”http://tutorial.pts.co.id/” TARGET=”_top”>Web Tutorial</A>
</BODY>
</HTML>
(Master.html)
<html>
<frameset rows=20%,* border=0>
<noframes>
maaf hanya bisa tampil pada web yang mendukung frame
</noframes>
<frame src=”judul.html” name=”atas” scrolling=”no” noresize>
<frameset cols=20%,*>
<frame src=”daftar.html” name=”bawahkiri” noresize>
<frame src=”home.html” name=”bawahkanan”>
</frameset>
</frameset>
<html>
Gambar 11.3 Hasil Akhir Halaman web dengan Frame
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
http://frames2.html
</body>
</html>
Jalankan iframe.html dan anda akan melihat frames2.html berada ditengah-tengah halaman anda.
Sumber:
- http://www.dhimasronggobramantyo.com/artikel/Pelajari_kegunaan,_kelebihan_dan_kekurangan_penggunaan_Frames_pada_HTML
- http://www.widianto.org/2009/01/07/html-6-membuat-frame/
Komentar
http://www.widianto.org/2009/01/07/html-6-membuat-frame/
emang aku sumbernya dari situ untuk frame. di bawah aku cantumkan 2 sumber
Dalam salah satu laman website saya coba pakai frame yang nge link ke facebook, tapi kok laman fb itu ngga muncul ya? sementara kalau saya link kan ke website selain fb bisa muncul. Terima kasih