Introduction to HTML Frames

As this is a page about frames, It works best when it is in it's frame. If it is not then load the framed version of this page.

Judging by the amount of emails I get about frames they are obviously causing people a lot of problems. Frames give you the ability to separate the screen into several separate sections. In each section a different HTML page is loaded but the frames give the appearance of one page.

You need a separate HTML file which sets out the page.
This file has references to the other pages that you want to load.
The various frames should be given names, this way you can click on an item in one frame and it will load into another one.
They are positioned so that they replace the <BODY></BODY> tag. A frame page does NOT need the <BODY></BODY> tags. eg
```
<HTML>
<HEAD>The Title</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
```

If you are having trouble creating the frames download my Frame Samples Pack (6kb) which contains 4 different frame setups which you can use and adapt for your own pages.

Syntax

<FRAMESET> - This is what goes in place of the <BODY> tags, It tells the browser that you are using frames. Also in this tag goes all the options to do with how many Columns or Rows are used and how thick the border between frames is (if there is one at all). The optional commands used in this tag to set attributes such as frame colour, borders, margins apply to all the frames in the <FRAMESET>. It sets the options globally for the other frames put they can be over-ruled by individual options in the <FRAME> tag.
- COLS - Divides the page into columns. eg
```
<FRAMESET COLS="20%,80%">
```
  divides the screen up into two columns, the left hand one taking up 20% of the space and the right hand one taking up 80% of the space.
- ROWS - Divides the screen up into rows eg
```
<FRAMESET ROWS="10%,85%,5%">
```
  divides the screen into 3 rows, 10% at the top, 85% in the middle and 5% at the bottom. For both rows and columns as well as using the % space of the screen you can also define how many pixels each part is to use.
```
<FRAMESET ROWS="150,*">
```
  divides the screen into two rows, the top one being 150 pixels tall and the bottom one taking up the rest of the space. The "*" tells it to fit this row into what ever space is left.
- BORDER - (Netscape only) allows you to set the width of all the borders in pixels.
```
<FRAMESET ROWS="150,*" BORDER="1">
```
- FRAMEBORDER - (Internet Explorer Only) lets you say whether there is to be a border or not. The value is either yes or no. The value applies to all the frames.
- BORDERCOLOR - (Netscape Only) allows you to set the colour of all the borders using the normal #rrggbb HEX values. It can also be used in the <FRAME> tag to set the colour of individual frame borders.

<FRAME> - This is the tag that is used to name the URL's of the pages that are going in the frames that you set out with the <FRAMESET> tag. The optional commands used in this tag to set attributes such as frame colour, borders, margins apply only to the frame that you put them in. These options will over-rule any global options that you put in the <FRAMESET> tag. You can use as many of these optional tags in each <FRAME> tag as you want. The order that you put them in is not important.

SRC - give the URL of the page that is to go into the frame.
NAME - gives the frame a name so that when someone clicks on a link the page will load into the correct frame.

<FRAMESET ROWS="150,*">
<FRAME SRC="menu.htm" NAME="menu_frame">
<FRAME SRC="main.htm" NAME="main_page">
</FRAMESET>

This sets out a page with 2 frames as before "menu.htm" goes in the top frame and "main.htm" goes in the bottom one. The page will be set out like the picture below.

************************
*     menu.htm         *
*                      *
************************
*                      *
*                      *
*     main.htm         *
*                      *
*                      *
************************

It is important to name the frames so that then when someone clicks on a link you can direct it into the correct frame. The following link can be placed in the top frame (menu.htm) and when clicked it will load into the bottom frame (main.htm which we have named "main_page".)

<A HREF="page2.html"  TARGET="main_page">
This loads the page into the main frame.</A>

would load the page "page2.html" into the frame called "main_page" which in this example is the bottom frame.

*************************
*  m  *                 *
*  e  *                 *
*  n  *   main.htm      *
*  u  *                 *
*  .  *                 *
*  h  *                 *
*  t  *                 *
*  m  *                 *
*     *                 *
*************************

<HTML>
<HEAD>
<TITLE>A Left Hand Menu</TITLE>

<FRAMESET COLS="15%,*">
<FRAME SRC="menu.htm" NAME="menu_frame">
<FRAME SRC="main.htm" NAME="main_page">
</FRAMESET>

<NOFRAMES>This page uses Frames</NOFRAMES>
</HTML>

To make more complicated frame layouts you may have to use more than one <frameset> tag. Don't forget that however many <FRAMESET> 's you use you need that number of </FRAMESET> 's at the end.

*************************
*     menu.htm          *
*                       *
*************************
* s   *                 *
* i   *                 *
* d   * main.htm        *
* e   *                 *
* .   *                 *
* h   *                 *
* t   *                 *
* m   *                 *
*     *                 *
*************************

<HTML>
<HEAD>
<TITLE>3 Frames</TITLE>

<FRAMESET ROWS="15%,*">
<FRAME SRC="menu.htm" NAME="menu_frame">

<FRAMESET COLS="15%,*">
<FRAME SRC="side.htm" NAME="side">
<FRAME SRC="main.htm" NAME="main_page">
</FRAMESET>
</FRAMESET>

<NOFRAMES>This page uses Frames</NOFRAMES>
</HTML>

*************************
*     *  menu.htm       *
*     *                 *
*     *******************
* s   *                 *
* i   *                 *
* d   * main.htm        *
* e   *                 *
* .   *                 *
* h   *                 *
* t   *                 *
* m   *                 *
*     *                 *
*************************

<HTML>
<HEAD>
<TITLE>3 Frames</TITLE>

<FRAMESET COLS="15%,*">
<FRAME SRC="side.htm" NAME="side">

<FRAMESET ROWS="15%,*">
<FRAME SRC="menu.htm" NAME="menu_frame">
<FRAME SRC="main.htm" NAME="main_page">
</FRAMESET>
</FRAMESET>

<NOFRAMES>This page uses Frames</NOFRAMES>
</HTML>

SCROLLING - This sets whether the frame will have scroll bars. The options are yes, no & auto. The auto put scroll bars on if they are needed and leaves them out if they are not.
```
<FRAME SRC="top.htm" NAME="menu_frame"
 SCROLLING=no>
```
forces the browser to leave out the scroll bars for the top.htm page.
NORESIZE - This stops the frame from being resized by the user.
```
<FRAME SRC="top.htm" NAME="menu_frame"
 NORESIZE>
```
FRAMEBORDER - (Internet Explorer Only) lets you say whether there is to be a border or not in the specific frame that you put the tag. The value is either yes or no.
```
<FRAME SRC="top.htm" NAME="menu_frame"
 FRAMEBORDER=no>
```
MARGINWIDTH - Lets you set the left and right margin widths of the frame in pixels.
```
<FRAME SRC="top.htm" NAME="menu_frame"

 FRAMEBORDER=no MARGINWIDTH="5">
```
MARGINHEIGHT - Lets you set the top and bottom margin heights of the frame in pixels.
FRAMESPACING - (Internet Explorer Only) lets you set space around the frame.
BORDERCOLOR - (Netscape Only) allows you to set the colour of the border using the normal #rrggbb HEX values. It can also be used in the <FRAME> tag to set the colour of individual frame borders.

NOFRAMES - The contents of this are displayed if the persons browser does not support frames. It is placed after the </FRAMESET> tag.
```
<NOFRAMES>This page uses Frames</NOFRAMES>
```

Links in Menus

If you have a menu on your page but find that the new pages load into the menu frame instead of the main frame then check the Menu Question on the FAQ page. Also carefully read the FRAME Tag section on this page.

JavaScript Frames Support

Sometimes there are more complicated frames things that you want to do such as clicking on one link to update two or more frames. Click on Update Two Frames at Once on the menu in the left hand frame of this page to find out how to do this. If this page is surrounded by no frames then click here to load the frames then click on the link.

Tips

Do you really need frames? - A lot of places use to many frames unnecessarily and slow down their site by doing so. They should only be used when necessary not just for the sake of using them. Bear in mind that frames can make it hard to bookmark the page that you want.
How many frames do you need? - In virtually all cases two is more than enough, one being a menu to help navigation and the other frame displaying the actual content. I've used 3 frames for this page but the top one does not actually do anything, it's just a title bar. I could have easily used two frames.
Allow Flexibility - Don't make your frames so they fit pixel perfectly with the rest of your page. Remember that different people use different browsers, screen sizes and resolutions. It may look great on your computer but it may look totally rubbish on some one elses computer. Test the page by altering the size of the browser window, does it still look alright? Try changing the screen resolutions too.

Floating Frames and other advanced HTML tags are covered on my Advanced HTML Page

The

Advanced

HTML

Site