HTML frames
Frames give you the ability to display more than one page in the same window.
This lesson focuses on:
- The <frameset> tag
- The <frame> tag
- Dealing with browsers that do not support frames
- Inline frames
The <frameset> tag
The <frameset> tag specifies that a page will be composed of frames.
Attributes of the <frameset> tag:
-
rows
denotes that the frames should appear in rows
-
cols
denotes that the frames should appear in columns
-
border
a numeric value which sets the size of the border between frames
-
noresize
prevents the user from changing the intended size of your frames
The <frame> tag
The <frame> tag denotes a frame in a frames page.
Attributes of the <frame> tag:
-
src
denotes the location and name of the file that will appear in the frame.
-
name
denotes the name of the frame.
Example:
<frameset rows="50%, 50%"> <frame src="frameone.php" src="frameone" /> <frame src="frametwo.php" src="frametwo" /> </frameset>
In this example, there is a frameset with two rows. The first row is set to 50% of the height of the browser window, and the second row is set to 50% as well. The page "frameone.php" is put into the first row, and the page "frametwo.php" is put into the second row.
NOTE: The <frame> tag does not have an end tag.
Dealing with browsers that do not support frames
Not all browsers can handle frames, for such a situation, use the <noframes> tag. If someone tries to access a frames page through a browser that can not handle frames, they will see what is specified with the <noframes> tag.
Example:
<noframes> <body> Your browser does not support frames! </body> </noframes>
NOTE: When creating a frames page, do not use the <body></body> tags. However, if you use the <noframes> tag, sorround the data in it with <body></body> tags. Also, the <noframes> tag goes inside the <frameset> tag.
Example:
<frameset rows="50%, 50%">
<noframes>
<body>
Your browser does not support frames!
</body>
</noframes>
<frame src="frameone.php" src="frameone" />
<frame src="frametwo.php" src="frametwo" />
</frameset>
Inline frames
Another type of frame is an inline frame - a frame inside a webpage that is not within a frameset. An inline frame is declared with the <iframe> tag.
Attributes of the <iframe> tag:
-
src
denotes the location and name of the file that will appear in this inline frame
-
name
denotes the name of this inline frame
-
width
denotes the width of th is inline frame in pixels
-
height
denotes the height of this inline frame in pixels
Example:
<iframe src="http://www.yahoo.com" name="iframeone" width="110" height="110"></iframe>
This example will display the web address www.yahoo.com in an inline frame. The name of the inline frame is 'iframeone'.
Output:
Examples
Horizontal frames
This example demonstrates creating horizontal frames.
Vertical frames
This example demonstrates creating vertical frames.
Mixed frames
This example demonstrates creating mixed horizontal/vertical frames.
Mixed frames 2
This example demonstrates creating another set of mixed horizontal/vertical frames.
