Membuat Frame dengan HTML | mahanani

Membuat Frame dengan HTML

Baca Juga :

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
    clip_image001
  • Sehingga akan muncul design frame sebagai berikut :
    clip_image003

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   : framemain.html

<html>

<head>

<title>Frame Main</title>

</head>

<body>

Frame Main

</body>

</html>

  • Hasil di Browser :

clip_image005

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>

clip_image007

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>

clip_image009

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>

clip_image011

Gambar  Contoh navigasi

Jika di-klik menu frame A, maka akan muncul :

clip_image012

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>

clip_image014

Gambar  Frame inline

ditulis dengan judul : Membuat Frame dengan HTML

4 comments
7 Maret 2013 10.11

terimakasih atas materinya saya sangat terbantu

7 Maret 2013 16.20

Thanks infonya , Semoga bermanfaat :)

20 Mei 2013 18.29

thanks ya gan ini sangat membantu sekali

10 Juni 2013 10.38

Mantap Bro info nya
Hatur nuhun...

Poskan Komentar

Silahkan berikan komentar anda

Forum Multimedia Edukasi www.formulasi.or.id

Kategori