News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 15 – Frames

A page can be divided into frames using a special frame document. In this document the <frameset> element replaces the body element and contains only frame information. The element requires either the cols or the rows attribute to specify the number of frames and their sizes. Both attributes accept a comma-separated list where the size is given in either pixels, percentage or remaining space, as is indicated by an asterisk.

<frameset cols="100,25%,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

The remaining space can also be divided up among multiple frames in a specified proportion.

<frameset cols="100,2*,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

The color, size and display of the borders can be adjusted as necessary. Bordercolor sets the color of the border and both the border and framespacing attributes change the size of the border. Frameborder can be used to hide the borders or they can be removed completely by setting the border size to zero. By default, the border is 6 pixels wide.

<frameset cols="" bordercolor="red" border=10" frameborder="yes"></frameset>

Within the frameset a number of <frame> elements must be added equal to how many are specified with the cols or rows attribute. The source attribute, which gives the location of each document, needs to be included in this element. The frames are added from left to right and top to bottom.

<frameset cols="100,25%,*">
 <frame src="frame1.html">
 <frame src="frame2.html">
 <frame src="frame3.html">
</frameset>

For each frame the scrollbars, resizing and borderdisplay can be controlled. By default, the scrollbars are displayed automatically whenever they are needed. The scrolling attribute can be used to force the scrollbars to be either shown or not shown using the values “yes” or “no”. Including the noresize attribute will prevent the user from dragging the border in the browser to resize it. As noted in an earlier chapter, the value of such an attribute is commonly set to its own name (this is required by XHTML). The frameborder attribute can hide the border for a particular frame by settings its value to “no”.

<frameset cols="100,25%,*">
 <frame src="frame1.html" scrolling="yes">
 <frame src="frame2.html" noresize="noresize">
 <frame src="frame3.html" frameborder="no">
</frameset>

Frame names

Before a frame can be linked to it needs to be given a name.

<frameset cols="50%,50%">
 <frame src="frame1.html" name="frame1">
 <frame src="frame2.html" name="frame2">
</frameset>

Once named, it can be targeted using the target attribute for the anchor element.

<a href="newframe.html" target="frame1">Link for changing frame1</a>

This attribute can also be applied to the <base> header tag in order to set a default target.

<base target="frame1">

In addition to the frame name there are four other targets that have special meanings. _blank loads the document in a new window. _self loads it in the current frame. _parent loads it into the immediate frameset parent of the current frame, and thereby removes a frameset if there is any. Finally, _top removes all frames and loads the link into the full window.

<a href="newframe.html" target="_top">Full window</a>

Noframes element

The <noframes> element provides a way for older browsers not supporting frames to be able to view the page. It can contain an alternative page complete with the body element and any other tags.

<noframes>
    Sorry, your browser does not support frames.
</noframes>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours