Frame HTML

Dengan frame kita bisa membuat beberapa document HTML ditampilkan secara bersama-sama dalam satu browser.

Sekarang dengan berkembangnya CSS maka frame HTML mulai ditinggalkan oleh web developer terutama setelah keluarnya HTML versi 5. Walaupun begitu, mempelajari frame HTML bisa memperkaya pemahamanmu dalam mendesaign web page yang bagus.

Generic frame page

Frame HTML yang umumnya ada yaitu yang terdiri dari dua frame. Satu frame berisi menu dan frame yang lainnya adalah content. Jadi saat seseorang mengklik link di frame menu maka link tersebut akan terbuka di frame sebelahnya. Contoh frame klasik bisa kamu lihat di bawah.

Code klasik frame:

<html>
<body>
<frameset cols="30%,*">
<frame src="http://bangjuju.com/tut/html/menu1.html">
<frame src="http://bangjuju.com/tut/html/content1.html">
</frameset>
</body>
</html>
  • [frameset] – frame tag utama
  • [frameset cols="#%, *"] – width/lebar setiap frame. Dari contoh diatas, frame satu memiliki width 30% dan frame dua memiliki width sisanya yaitu 70%.
  • [frame src=""] – URL yang akan diload di frame.

Web developer biasanya memberi nama frame utama ini dengan [index.html].

Menambahkan title frame

Dari frame diatas, kalau kamu ingin menambahkan title dibagian atasnya kamu hanya perlu menambahkan frameset rows dibagian atas. Lihat code di bawah.

Code banner frame:

<html>
<body>
<frameset rows="20%,*">
<frame src="http://bangjuju.com/tut/html/title1.html">
<frameset cols="30%,*">
<frame src="http://bangjuju.com/tut/html/menu1.html">
<frame src="http://bangjuju.com/tut/html/content1.html">
</frameset>
</frameset>
</body>
</html>

Frameset cols artinya membagi frame menjadi beberapa column sedangkan frameset rows artinya membagi frameset menjadi baris-baris. Masing-masing frameset cols maupun frameset row masih bisa dibagi menjadi beberapa frame lagi atau subframe.

Frameborder dan framespacing

Kalau kamu lihat hasil dari frame diatas maka kamu akan melihat bahwa ada batas tebal antara frame. Dengan frameborder dan framespacing maka kamu bisa memodifikasi batas ini.

  • [frameborder="#"] – Mengatur apakah ada border atau tidak.
  • [border="#"] – Mengatur width border.
  • [framespacing="#"] – Mengatur width border, untuk Internet Explorer.

Border dan framespacing sebenarnya sama, hanya saja beberapa web browser cuma bisa mengenali salah satunya saja. Jadi gunakanlah keduanya secara bersamaan.

Code frame tanpa border:

<html>
<body>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="http://bangjuju.com/tut/html/title1.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="http://bangjuju.com/tut/html/menu1.html">
<frame src="http://bangjuju.com/tut/html/content1.html">
</frameset>
</frameset>
</body>
</html>

Noresize dan scrolling

Kita bisa memodifikasi frame lebih lanjut menggunakan attribute noresize dan attribute scrolling.

  • noresize – menentukan apakah frame bisa diatur oleh visitor (“true” atau “false”)
  • scrolling – menentukan apakah frame bisa discrolling (“true” atau “false”)

Code modifikasi frame:

<html>
<body>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="http://bangjuju.com/tut/html/title1.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="http://bangjuju.com/tut/html/menu1.html" scrolling="auto" noresize>
<frame src="http://bangjuju.com/tut/html/content1.html" scrolling="yes" noresize>
</frameset>
</frameset>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>