HTML Frames

HTML Frames

1) Introduction to Frames2) Simple Frame Example3) Frame Layout4) Excercise

Why Frames?

Able to present documents in multiple views

Views can be in independent windows/subwindows

Information can be varied in different windows while navigation is controlled in one window

Frame Layout<FRAMESET rows/cols=“x(%),y(%)| pix x, pix y” frameborder=[yes,no] >

<FRAME src=“html file” name=“string” scrolling=“yes/no/auto” noresize >

<NOFRAMES><P>If you have a non-frame compatible browser, this message will show upinstead of the frames. Usually you use it to tell users to go get a frame-compatible browser and come back.</P></NOFRAMES>

</FRAMESET>

This is an example of a simple frame document :

<HTML><TITLE> Simple Frameset document </TITLE><FRAMESET cols=“20%, 80%” frameborder=“no”> <FRAMESET rows=“100, 200”>  <FRAME src=“row1.html” name=“ rcoltrow”> <FRAME src=“row2.html” name=“rcolbrow” scrolling=“auto”> </FRAMESET> <FRAME src=“col2.html” name=“lcol”></FRAMESET></HTML>

Simple Frame Example

Create 7 FILE as follows..!Index.html

Output from index.html

atas.html

Note : File headersmaga2.jpg harus berada 1 lokasi dengan file htmlnya

Output from index.html after we make atas.html

bawah.html

• Name=“isinya” adalah untuk mendefinisikan nama frame• Untuk memanggil frame tersebut nantinya cukup dengan memanggil nama framesnya saja yaitu “isinya”

Output from index.html after we make bawah.html

kiri.html

Output from index.html after we make kiri.html

menu.html

Target=“isinya” adalah frame tujuan dimana file isi.html harus diletakan, tetapi terlebih dahulu framenya harus diberi nama seperti pada slide sebelumnya

• Tag <A HREF>…..</A> is used to link the document or URL Example :

Script above used to link text Home to isi.html document

If we’ll link image, use script like this :

< A HREF=“isi.html” target=“isinya”><img src=“gambar.jpg”></A>

Output from index.html after we make menu.html

isi.html

File di atas adalah file yang dibuat pada pertemuan I

Output from index.html after we make isi.html

kanan.html

Output from index.html after we make isi.html

HTML Frames

Documents