7. Using Frames
7.1
Introduction
Frames
are used to divide the browser window into smaller sub-windows. Each sub-window
displays a different HTML document.
7.2
Frame Tags
Two
major components:
Frameset
<FRAME>
<FRAMESET>
<IFRAME> </IFRAME>
<NOFRAME>
</NOFRAME>
Defines
content that will be displayed by browsers that cannot display frames
7.3
Frame Examples
Example
7-1: framerow_1.html
<HTML>
<!-- framerow_1.html -->
<!--
Relative size value:
<FRAMESET
ROWS="* , *"> ... 50%
50%
Percentages:
<FRAMESET
ROWS="25%, 50%, 25%"> ... ROW1: 25%, ROW2: 50%
ROW3: 25%
<FRAMESET
ROWS="20%, 2*, *"> ... ROW1: 20%,
ROW2: 2 times as large as
ROW3 ROW3:
-->
<HEAD>
<TITLE> Frame Example 1</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAME
SRC="topframe.html" SCROLLING="yes">
<FRAME
SRC="bottomframe.html">
</FRAMESET>
<NOFRAMES> Your Browser is too old. </NOFRAMES>
</HTML>
<HTML>
<!-- bottomframe.html -->
<HEAD>
<TITLE> BOTTOM Frame</TITLE> </HEAD>
<BODY BGCOLOR="white">
<CENTER>
BOTTOM FRAME
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- topframe.html -->
<HEAD>
<TITLE> TOP Frame</TITLE> </HEAD>
<BODY BGCOLOR="white">
<CENTER>
Top Frame
</CENTER>
</BODY>
</HTML>
Example
7-2: framercol_2.html
<HTML>
<!-- framecol_2.html -->
<HEAD>
<TITLE> Frame Example 1</TITLE> </HEAD>
<!--
<FRAMESET
COLS="* , *"> ... 50%
50%
<FRAMESET
COLS="250, 350"> .... COL1: 250 pixels; COL2: 350 pixels
<FRAMESET
COLS="20%, 80%"> ... COL1: 20% width, COL2: 80% width
-->
<FRAMESET COLS="*,*">
<FRAME
SRC="leftframe.html" >
<FRAME
SRC="rightframe.html" SCROLLING="yes">
</FRAMESET>
<NOFRAMES> Your Browser is too old. </NOFRAMES>
</HTML>
<HTML>
<!-- leftframe.html -->
<HEAD>
<TITLE> Left Frame</TITLE> </HEAD>
<BODY BGCOLOR="white">
<CENTER>
Leftside Frame
</CENTER>
</BODY>
</HTML>
<HTML>
<!-- rightframe.html -->
<HEAD>
<TITLE> Right Frame</TITLE> </HEAD>
<BODY BGCOLOR="RED">
Right side Frame
</BODY>
</HTML>
Example
7-3: A N rows by N columns frame example
<HTML>
<!-- nbyn.html -->
<HEAD>
<META NAME="GENERATOR" Content="Microsoft
Visual Studio 6.0">
<TITLE> Multiple
Rows and Cols</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*" COLS="*,*,*">
<FRAME
SRC="1by1.html" SCROLLING="yes">
<FRAME
SRC="2by2.html" SCROLLING="yes">
<FRAME
SRC="3by3.html" SCROLLING="yes">
<FRAME
SRC="4by4.html" SCROLLING="yes">
<FRAME
SRC="5by5.html" SCROLLING="yes">
<FRAME
SRC="6by6.html" SCROLLING="yes">
<FRAME
SRC="7by7.html" SCROLLING="yes">
<FRAME
SRC="8by8.html" SCROLLING="yes">
<FRAME
SRC="9by9.html" SCROLLING="yes">
</HTML>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft
Visual Studio 6.0">
<TITLE> 1 by 1
</TITLE>
</HEAD>
<BODY>
1 x 1 = 1
</BODY>
</HTML>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft
Visual Studio 6.0">
<TITLE> 1 by 1
</TITLE>
</HEAD>
<BODY>
9 x 9 = 81
</BODY>
</HTML>
Activities