Frame HTML dapat digunakan untuk
menampilkan beberapa web page yang ditampilkan dalam satu window browser. Model
ini sering dipakai untuk memperjelas penyajian informasi dengan menu-menu yang
ada selalu ditampilkan.
Kekurangan penggunaan frame :
- Developer web harus menjaga dokumen
HTML lebih banyak
- Sulit untuk mencetak (print) semua
halaman web.
Tag Frameset :
·
Tag <frameset>
mendefinisikan bagaimana membagi window ke dalam fram-frame.
·
Setiap
frameset mendefinisikan sebuah set baris (row) atau kolom (colom)
·
Setiap nilai
rows/column menunjukkan jumlah tampilan area setiap row/colomn.
Tag Frame
- Tag <frame> tag mendefinisikan
nama dokumen HTML yang dimasukkan dalam frame.
Sebagai contoh dibawah ini adalah frameset
dengan dua kolom. Kolom pertama dengan lebar 25% dari browser window. Kolom
kedua dengan lebar 75% dari browser window. Dokumen HTML ”frame1.html”
diletakkan pada kolom pertama dan dokumen HTML ”frame2.html” diletakkan di
kolom kedua.
<frameset
cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Tag – tag Frame
|
Tag
|
Keterangan
|
|
<frameset>
|
Mendefinisikan kumpulan frame
|
|
<frame>
|
Mendefinisikan bagian dari windows
(sebuah frame)
|
|
<noframes>
|
Mendefinisikan bagian noframe untuk
browser yang tidak dapat menangani frame
|
|
<iframe>
|
Mendefinisikan suatu frame inline
|
Cara membuat frame HTML dengan dreamweaver :
- Buka halaman web baru
- Klik Insert – HTML – Frame
- Pilih model frame,contoh : top nested left
-
- Sehingga akan muncul design frame sebagai berikut :
Gambar . Design frame
- Tampilan
di atas terdiri dari tiga frame, yaitu frame top, frame left dan frame
main. Sehinnga untuk menyimpannya perlu disimpan dengan empat nama file.
Yaitu file untuk frame top (frametop.html), frame left (frameleft.html),
frame main (framemain.html) dan frame gabungannya, misalkan disebut frame
utama (frameutama.html).
- Source Code – Listing : frameutama.html
<html>
<head>
<title>Frame
Utama</title>
</head>
<frameset
rows="80,*" cols="*" frameborder="yes"
border="2" framespacing="2">
<frame src="frametop.html"
name="topFrame" scrolling="NO" noresize>
<frameset rows="*"
cols="142,*" framespacing="2" frameborder="yes"
border="2">
<frame src="frameleft.html"
name="leftFrame" scrolling="NO" noresize>
<frame src="framemain.html"
name="mainFrame">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
- Source Code – Listing : frametop.html
<html>
<head>
<title>Frame
Top</title>
</head>
<body>
Frame Top
</body>
</html>
- Source Code - Listing : frameleft.html
<html>
<head>
<title>Frame
Left</title>
</head>
<body>
Frame Left
</body>
</html>
- Source Code - Listing
8.4 : framemain.html
<html>
<head>
<title>Frame
Main</title>
</head>
<body>
Frame Main
</body>
</html>
Gambar . Contoh hasil frame
Frame Kolom
Berikut ini
adalah contoh frameset vertikal untuk tiga dokumen yang berbeda.
Contoh
:
Source
Code - Listing : frameabc.html
<html><title>Frame
tiga kolom</title>
<frameset
cols="25%,50%,25%">
<frame src="framea.html">
<frame src="frameb.html">
<frame src="framec.html">
</frameset>
</html>
Source
Code - Listing : framea.html
<html>
<head>
<title>Frame
A</title>
</head>
<body
bgcolor="#FFBF55">
<strong>Frame A
</strong>
</body>
</html>
Source
Code - Listing : frameb.html
<html>
<head>
<title>Frame
B</title>
</head>
<body
bgcolor="#FFBFFF">
<strong>Frame B
</strong>
</body>
</html>
Source
Code - Listing : framec.html
<html>
<head>
<title>Frame
C</title>
</head>
<body
bgcolor="#99FFFF">
<strong>Frame C
</strong>
</body>
</html>
Gambar . Frame kolom
Frame Baris
Berikut ini adalah contoh frameset horizontal untuk tiga dokumen
yang berbeda.
Contoh
- Listing : frame3baris.html
<html><title>Frame
tiga baris</title>
<frameset
rows="30%,30%,40%">
<frame src="framea.html">
<frame src="frameb.html">
<frame src="framec.html">
</frameset><noframes></noframes>
</html>
Gambar . Frame baris
Frame Navigasi
Berikut ini adalah contoh membuat frame
navigasi. Navigasi berisi sebuah dartar link dengan frame kedua sebagai target.
Frame kedua menampilkan dokumen yang di-link.frame target disebelah kanan
dinamakan ”showframe”
Contoh : Source Code - Listing : framenavigasi.html
<html><title>frame
navigasi</title>
<frameset
cols="120,*">
<frame
src="framenavmenu.html">
<frame
src="framenavisi.html"
name="showframe">
</frameset>
</html>
Source
Code - Listing : framenavmenu.html
<html>
<head>
<title>menu</title>
</head>
<body>
<p><a
href="framea.html" target="showframe">frame
A</a></p>
<p><a
href="frameb.html" target="showframe">frame
B</a></p>
<p><a
href="framec.html" target="showframe">frame C</a></p>
</body>
</html>
Source
Code - Listing : framenavisi.html
<html>
<head>
<title>isi</title>
</head>
<body>
<p>Selamat Datang</p>
<p>Percobaan Frame
Navigasi </p>
</body>
</html>
Gambar . Contoh navigasi
Jika di-klik menu frame A, maka akan muncul
:
Gambar Contoh navigasi
Frame Inline
Berikut ini adalah contoh membuat frame inline (frame di dalam sebuah
dokumen HTML).
Contoh : Source Code - Listing : frameinline.html
<html>
<body>
<iframe
src="home.html"></iframe>
<p>Some older browsers
don't support iframes.</p>
<p>If they don't, the
iframe will not be visible.</p>
</body></html>
Source
Code - Listing : home.html
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Belajar Web Design
</h1>
<h2>Belajar
Web Design </h2>
<h3>Belajar
Web Design </h3>
<h4>Belajar
Web Design </h4>
<h5>Belajar
Web Design </h5>
<h6>Belajar
Web Design </h6>
</body>
</html>
