Roots
Back

Frames

Should you use frames?

Frames are used to position elements of your page (navigation, heading, etc.) and to make them distinct from other areas. They can also be a useful way to keep relevant content static on a page while other parts scroll. The same look and functionality can be achieved with CSS however, and when possible, this is a better idea.

How to use frames

To create a frame on your page, you use the <frameset> tag, with the attribute rows, or columns set. This must be included before the <body> tag on your page.

<frameset cols="cols-value(s)">
<frameset rows="rows-value(s)">

cols-value(s) - One value, in pixels or as a percentage, or an asterisk (*) to signify using the remaining space, per column.
rows-value(s) - One value, in pixels or as a percentage, or an asterisk per row.

For example;

<frameset cols="200,*,150">

For each row or column you need to add a <frame> tag. In this tag you must set the attribute src. This is the full or relative address of the page to display in the frame - you may want to create a new page for each frame, or you can specify pages you've already created. You should also give the frame a unique name, so that you can identify the frame when loading a new page in it.

<frame src="content.html" name="main">

To create a link to a page that will load in a specific frame, you write;

<a href="url" target="name">Link Text</a>

name - The name you gave the frame you want the page to load in.

You also need to include an option for browsers which cannot display frames. Put anything you want to display to viewers who cannot see frames between <noframes> tags.

<noframes> This is alternative text for those who cannot see frames. </noframes>

Examples

<frameset cols="200,*,150">
<frame src="blank.html" name="one">
<frame src="blank.html" name="two">
<frame src="blank.html" name="three">
</frameset>
<noframes>
This is alternative text for those who cannot see frames.
</noframes>

View this frame layout in a new page.

<frameset rows="100,*">
<frame src="blank.html" name="one">
<frameset cols="100,*">
<frame src="blank.html" name="two">
<frame src="blank.html" name="three">
</frameset>
</frameset>
<noframes>
This is alternative text for those who cannot see frames.
</noframes>

View this frame layout in a new page.