Exit tutorial


HTML Tutorial
Advanced Web Design: Frames - Page 1 of 5
Add HTML Frames To Your Web Site

To begin using frames on your web site, you will want to know how frames work. A page with frames is really a page split into 2 or more sections, each containing its own html document. Here is an example of how a page with 2 frames might look:

I am one html document, with my own url! I am another html document!

Just as it says, both frames are actually html pages. The page that houses the two frames is also its own html document. So let's begin by looking at how the main page can create frames. This is done by using the <FRAMESET> tag rather than the body tag at the beginning of the document. Here is an example of html code that will produce 2 frames, splitting the page down the middle:

<HTML>
<HEAD>
<TITLE>My cool page, now with frames!</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME SRC="page1.htm">
<FRAME SRC="page2.htm">
</FRAMESET>
</HTML>

If you want to see this example on it's own page, click here. So, what does all of this stuff do? Here's the list:

  1. <FRAMESET>
    This tag tells the web browser to expect a series of frames rather than a normal page.
  2. cols="50%,50%"
    This command inside the FRAMESET tag tells the browser to split the page into two columns. In this case, the columns would each take up 50% of the space on the sceen. You can change the percentages to anything you like. You can also use pixels rather than percentages if you wish. If you use percentages, be sure to keep the % sign after each number, or the browser will read the number as a pixel value.
  3. <FRAME SRC="page1.htm">
    This tag lets you tell the browser the url of the document in the frame farthest to the left.....
  4. <FRAME SRC="page2.htm">
    This tag will specify the url of the next frame, going from left to right.

The browser will read your frame src tags for the columns from left to right, so be sure to keep everything in the order you want it to appear. Now, suppose you wanted three frames accross the page, and not two? Well, all you need to do is modify your frameset tag and add another frame src tag for the third frame, like this:

<FRAMESET cols="33%,33%,33%">
<FRAME SRC="page1.htm">
<FRAME SRC="page2.htm">
<FRAME SRC="page3.htm">
</FRAMESET>

Now you will have three columns on the page, each column would be 33% fo the width of the page. Where does the other 1% go then? The browser will make up the space on its own the way it feels would be best. If you don't want to leave it up to the browser, you can change one value to 34% or define the value in pixels instead.

So what about adding frames that go from top to bottom? Maybe you want something that looks similar to this:

Frame 1 Frame2
Frame 3

Well, now what we do is add another FRAMESET tag, but this time we use the "rows" command. Here the code to get a page divided like the example above:

<FRAMESET cols="50%,50%">
<FRAME SRC="page1.htm">
<FRAMESET rows="50%,50%">
<FRAME SRC="page2.htm">
<FRAME SRC="page3.htm">
</FRAMESET>
</FRAMESET>

Click here to see this code work. The rows command reads from top to bottom, like the cols command reads from left to right. You can have as many columns or rows as you like, but be sure to nest your frameset tags the way you want the frames to appear. In the example above:

  • The first FRAMESET tag tells the browser to divide the page into 2 columns.
  • The FRAME SRC tag following it tells the browser the first column should be filled with page1.htm.
  • The next FRAMSET tag is nested inside the first FRAMESET tag. This tag tells the browser to divide the second column into two rows, rather than using a sinlgle html page to fill the column.
  • The next two FRAME src tags tell the browser to fill the two rows with page2.htm on the topmost row and page3.htm on the following row, moving from top to bottom.
  • Be sure to close all of your FRAMESET tags after they have been used.

Well, if you liked this stuff, there is more for you in the next section, which deals with the other neat stuff you can do. This includes linking between frames, setting frame attributes, and the noframes tag.

[Back to the Stage 3 Index]