Doug's Frames Tutorial

Simply put, frames are a way to place multiple HTML documents (webpages) in a single browser window. This is a very handy layout tool and allows for interaction between frames. A link in one frame can "target" another frame, or a form input in a frame (document) can effect the properties of another frame.
tab

Let's look at the basics of frames-specific HTML tags and their attributes. Basically, you have an HTML document that defines the the location, number of frames and the documents that will appear in each frame. The standard HTML format applys except the <FRAMESET> tag replaces the <BODY> tag. The <FRAMESET> tag must contain at least two <FRAME>tags or a <FRAME> tag and a nested <FRAMESET> tag. The <FRAME> tag defines the content of the frame (a URL). The attributes of the <FRAMESET> tag that determine the size and relative positions of the frames are ROWS and COLS. The HTML of a frameset with two horizontal frames would look like this:

<HTML>
<HEAD>
<TITLE>Sample Frames </TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAME NAME="frame1" SRC="test.htm" SCROLLING="no" NORESIZE BORDERCOLOR="red">
<FRAME NAME="frame2" SRC="frametut.html" BORDERCOLOR="red">
</FRAMESET>
</HTML>

ROWS and COLS values default to pixels and allows "wildcards" ( * ). In the example above, the first frame (uppermost) is 80 pixels high, and the second frame occupies the remainder of the window. You will also notice the use of the NAME attribute in the<FRAME> tag. It is good practice to name all your frames so you can "target" them later. Now let's look at our next example, Example2, with the following frameset configuration: COLS=" 80,* "

Example2 demonstrates what the COLS attribute does; it breaks the window up vertically. I removed the NORESIZE attribute so the person viewing the page could resize the frame to see additional content ( Note: NORESIZE prevents the outside of the window from expanding to allow viewing also.). What will happen if you use the COLS and ROWS attributes together in the <FRAMESET> tag? You get a "checker board"effect. The following HTML and Example3 will illustrate what I mean:

The other major frameset configuration is nesting a frameset inside of another <FRAMESET> tag. The first frameset treats the nested one as another frame, so you have to configure it (outer frameset) to allow for the second frameset. In Example 4 below, I changed the COLS attribute to display the frameset in the second column, and added another column to display the last frame. Just remember, "More is not necessarily better." The HTML for a nested frameset looks like this:

As you can see there are myriad possibilities for combining framesets and frames. I'll leave that to your imagination. Now, I'd like to define the attributes for the <FRAMESET> and <FRAME> tags. As you might expect there are Netscape-isms and Explorer-isms (Are these actually words?). I will try to differentiate these as best I can, and you'll have fend for yourself for any more recent revisions than this tutorial covers. Here goes!

<FRAMESET> ATTRIBUTES
ATTRIBUTE	VALUES	FUNCTION	-ISMS
ROWS	pixels, %, *	Relative size of frames horizontally	Both
COLS	pixels, %, *	Relative size of frames vertically	Both
BORDER	pixels	Width of border	NS3.0
BORDERCOLOR	#rrggbb, colorname	Color of border	NS3.0
FRAMESPACING	pixels	Spacing of frames	IE3.0
FRAMEBORDER	yes, no	Do you want a border?	Both

<FRAME> ATTRIBUTES
ATTRIBUTE VALUES FUNCTION -ISMS
SRC "URL" source of HTML document Both
NAME ie. "name1" Name it, so it can be referenced Both
MARGINWIDTH pixels Width of margin Both
MARGINHEIGHT pixels Height of margin Both
SCROLLING yes, no, auto Controls scrolling and scrollbars Both
NORESIZE no value Prevents user from resizing frame Both
FRAMEBORDER yes, no Do you want a border? Both
BORDER pixels Width of border NS3.0
BORDERCOLOR #rrggbb, colorname Color of border NS3.0

The next example of frames is a popular configuration using "borderless" frames with some margins added for appearance. The following HTML works fine in Netscape 3.0, but I've found it doesn't work quite the same in IE3.01. So, I'll assume that other versions may act somewhat differently also. The point being: You should check your pages out on the browser(s) to make sure you are displaying what you reallly want. There are also "features" that will give you different appearances and functions within the browser(s) that may be of value (e.g., using a BORDERCOLOR attribute in a <FRAME> tag after calling out FRAMEBORDER="no" in the <FRAMESET> tag). The HTML and Example 5 of "borderless" frames follows:

WHAT ABOUT PEOPLE WITH BROWSERS THAT CAN'T DISPLAY FRAMES? Good question. That is why the <NOFRAMES> tag was created. Place it between the <FRAMESET> tags and redirect the people that can't see the frames to another page or Netscape's URL. This is important and polite to do. The HTML looks like this:

<FRAMESET COLS="120,*" >
<FRAME NAME="frame1" SRC="test2.htm" >
<FRAME NAME="frame2" SRC="frametut.html" >
<NOFRAMES>
<BODY BGCOLOR="BLACK" TEXT="RED" >
<H2>You need to upgrade to a frames-capable browser, fool</H2>
</BODY>
</NOFRAMES></FRAMESET>

These are most of the tags and attributes you need to create frames and configure them. There are a couple of other tags that contain the TARGET attribute that are worth mastering if you intend to use frames on your webpages. The <BASE> tag is used to globally indicate which window or frame you want the HTML links to be "targeted" to (opened in). The <BASE> tag can be overridden by placing a TARGET attribute in the specific link anchor tag. I usually put the <BASE> tag near the opening <BODY> tag. The TARGET attribute is placed in the <BASE> tag and "points" to the window or frame you wish the links to open in. Here's what it looks like:

<BASE TARGET="frame or window name">

Now you see why I said earlier to name all your frames. You may ask," How do you name a window?". Well, we just did. When you target a window or frame that the browser doesn't recognize it will open a window with that name. This is a cheap and easy way to open another window. If you want a little more control over the window's appearance you can open a window with Javascript and give it a name. You have to be careful targeting windows or you can end up with windows open all over the place. When you wish to designate where a specific link will open, you must place the TARGET attribute in an anchor tag. It would look something like this:

The TARGET attribute is used much the same way in the AREA tag and the FORM tag to direct the browser where to open the url reference. There are several reserved target names. You need to understand them to help control where links are opened. They are:

TARGET="_top" -- Opens the link in the entire window (when used in BASE tag breaks link out of frames).

TARGET="_self" -- Opens the link in the same frame.

TARGET="_parent" -- Opens the link in the parent frame.

TARGET="_blank" -- Opens the link in a new blank window.

tab One of the most common uses of these reserved names is <BASE TARGET="_top"> . Let's see what this does. Press the button below to open this document in full window.

tab If the document were in a frame it would have been reloaded into the full browser window by pressing the "OPEN" button. The other most handy use is to use TARGET=_self to load a link in the same frame or window. This can be handy when you want to present different menus one frame and display the content in the other frame. Press the "SAMPLE FRAME"button to see what I mean.

tab The document, test.htm should have loaded in the frame or window that you pressed the button in. Try pressing the buttons in some of the example frames created above to get an idea of what these different implementations of the TARGET attribute does.

tab Well this isn't by any means an exhaustive tutorial on frames. There are more properties of frames that can be accessed with the use of JavaSript and VBSript, but that's a couple of other subjects. There are many tutorials and documentation of frames in HTML 3.2 and Netscape on the Web. A few are listed below:

Netscape Frames
Netscape Targets
Webreference's Article