How to Create Frames in HTML

Creating frames is an efficient way to design web sites that allow for simple navigation. They are particularly useful for sites where the user will often be clicking back and forth through a number of menus. Frames are also useful because they do not force you to reload an entire page with each clicked link, allowing you instead to focus only on creating content for the particular parts of your site that will update.

Difficulty: Moderate

Instructions

1. Create a new HTML file. This file will load all the individual frames. You will create a separate HTML file for each frame.

2. Begin your file with the <frameset> tag. The variables you include in this tag will determine the number and size of frames.

3. Input variables according to the percentage of width to determine columns. For example, <frameset cols="25%,75%"> creates a page with two columns where each column is a separate frame. The first column will be 25% of the window's width and the second will be 75%. You can create more columns by giving different numbers of percentages. For example, <frameset cols="33%,33%,34%"> will provide you with three almost equal columns.

4. Create rows in the same way as columns. For example, to create two equal rows, use the tag <frameset rows="50%,50%">. Note that you cannot use rows and columns in the same tag. You can divide rows into columns or columns into rows, but you will need to create a second embedded frameset within the primary one.

5. List the source files for each frame after the frameset tag. Include a separate line for each frame, with the first being the leftmost frame. For example, the following tags will place "first.htm" in the 25% width column, and "second.htm" in the 75% column:<frameset cols="25%,75%"><frame src="first.htm"><frame src="second.htm">

6. Close with the frameset tag </frameset>.

Tips & Warnings

• Add "noresize" to the frameset tag if you do not want the user to be able to reset the frames' width and heights. Otherwise, most browsers will include a visible, movable border.