Questy's, All about HTML

Questy's Learning Area, tutorials and lessons

Building a better web site ...

Questy's, Using Frames

Green & Purple line, Questy's Colors!

Frames are used to display both static and dynamic content.

Frame coding begins with the <frameset> tag. This container tag defines how many frames will appear on the page as well as the size of those frames. Using the ROWS attribute with the <FRAMESET> tag divides a Web page into horizontal frames. To separate a window into vertical frames, use the COLS attribute. This tag must be placed immediately after the </head> tag. The value for the ROWS or COLS attributes can be a percentage of the window size or a pixel value.

For example: <Frameset cols=“50%, 50%”> creates two equally sized horizontal frames.

Relative sizing means that the amount of space a frame uses within a window will be the same amount of space no matter what size that window is. The size of the frame is relative to the size of the window. Relative sizing uses percentages to set values for the ROWS or COLS attributes. For example, the <FRAMESET ROWS "25%,75%"> code would set the top frame to take up 25% of the window no matter what its size. So if the window were sized smaller, the size of this frame would still be 25% of whatever the new window size is.

Absolute sizing can also be used when setting values for the ROWS and COLS attributes. This means that the size of the frame remains the same, absolute, even when the window is resized. Absolute sizing uses pixel values. If you change the tag used in the above example to pixels, it would look as follows: <FRAMESET ROWS "25,75">. This code sets the top frame to a size of 25 pixels no matter what size the window is. So if this window were sized smaller, the size of this frame would still be 25 pixels.

Using the asterisk (*) wildcard for the second COLS attribute value means that this value is equal to the amount of space that is leftover after the previous values have been set. In this scenario, the first COLS value is 240, which will make the left-hand side of the screen 240 pixels wide. The second value is the * wildcard, which will make the right-hand side of the screen as wide as the remaining window space.

Also note that only the ROWS attribute or the COLS attribute is used in any one <FRAMESET> tag. Do not use both attributes within the same <FRAMESET> tag.

The SCROLLING attribute set to "yes" will enable a user to scroll through a window. The three values for the SCROLLING attribute are:
"yes" - A scroll bar is always visible.
"no" - A scroll bar is never visible.
"auto" - A scroll bar is visible only when the frame contents cannot be viewed all at once.

The NORESIZE attribute is used so that a frame cannot be resized. This attribute is used alone without a value.

The <frame> tag introduces each frame. It will always have the “src” attribute, which will tell the browser which html file will make up that frame. This location can be a local file or a URL. This is the process of targeting hyperlinks. Example: <frame src=”file.htm” name=”body”>. For this to work, htm files in your site must be named.

If all the pages contained in the links you provide should be opened in the same frame, you should designate that in the <head> tag of your code:

To make one frame static, add “scrolling=”no” to your frame tag:

Important notes about frames:
* The <FRAMESET> tag must be placed following the </HEAD> tag. It is typically used in place of the <BODY> tag.
* If using the <BODY> tag to include text that will appear for browsers that do not support frames, place it below the closing </FRAMESET> tag.
* Do not use both the ROWS and COLS attributes within the same <FRAMESET> tag.
* The <FRAME> tag can target a URL or a local source.

The <BASE> tag is used to set the default target frame in which hyperlinks on that page are to be opened. Specifying a base target means less coding because the TARGET attribute does not need to be defined for each hyperlink within the document.

The <BASE> tag is an empty tag that is placed at the top of the HTML document within the <HEAD> tag. For example, if one wanted all of the hyperlinks within a child frame to automatically open in a frame named Right, the code in that child frame would appear as follows:

<HTML>
<HEAD>
<TITLE>Products</TITLE>
<BASE TARGET="Right">
</HEAD>
<BODY>
Click on the link below to learn more.
<A HREF="http:\\questy.com">
</BODY>
<HTML>

When a user clicks on the link, the questy.com site will open in a frame named Right. This frame would be named Right by a <FRAME> tag in the parent frame. The NAME attribute is used within the <FRAME> to name the frame.

Also note that this default target frame is overwritten when the target is named in the <A> tag. For example, if the TARGET attribute was added to the <A> tag above, that tag would then appear as follows:

The questy.com site will now appear in the frame named Bottom when a user clicks on the hyperlink. However, all other hyperlinks on this page will open in the Right frame.

Targeting Hyperlinks in HTML

Setting the TARGET attribute value to "_blank" will force the browser to open a hyperlink in a new window. The TARGET attribute has three other predefined values: "_self", "_parent", and "_top".
These values work as follows:
"_self" = loads into the same frame
"_parent" = loads into the parent frame
"_top" = loads into the full window despite any existing frames

An example of a hyperlink set to load into a new window is:

turn the page...

Welcome to the World of Questy

Welcome to the World of Questy -- The World of Questy Sites are currrently undergoing a major overhaul. Stay tuned for updated links and news in 2008!

Unless otherwise credited all photos and graphics are the copyrighted property of Questy aka Tom Peracchio. Unauthorized reproduction of any of the pages of this web site is illegal, not to mention rude.
- Copyright 1990 through 2008 -