::: HTML Survival Kit - Basic Frame Tags :::

To Frame or Not to Frame

As you may suspect by now, it is true that webpages would not necessarily function better with a Frame layout style, and you should use Frame layout quite selectively. You should not insist on using frames for the sake of using a frame layout.

However, it is equally true that Frame layout does provide a number of superb advantages over typical single webpage layout; such as (1) providing the user the consistency in page format, (2) allowing the maintainer to focus more on contents instead of spending unnecessary time to replicate the same layout style in every webpage, (3) allowing the maintainer to create a "composite view" screen consisted of multiple yet heterogeneous elements such as displaying a static content portion and a dynamic ticker portion in a single view.

Thoughtful layout conceptualization is a must for Frame layout style. You need to decide what format or "look" -- by differentiating "reactive" and "static" portions of page elements -- that you need before writing Frame components. For examples,

Frames can be used to keep footers and/or headers visible at all times. These may include a toolbar for selecting linked pages that will open in an adjacent frame above or below the toolbar.
Fixed or scrollable vertical linking lists can be made visible in a left or a right frame that will display the selection in the adjacent frame while keeping the list visible.

Each Frame is just a normal HTML file, however, because display of your frame components will be smaller than the full window, it is necessary for you to carefully size/design the display layout for each component HTML file.

Also, pretty much all popular browsers are fully "frame-capable" nowadays, but not *all* browsers are "frames-capable" and in such case, a <NOFRAMES> tag set should follow the <FRAMESET> tag as a contingency. So that those who with "frames-capable" browsers will be able to see your frame layout and others will still be able to view an alternate or normal page. See <NOFRAMES> tag for further detail on how to cope with "frames-challenged" audiences.

Basic Frame Tags

	<HTML> <HEAD>...</HEAD>	HTML Block and Header section
	<FRAMESET>	FRAMESET Block
	<NOFRAMES> <BODY ...> </BODY> </NOFRAMES>	NOFRAMES section
	<FRAME SRC="uri" ...> <FRAME SRC="uri" ...> </FRAMESET>	FRAMESET section
	</HTML>	HTML Block Anchor

Above is a skeleton frame layout tags. Any other frame tags will be ignored if they aren't wrapped inside of <FRAMESET> and </FRAMESET> tags.

A frame Document has a basic structure very much like your normal HTML document, except the BODY container is replaced by a <FRAMESET> container which describes the sub-HTML documents, or frames, that will make up the page. Frame syntax is similar in scope and complexity to that used by tables. Frames were an extension to HTML introduced by Netscape (and later picked up by Microsoft and AOL).

Actually, the way it works is quite simple. First, you must have at least two standard HTML pages saved already that you want to open up in the two or more frames. Once you have these files ready, you are ready to setup a frame index HTML page (not necessarily have to be called as 'index.html,' the name for a frame index page can be anything you'd like, i.e., 'index_frame_abc.html')

This frame index page tells your browser to divide the screen into frames as you defined in frame index page, and tells the browser which HTML file to open in which frame. In other word, this frame index page is kind of a "genealogical tree" for all your frames.

On this frame index page, you also need to write what you want to display in case that you're audience is using a "frames-incapable" browser to access your frame index page. For handling "frames-incapable" browser, see <NOFRAMES> tag. Alternatively, this may simple be a linking to a non-frames version of the same page.

Once you have a frame index page written, you are ready to view your pages in a frame layout!

<FRAMESET> Container Tag

This is the main container for Frame(s). It has 3 attributes ROWS, < SPAN CLASS="ssbBls">COLS and BORDER.

Any single Frame can also be subdivided into columns or rows. Columns division uses <FRAMESET COLS=...> and rows, <FRAMESET ROWS=...>. Details of ROWS and COLS are explained in next sections with examples.

<FRAMESET BORDER=0> is used to set frames without borders in between the two frames for a much cleaner look. Do not confused with <FRAME FRAMEBORDER="no" >, which serves the same function. (See FRAMEBORDER section)

A frame document (or a frame index page) has no <BODY> tag, and attributes that would normally be placed inside of the <BODY> tag (such as background texture, color definitions, etc.) cannot appear before the FRAMESET tag, or the FRAMESET will be ignored.

The FRAMESET tag must have a matching end tag (or an "anchor"), i.e., </FRAMESET>. Within the FRAMESET you can only have other nested containers such as FRAMESET tags, FRAME tags, or the NOFRAMES tag.

Bottomline is that you should close each nested container before adding another. Else, you'll start having a migraine pretty soon.

ROWS Attribute

The ROWS attribute takes values in a comma separated list. These values can be absolute pixel values, or percentage values between 1 and 100, or relative scaling values.

The number of rows is implicit in the number of elements in the list. Since the total height of all the rows must equal the height of the window, row heights might be normalized to achieve this. Thus, a missing ROWS attribute is interpreted just as another single row arbitrarily to be sized to fit by the browser.

Examples for three possible expressions -- pixel, % and scaling -- for value list are shown below;

pixels: A simple, static, explicit numeric value is assumed to be a fixed size in pixels. This is the most dangerous type of value to use since the size of the viewer's window can and does vary substantially. (and often consequently your frame layout will not be displayed as you intended)

a.html (100 pixels)

b.html (200 pixels)

c.html (80 pixels)

% (percentage): This is a simple, dynamic percentage value between 1 and 100. If the total is greater than 100, all percentages are scaled down to 100. If the total is less than 100, and relative-sized frames exist, extra space will be given to them. If there are no relative-sized frames, all percentages will be scaled up to match a total of 100.

a.html (15%)

b.html (70%)

c.html (15%)

* (wildcard)

The value on this field is optional. A single '*' character represents a dynamic, "relative-sized" frame and is interpreted (by the browser) as a request to give the frame all remaining space.

If there exist multiple relative-sized frames, the remaining space is divided evenly among them. If there is a value (or a multiplier) in front of the '*' (i.e., '3*'), that particular frame gets equivalent times of relative space (i.e., '3*' will be given three times of evenly divided remaining space).

For example, "2*, *" would give 2/3 of the space to the first frame, and 1/3 to the second.

Total Wildcards = 6*

a = a.html = 3* = 3/6
b = b.html = * = 1/6
c = c.html = 2* = 2/6

a.html (3* = 3/6)

b.html (* = 1/6)

c.html (2* = 2/6)

* = Height [100% - 20%] x 0.5

a.html (20%)

b.html (* = 40%)

c.html (* = 40%)

* = [Total Available pixel Height
- 100 pixels] x 0.5

a.html (*)

b.html (100 pixels)

c.html (*)

COLS Attribute

The COLS attribute takes values in a comma separated list. These values can be absolute pixel values, or percentage values between 1 and 100, or relative scaling values.

The number of rows is implicit in the number of elements in the list. Since the total height of all the rows must equal the height of the window, row heights might be normalized to achieve this. Thus, a missing COLS attribute is interpreted just as another single row arbitrarily to be sized to fit by the browser.

Examples for three possible expressions -- pixel, % and scaling -- for value list are shown below;

pixels: A simple, static, explicit numeric value is assumed to be a fixed size in pixels. This is the most dangerous type of value to use since the size of the viewer's window can and does vary substantially. (and often consequently your frame layout will not be displayed as you intended)

a = a.html = 100 pixels
b = b.html = 200 pixels
c = c.html = 80 pixels

% (percentage): This is a simple, dynamic percentage value between 1 and 100. If the total is greater than 100, all percentages are scaled down to 100. If the total is less than 100, and relative-sized frames exist, extra space will be given to them. If there are no relative-sized frames, all percentages will be scaled up to match a total of 100.

a = a.html = 15%
b = b.html = 70%
c = c.html = 15%

* (wildcard)

The value on this field is optional. A single '*' character represents a dynamic, "relative-sized" frame and is interpreted (by the browser) as a request to give the frame all remaining space.

For example, "2*, *" would give 2/3 of the space to the first frame, and 1/3 to the second.

Total Wildcards = 6*

a = a.html = 3* = 3/6
b = b.html = * = 1/6
c = c.html = 2* = 2/6

* = Width [100% - 20%] x 0.5

a = a.html = 20%
b = b.html = * = 40%
c = c.html = * = 40%

* = [Total Available pixel Width
- 100 pixels] x 0.5

<FRAME> Tag Attributes

<FRAME

SRC="uri"
NAME="window_name"
MARGINWIDTH="value"
MARGINHEIGHT="value"
SCROLLING="yes|no|auto"
NORESIZE
FRAMEBORDER="yes|no"

Above tag attributes are applicable to a single frame in a frameset. The FRAME tag is not a container so it has no matching end tag.

<FRAME SRC="uri" ...> Tag

The URI is a standard HTML document or universal resources identifier to be displayed in this particular frame. FRAMEs without SRC attributes are displayed as a blank space. (of course, i.e., nothing to display)

For example, a Frameset with four FRAME SRCs is like a TV screen displaying four different channels simultaneously in its quadrants. Each SRC will retain its own HTML settings. (color, background, etc.)

<FRAME NAME="window_name" SRC="uri" ...> Tag

The <NAME> attribute is used to assign a name to a frame so it can be referred to as (sorts of nickname), and subsequently targeted (or focused/clicked) by links in other frames in the same document.

The <NAME> attribute is optional; by default all windows are unnamed. Names must begin with an alphanumeric character. Named frames can have their window contents targeted with a TARGET attribute.

Without <NAME> attribute, no links among frames are possible, period.

Now, let's consider several cases that are closely related to <NAME> attribute;

Targets, Targets, Targets....

There are a number of things that you must know to get your frames to operate correctly. One of them is how to make links from one frame to the next.

Let's say that you have a link in a left frame (let's say the left frame currently displays "side.html") to the right frame (let's say the right frame has a NAME attribute of "right" and currently displays "body.html").

Left frame

"side.html"

(has a link to Right frame)

Right frame

"body.html"

(with FRAME NAME="right")

Hence, the link in the left frame (i.e., "side.html") is for loading the latest announcement. And the link in the left frame would look like this:

Now, if a user click on the link in the left frame, it will result in

Left frame

"side.html"

(has a link to Right frame)

Right frame

"update.html"

(with FRAME NAME="right")

That's it -- you can regard this FRAME NAME attribute as a dormitory room address (no pun intended), i.e., different peoples come and go over times but the dormitory room address remains the same. It's like contacting people in a dormitory room who you do not know their names, and you simply send a letter to the dormitory room address.

Let's think about "not" using NAME and TARGET attributes. Without specifying TARGET tag, "update.html" will be loaded into left frame itself (i.e., replaces left frame) instead of right frame as shown below.

Left frame

"update.html"

("side.html" was replace!)

Right frame

"body.html"

(with FRAME NAME="right")

Be sure that the TARGET is spelled exactly the same as the name of the frame you desire -- yes, NAME are case sensitive.

Be Respectable... <TARGET="_parent">

Also, if you have a link to someone else's page, you would write:

Yes, that is an underscore, _ before parent.

If you don't use this tag, 'www.xyz.edu' page will be loaded inside of one of your frames instead of being loaded into the entire browser screen. This would look bad, if you had 'www.xyz.edu' homepage open inside a frame that says "John's Funky Stuffs," and entire 'www.xyz.edu' homepage will be squeezed into whatever the size of "John's Funky Stuffs" frame.

The Counter Measure... <TARGET="_top">

Yes, that is an underscore, _ before top.

Let's think about the opposite situation when someone links and squeezes your page into one of his/her frame. As a result, your pages would be hopelessly crammed into a frame. (which you are always the last person to know about it)

The best way to obviate this 'not-so-funny' situation is to add a <BASE TARGET="_top"> to the your frame index page HEAD section.

Now, even someone forgets to put TARGET="_parent" to link/URI to your homepage (presuming that you're using a frame layout), your page will be loaded to his/her entire browser screen.

Open Sesame! <TARGET="new">

If the window name (=NAME attribute) in the TARGET tag is not already open (as a part of your FRAMESET), your browser will open and automatically name a new window for you. (= spawning of browser windows or you have two browser windows on your screen)

Or you can explicitly define TARGET="new" to accomplish the same.

<A HREF="uri.html"
TARGET="any_nonexisitent_bogus_name">
Click here and open a New Window</A>

<A HREF="uri.html" TARGET="new">
Click here and open a New Window</A>

<FRAME MARGINWIDTH="value" SRC="uri" ...> Tag

The MARGINWIDTH attribute is used when you want some control of the horizontal margins for a frame.

If you're using this attribute, assign value in pixels. Margins cannot be less than one pixel, of course -- so that frame objects will not touch frame edges.

The MARGINWIDTH attribute is optional -- by default, all frames are letting the browser decide on an appropriate margin width.

<FRAME MARGINHEIGHT="value" SRC="uri" ...> Tag

The MARGINHEIGHT attribute is just like MARGINWIDTH above, except it controls the vertical margins instead of the horizontal margins.

<FRAME SCROLLING="yes|no|auto" SRC="uri" ...> Tag

The SCROLLING attribute is used to describe if the frame should have a scrollbar or not.

Yes results in scrollbars which is always visible on the frame. No results in scrollbars which is never visible. Auto instructs the browser to decide whether scrollbars are needed (depending on browser window dimension, screen size and resolution, etc.), and place them where necessary.

The SCROLLING attribute is optional; the default value is auto.

<FRAME NORESIZE SRC="uri" ...> Tag

The NORESIZE attribute has no value. It is an attribute that indicates that the frame is not resizable by the user.

Users typically resize frames by dragging a frame edge to a new position. Note that if any frame adjacent to an edge is not resizable, that entire edge will be restricted from moving. This will effect the resizability of other frames.

The NORESIZE attribute is optional; by default all frames are resizable.

<FRAME FRAMEBORDER="yes|no" SRC="uri" ...> Tag

Please see below for an in-depth explanation.

<NOFRAMES> Tag

This tag is for a content provider (yes, that's you) who wants to create contingent, alternative content that is viewable by "frame-incapable" browsers. Standard frame-capable browsers (which fall into most of browsers nowadays) ignore all tags and data between start and end <NOFRAMES> tags.

Some older versions of Netscape (you'd be surprised to find out how many peoples still don't bother with updating their obsolete browsers!) require the <NOFRAMES> section to be within a <FRAMESET> tag.

In my opinion, it's always a good idea to put <NOFRAMES> tag section right after <FRAMESET> tag so that "frame-incapable" browsers will receive the normal page contents as soon as it accesses your page ridden with frames.

Remember, frame layout is your choice not your audience's -- they don't have any choice unless the link to your page says it will be a frame layout. Your audience is always king and always provide least aggravating alternatives if you're not so sure whether 100% of your audience can display your page correctly.

The "normal" page is bounded by the <NOFRAMES><BODY> and </BODY> </NOFRAMES> tag set. It is even possible to copy and paste your whole main page in between <NOFRAMES><BODY> and </BODY> </NOFRAMES> tags. (this is known as a "Big Easy" shortcut)

Viewed with a "frames-capable" browser

a = a.html = 20%
b = b.html = 80%

Contents viewed with a "frames-challenged" browser

Contents

     <NOFRAMES>
     <BODY>
          Contents
     </BODY>
     </NOFRAMES>

A typical "boilerplate" <NOFRAMES> body would look like;

<NOFRAMES>
<BODY BGCOLOR=#FFFFFF>
     Ah, You access this page using a "frames-incapable" browser.
     This page uses frame layout and you do need a browser
     capable of.

To see a non frames version, please click
<A HREF="home.html">here</A>
</BODY>
</NOFRAMES>

<FRAMEBORDER> Tag

If "yes", frame borders are drawn around the frame defined in SRC="uri". If FRAMEBORDER="no", there will be no borders for a given frame SRC="uri". This frame border feature is required only for Netscape.

With FRAMEBORDER="no", this "borderless/seamless" appearance over multiple frames works quite well, and you can't even tell whether there are two different pages open or one. (This really works well with a plain color background.)

Keep in mind that the same "borderless" look for a whole frameset can be also achieved by using <FRAMESET BORDER=0>. (See FRAMESET BORDER=0)

a.html (BORDER=3)

b.html (BORDER=0)

</FRAMESET>

a.html (BORDER=0)

b.html (BORDER=0)

</FRAMESET>

Step-By-Step Procedure for Creating Frames

Determine how many rows or columns you need - this is absolutely necessary to construct a good frame layout page. If you want to start with rows, use <FRAMESET ROWS=...>, and if you want columns, use <FRAMESET COLS=...>. (See more on FRAMESET tag)

If you want two, then you need to use the <FRAMESET ROWS=a,b> where a and b represent the height of the rows (or the width of the columns with <FRAMESET COLS=a,b>).

You can either use pixels or percentages or relative scaling factors. (See definitions of pixels or percentages or relative scaling factors)

For example, if you used <FRAMESET ROWS=50%,50%>, each frame would take up half of the window. If you used <FRAMESET COLS=30,*,40%>, the first column would take up 30 pixels, the third one would take 40%, and the middle one would take up the rest of the space available.

Here are some of popular frame layout schemes:

index (scrolling)	title (no scrolling)
main body (no scrolling)

title (no scrolling)
side (no scrolling)	main body (scrolling)

logo (no scrolling)	title (no scrolling)
menu (no scrolling)	body (scrolling)
menu (no scrolling)	bottom (no scrolling)

You then need to assign frames to the columns and rows. To do this, use the <FRAME> tag. (See more on FRAME tag)
There are several attributes to this tag. First, you can define whether the viewer can scroll through the frame or not. To determine this, use either <FRAME SCROLLING="yes"> or <FRAME SCROLLING="no">. (See more on FRAME SCROLLING attribute)
```
	
```
Then you need to assign the HTML page that is to appear in each frame. To do this, use the <FRAME SRC="uri">. The source must be a different page. Normally, it's a good idea to create a new directory in which you can keep the frame pages. (See more on FRAME SRC="uri" attribute)
```
	
```
You also need to assign a name to each frame that you can refer to. To name a frame, you simply add NAME="..." to the FRAME tag. For example, <FRAME SCROLLING="no" NAME="banner" SRC="banner.html">. (See more on FRAME NAME attribute)
```
	
```
Another variable is the <NORESIZE> attribute. Browsers can change the width or height of a frame by dragging it with the mouse. To prevent resizing, you can use <FRAME NORESIZE SRC="uri">. (See more on FRAME NORESIZE attribute)
```
	
```
If necessary, you can also divide up the original rows or columns into smaller columns or rows, respectively. To do this, you simply need to repeat the process of <FRAMESET>. Just be sure to keep your html neat so that you can actually READ it later! (See more on FRAMESET tag)
```
	
```
When you have finished creating frames, don't forget to close the <FRAMESET> by using </FRAMESET>.
```
	
```
Finally, don't forget to add <NOFRAMES> tag for "frames-incapable" audiences. (See more on NOFRAMES tag)

Updating Display of More than
One Frame at a Time

There are at least 2 ways that I use frequently:

Use a JavaScript

You can use JavaScript's onClick() event handler to call a function that will update the other frames. It could look like this:

<SCRIPT LANGUAGE="JavaScript">
function changeFrames()
{
parent.frames[1].location = 'foo.html'
parent.frames[2].location = 'bar.html'
parent.frames[3].location = 'foobar.html'
}
</SCRIPT>
...
<A HREF="#" onClick="changeFrame()">Change several other frames</A>

Using a HREF="#" causes the frame with the link not to change. However, if you wanted to load a new page in the current frame also, you could use this:

<A HREF="nextpage.html" onClick="changeFrame()">Change this frame and others</A>

Use another JavaScript

<SCRIPT LANGUAGE="JavaScript">
function twoframes()
{
top.frames[n].location="foo.html"
top.frames[n].location="bar.html"
}
</SCRIPT>

To call this function from HTML:

<A HREF="JavaScript:twoframes()">Click here to change two frames</A>

Change the 'n' in each line to the correct frames array number (look at the index page file and count the SRC="...html" files down from the top, starting with 0 instead of one).

An onClick="twoframes()" added to the tag will also work for form buttons, image maps, etc. As you know well, don't forget to put the javascript funtion portion in between the <HEAD> and </HEAD>tags of your HTMl file.

How can I print all Frames at once?

Wouldn't be nice? Currently, most browser doesn't provide an automatic way to print more than one frame at each print que. You can print all frames in a screen by clicking in each one to select it, then choosing "Print Frame" from the file menu.

A different option is provided by Microsoft Internet Explorer, which currently reads all frames in a FRAMESET document, but prints them all sequentially on the page rather than each in their own frame.

Jump back to HTML Survival Kit Table of Contents (TOC)