Chapter: Web Technology : Web Essentials

HTML Frames

This section discusses the tags for creating frames and frame sets. A frame is region of a window that acts as a window itself. The main window can contain multiple frames, so that different regions of the window display different contents. A frame set is a set of frames.

HTML Frames:

Frames and Framesets

· FRAME

· FRAMESET

· NOFRAMES

FRAME - (window region)

The FRAME tag creates a frame, which is an individual, independently scrollable region of a web browser. You can think of it as a window within a window. The FRAME tag must be used within a FRAMESET tag.

The FRAMESET tag contains a set of FRAME tags, which each define a frame in the main window.

Each frame has a distinct URL that determines the content displayed by the frame.

You can specify whether or not a frame has a border, whether or not it has margins, whether or not the user can resize it dynamically, and whether or not it is scrollable.

Syntax

<FRAME

BORDERCOLOR="color"

FRAMEBORDER="YES"|"NO"

MARGINHEIGHT="marginHeight"

MARGINWIDTH="marginWidth"

NAME="frameName"

NORESIZE SCROLLING="YES"|"NO"|"AUTO" SRC="URL"

The URL tag is required.

BORDERCOLOR="color" specifies the color of the frame's borders. Because frames share borders, Navigator must resolve any border color conflicts.

FRAMEBORDER determines whether or not the frame has visible borders.

· YES results in an outline-3D border.

· NO suppresses the 3D border.

When the FRAMEBORDER attribute appears in a FRAMESET tag, it sets a default FRAMEBORDER value for all frames in the frameset. When the FRAMEBORDER attribute appears in the FRAME tag, it applies only to that particular frame, overriding any FRAMEBORDER attribute established by an outer FRAMESET tag. A border shared between frames is plain only if all adjacent frames have the FRAMEBORDER attribute set to NO.

When neither a FRAME nor a FRAMESET tag governing that FRAME has set the FRAMEBORDER attribute, the default setting is YES.

MARGINHEIGHT="marginHeight" specifies a margin, in pixels, between the top and bottom edges of the frame and the frame contents.

MARGINWIDTH="marginWidth" specifies a margin, in pixels, between the left and right edges of the frame and the frame contents.

NAME="frameName" specifies the name of the frame. The value of the NAME attribute must begin with an alphanumeric character.

NORESIZE specifies that users cannot resize the frame. If a frame adjacent to an edge is not resizable, the entire edge is not resizable, and consequently other frames adjacent to that edge are not resizable.

SCROLLING specifies whether scrollbars are available on a frame:

· YES specifies that scrollbars are always available.

· NO specifies that scrollbars are never available.

· AUTO specifies that the browser determines whether to display scroll bars based on the size of the frame and its content. If you do not specify a value for SCROLLING, the default value is AUTO.

SRC="URL" specifies the URL for the document to be displayed in the frame. The URL cannot include an anchor name; for example FRAME SRC="doc2.html#colors" is invalid. If you do not specify the SRC attribute, the frame is displayed with no content

Used Within FRAMESET

Example See Framest example 1. Simple Frameset with two frames.

FRAMESET - (set of frames)

The FRAMESET tag defines a set of frames that appear in a web browser window. The FRAMESET tag contains one or more FRAME tags that each describe a frame.

The only place the FRAMESET tag can be used is in a frame definition document, which is an HTML document that contains the FRAMESET and FRAME tags that describe the framesets and frames that make up a Navigator window.

An HTML document that contains a FRAMESET tag cannot contain a BODY tag.

A frameset can specify that its frames are laid out in rows or columns. If youwant your frameset to have rows and columns, rather than just rows or columns, you can use FRAMESET tags nested inside FRAMESET tags.

For example, you could define a frameset that has two columns, where the first column contains a frameset that has two rows and the second column contains a frameset that has 4 rows. You can specify the border thickness for all frames in a top-level frameset. You can also specify whether or not all frames in a set display their border by default and what color the border uses. Individual frames in the set can override the default to specify whether or not they display their border, and what color their border uses.

You can specify actions to occur when the window displaying the frameset gets or loses focus, and you can specify actions to occur when the frameset is loaded or unloaded.

When you define a link, (using the <A HREF> tag) you can specify in which frame the destination document is displayed, by giving the name of the frame as the value of the link's TARGET attribute. It is possible to define a link to change the content of multiple frames in one go by using the ONCLICK attribute of the link. To do this, set the value of the link's ONCLICK attribute to JavaScript code that changes the location (source) of one or more frames.

For example, the file frameset.htm opens a web page that has three frames. If you click a link in the left frame, both the other frames update. You can open the file framtoc.htm and view its source to see the code for the links that update multiple frames.

The NOFRAMES tag is used inside a FRAMESET tag to provides alternative content for browsers that cannot display frames.

Syntax

<FRAMESET

COLS="columnWidthList"

ROWS="rowHeightList"

BORDER="pixWidth"

BORDERCOLOR="color"

FRAMEBORDER="YES"|"NO"

ONBLUR="JScode"

ONFOCUS="JScode"

ONLOAD="JScode"

ONUNLOAD="JScode"

...

</FRAMESET>

You must supply at least one of the COLS or ROWS attribues.

COLS="columnWidthList" specifies a comma-separated list of values giving the width of each frame in the frameset. If one of the values is missing, the browser sizes the corresponding frame to fit the space available.

The browser may approximate some values to make the total width of the columns equal to the width of the window.

The value of each item in the columnWidthList can be one of the following:

· Width of a frame in pixels.

· Width of a frame as a percentage of its parent frame or window.

· An asterisk (*), which means "as much space as possible," which is the space left over after space has been allocated to all columns that specify their width as pixel value or a percentage value . The total available left-over space is divided equally between all columns that use an asterisk.

ROWS="rowHeightList" specifies a comma-separated list of values giving the height of each frame in the frameset. If one of the values is missing, the corresponding frame is sized to fit the space available. The browser may approximate some values to make the total height of the rows equal to the height of the window. Each item in rowHeightList can be one of the following:

· Height of a frame in pixels.

· Height of a frame as a percentage of the parent frame or window.

· An asterisk (*) which means "as much space as possible," which is the space left over after space has been allocated to all rows that specify their height as pixel value or a percentage value . The total available left-over space is divided equally between all rows that use an asterisk.

BORDER="pixWidth" specifies the thickness of frame borders for all frames in an outermost frameset. A setting of 0 causes all frames in the frameset to have no border between them. A setting of 3 causes a border of 3 pixels. If no BORDER tag is present,the default is 5 pixels. The BORDER tag can be used only on an outermost FRAMESET tag.

BORDERCOLOR="color" specifies the color of a frame's borders. Because frame borders are shared, Navigator must resolve any border color conflicts.

1. Any BORDERCOLOR attribute appearing in the outermost FRAMESET has the lowest priority.

2. This attribute is overridden by any attribute used in a nested FRAMESET tag.

3. Finally, any BORDERCOLOR attribute in the current FRAME tag overrides all previous FRAMESET tag settings. If there is a conflict for two colors of equal priority both set on the same edge, the behavior is undefined.

FRAMEBORDER determines how frame borders are displayed.

· YES results in an outline-3D border.

· NO suppresses the 3D border.

When the FRAMEBORDER attribute appears in the FRAMESET tag, it sets a default FRAMEBORDER value for all frames in that frameset. When the FRAMEBORDER attribute appears in a FRAME tag, it applies only to that particular frame, overriding any FRAMEBORDER attribute specified by an outer FRAMESET tag. A border shared between frames is plain only if all adjacent frames have the FRAMEBORDER attribute set to NO. When neither a FRAME nor a FRAMESET tag governing that FRAME has set the FRAMEBORDER attribute, the default setting is YES.

ONBLUR="JScode" specifies JavaScript code to execute when the window containing the frameset loses focus.

ONFOCUS="JScode" specifies JavaScript code to execute when the window containing the frameset gets focus.

ONLOAD="JScode" specifies JavaScript code to execute when the frameset is loaded into the frame.

ONUNLOAD="JScode" specifies JavaScript code to execute when the frameset is unloaded (exited).

Frameset Example 1. Simple Frameset With Two Frames

The following example creates a set of two frames. The frameset is kept in a document file, such as index.html, that contains no other information. When users open this page in their web browser, the FRAMESET tag loads the individual URLS referenced in the FRAME tags.

<HTML>

<HEAD> <TITLE>Simple Frame Set Example</TITLE></HEAD> <FRAMESET COLS="20%,80%" BORDER=10>

<FRAME SRC="forms.htm" NAME="examplecontent"> <NOFRAMES>You must use a browser that can display frames to see this page. </NOFRAMES>

</FRAMESET>

</HTML>

The two frames appear as columns because COLS is specified within the FRAMESET tag. The left frame uses 30% of the available space, and the right frame uses the remaining 70% of the space. By default, the frames in this example have scrollbars and are resizable, because no values are specified for the SCROLLING and NORESIZE attributes.

Example 2: Nested Frames

The following example creates a frameset that contains a nested frameset. Theoutermost frameset has two columns. The second column contains a nested frameset that has two rows.

<HTML><HEAD><TITLE>Frame Set Example</TITLE></HEAD> <FRAMESET COLS="20%,*">

<NOFRAME>You must use a browser that can display frames to see this page.</NOFRAME>

</FRAMESET>

</HTML>

NOFRAMES - (alternative text for frames)

The NOFRAMES tag specifies content that is displayed by browsers that do not know how to display frames. Browsers that can display frames ignore all text in the NOFRAMES tags unless a file called by a frame tag is missing or unreachable by the browser.

Place the NOFRAMES tag within the FRAMESET tag.

Syntax

Used Within <FRAMESET>

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Web Technology : Web Essentials : HTML Frames |