» » Pelajari kegunaan, kelebihan dan kekurangan penggunaan Frames pada HTML

Pelajari kegunaan, kelebihan dan kekurangan penggunaan Frames pada HTML

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:
Contoh Frames
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:
Contoh Frames
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, dan frameborder="1" memunculkan kembali. Secara default frameborders bernilai 1.
  • MARGINHEIGHT dan MARGINWIDTH: 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.

0 Response to "Pelajari kegunaan, kelebihan dan kekurangan penggunaan Frames pada HTML"

Post a Comment

Subscribe to: Post Comments (Atom)