HTML Frames
Ask a question- Introduction to Frames
- Creating Frames
- Example #1
- Example #2
- Example #3
- Attributes of the <FRAMESET> Tag
- Attributes of the <FRAMESET> Tag
- How can you avoid errors arising from non-compatible browsers?
- Designating a frame with a hyperlink
Introduction to Frames
You can display multiple HTML pages in different areas at once. These areas are called frames.
 | Frames are not found in the specifications of HTML 3.x, so the Document Type Declaration must show the page as having been written in HTML 4.0. |
Creating Frames
To create a website containing frames, create a frame layout file. This HTML file is special in that it uses the <FRAMESET> tag instead of the <BODY> tag. <FRAMESET> is the tag which defines frame sizes by their dimensions, in pixels or as a percentage (%).
Here are three examples:
- 2 vertical frames
- 2 horizontal frames
- 1 vertical and 2 horizontal frames
Example #1
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="left">
<FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>
Example #2
<FRAMESET ROWS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="left">
<FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>
Example #3
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="left">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm"
NAME="upper_right">
<FRAME SRC="frame3.htm"
NAME="lower_right">
</FRAMESET>
Attributes of the <FRAMESET> Tag
| Attribute | Value | Action |
|---|---|---|
| Rows | percentage (between 1 and 100)
value in pixels By setting only one of the values and giving the other the value *, the value adjusts automatically. | Horizontal frame |
| Cols | percentage in pixels
By setting only one of the values and giving the other the value *, the value adjusts automatically. | Vertical frame |
| Frameborder | YES
NO | Indicates whether or not the frame has a border |
| Border=n | n is a value which defines the size of the border | Indicates the size of the border |
| BorderColor | Name of the color
Hexadecimal value of the color | Indicates the border's color |
| Framespacing=n | n is a value which defines the space between the frames | Indicates the space between the frames |
Attributes of the <FRAMESET> Tag
The <FRAME> tag is used to define one or several frames within the <FRAMESET> tag
| Attribute | Value | Action |
|---|---|---|
| Src | URL | Defines where in the page to display the frame |
| NAME | "Name" | Defines a name which will allow another document to be displayed in the frame, using the Target attribute |
| Marginwidth=n | n is an integer specifying the number of pixels | Size of side margins |
| Marginheight=n | n is an integer specifying the number of pixels | Size of top and bottom margins |
| Frameborder | YES
NO | Determining whether or not the frames will have a border |
| Border=n | n is an integer specifying the number of pixels | Size of the space between the frames (for Netscape only) |
| Noresize | (None) | Forbids the user from resizing the frames (Not the default value) |
| Scrolling | YES
NO AUTO | Enables or disables the scrollbar (Auto lets the browser decide if it's needed) |
How can you avoid errors arising from non-compatible browsers?
The <NOFRAMES> and </NOFRAMES> tags are used to specify which HTML text to display if the browser does not have frames enabled. The text between the <NOFRAMES> and </NOFRAMES> tags must therefore contain the <BODY> ... </BODY> tags.
Example:
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="left">
<FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>
<NOFRAMES>
<BODY>
This HTML requires a browser that supports frames.
We apologise for the inconvenience.
</BODY>
</NOFRAMES>
Designating a frame with a hyperlink
To display links in one or more frames, use the TARGET attribute in the <A HREF ..> tag to specify the name of the frame (as given by the NAME attribute in the <FRAME> tag) in which the link's target will be shown.
For example:
<A HREF="page.htm" TARGET="left">
| Value | Action |
|---|---|
| _self | Displays the target in the same frame as the link |
| _parent | Displays the target in the next-highest-level frame |
| _blank | Displays the target in a new window |
| _top | Displays the target in the whole browser window |
