Sunday 26 September 2010

Desain Frame di HTML

| Sunday 26 September 2010 | 0 comments

Frame
Frame digunakan untuk membagi suatu halaman web menjadi beberapa bagian. Beberapa bagian tersebut dapat digunakan untuk berbagai keperluan.


Adapun cara untuk membuat frame pada halaman web adalah dengan menggunakan perintah  :

<FRAMESET>
 <NOFRAMES>diabaikan jika browser mampu menampilkan frame </NOFRAMES>
</FRAMESET>


Atribut-atribut Frame 
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
MARGINHEIGHT
Menetukan margin frame bagian atas dan bawah.
SROLLING
Menentukan scrollbar pada frame Diisi dengan YES selalu menampilkan scrollbar, NO tidak menapilkan srollbar
BORDER
Mengubah ketebalan pembatas frame
BORDERCOLOR
Memberikan warna pada pembatas frame
FRAMEBORDER
Pembatas frame. Dapat dihilangkan dengan memberi nilai NO
NORESIZE
Mencegah pengguna untuk mengubah ukuran dari frame

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">
 <noframes>
  maaf hanya bisa tampil pada web yang mendukung frame
 </noframes>
 <frame src="satu.html" name="atas" scrolling="no" noresize>
   <frameset cols=30%,*>
     <frame src="dua.html" name="bawah">
     <frame src="tiga.html" name="bawah">
 </frameset>
<html>


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=”ababilnews.com” TARGET="_top">berita terkini</A> <BR>
<A HREF="w3-id.blogspot.com" 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>

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

turorial terbaru

Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com