Introduction to HTML
Frames
Copyright © 1996 - 2002 Randy D. Ralph.  All rights reserved.

  Tables Scripting   Course Contents  
In place May 18, 1996.    Last updated January 12, 2000.

Basics Formatting <FRAMESET> <FRAME> <NOFRAMES>

Basic Frames Structure:

An HTML Document constructed in frames is complex.  It consists of framesets and frames.  It should also contain a noframes segment.

<FRAMESET></FRAMESET>

    Defines a FRAMESET and is a container.  It can contain other framesets or frames. 

<FRAME>

    Defines a FRAME and is also a container, but a frame can only contain and display an HTML Document.  A frame cannot contain a frameset.

<NOFRAMES></NOFRAMES>

    Defines a NOFRAMES Non-Framed Document Segment which will display by default if the browser cannot load frames.  The noframes segment is also a container and can include alternate HTML code which can define an entire webpage.

An HTML Document constructed in frames contains other HTML Documents which are included and displayed within its frames.  It may contain, itself, only the minimal HTML code necessary to establish the basic structure of its frames.  At a miniumu, it must contain one frameset and one frame but it may also be very complex and contain many framesets and frames. 

The basic command syntax required to set an HTML Document in frames is shown below:

<frameset [frameset specifications]> Begins a frameset.
      The frameset can contain other framesets or frames.  
  <frame [frame specifications]> Specifies the content of a frame.
</frameset> Ends a frameset.
<noframes> Begins a Non-Framed Document Segment.
      Non-frames source code would be placed
      here for frames-incapable browser users. 		 
</noframes> Ends a Non-Framed Document Segment.

Example: 

<frameset 
cols="20%,80%">
 Begins an outer frameset with two columns at 20% and 80% of the available display space. 
    <frameset 
rows="75%,25%">
 Begins an inner frameset with rows at 75% and 25% of the available display space. 
       <frame src="toc.html"      
name="toc"     
              scrolling="auto" marginwidth=2 
              marginheight=2>
 Establishes Frame
1
below. 
       <frame 
src="banner.html"   name="banner"  
              scrolling="auto" marginwidth=2 
              marginheight=2>
 Establishes Frame
2
below. 
    
</frameset>
 Closes the inner frameset 
    <frame    
src="noframes.html" name="display" 
              scrolling="auto" marginwidth=2 
              marginheight=2>
 Establishes Frame
3
below. 
</frameset>
 Closes the outer frameset

Result:

Simulated Frames HTML Document Display
 

<FRAMESET></FRAMESET>

The frameset tag is used to define a structured container in which frames or other framesets will be displayed by the browser.  The frameset command parameters establish the row and column layout for the display screen using the general syntax below:

<FRAMESET [ROWS/COLS]=n1,n2,n3 . . .>

Where:

  • Either ROWS or COLS (columns) can be declared. 
    A single frameset can have only ROWS or COLS, not both.
  • Parameters n1, n2, n3 etc. establish both the number and width of rows
    or the number and height of columns. 

    These can be stipulated in any of three ways:

    1. As percentages of the available display space.
    2. As exact pixel dimensions.
    3. As wildcards using the * (asterisk) symbol.

Examples:

<FRAMESET ROWS=10%,*,10%>

    Defines a frameset consisting of three horizontal rows, the top and bottom rows would occupy 10% of the available space each and the center row would occupy the balance of the available space.

<FRAMESET COLS=100,250,*>

    Defines a frameset consisting of three vertical columns, the leftmost column would be 100 pixels wide, the center column would be 250 pixels wide and the rightmost column would occupy the balance of the available space.

<FRAMESET COLS=50%,50%>
   <FRAMESET ROWS=50%,50%>
   </FRAMESET>
</FRAMESET>

    Defines two framesets, one nested within the other, with the result that the available screen display space would be divided into four equal quadrants.  First, two columns at 50% of the available space, then within each column, two rows at 50% of the available space.

Command Extensions:

In addition to the general ROWS and COLS command parameters Netscape also supports the following extensions:

BORDER=n

    Where n determines the width, in pixels, of the frameborder used to visually separate frames on the screen.
BORDERCOLOR="#RRGGBB"
    Where #RRGGBB defines the hexadecimal value for the red, green and blue components, respectively, of the frameborder.
FRAMEBORDER="YES/NO"
    Where argument YES allows bordered frames and argument NO disallows bordered frames.

NOTE:  The latter two command parameters and their arguments can also be applied to frames. (see below)

<FRAME>

The frame tag is used to define the content of only one of the frames established within the structure of the frameset as defined by the row and column arrangement.  Each identified frame location within the frameset must have a corresponding frame definition.  The frame is the ultimate display unit of the framed document.

The frame command parameters establish all the display attributes of the frame being defined as well as the content to display within the frame.  The command parameters are laid out in the table below:

FRAME Command Parameters
Syntax Definition/Action
Required Parameters -
Parameter:

src="URL"

Where:

URL defines the path to an HTML Document which will be loaded into this frame.

The URL provided may be either relative, if a base href has been provided, or it may be a full address and path.

Examples:

src="info.html"
src="http://icb.com/info.html"

Action:

This command parameter instructs the browser what HTML Document to load and display within the confines of the defined frame.  If the HTML Document references cannot be found, then an error message is generated requiring the user to bypass the error and the frame is left blank.

Parameter:

name="frame_name"

Where:

frame_name defines a target name that will be associated with this frame in the framed HTML Document.
Examples:

name="main"
name="table_of_contents"

Action:

This command parameter attaches a name to the frame which can be used by other HTML Documents to reference this particular frame using its name as a target.  Any HTML Document link that addresses the named frame must include in the anchor the target="frame_name" argument in order for the code to be loaded in the appropriate frame.

Optional Parameters -
Parameter:

scrolling=[yes/no/auto]

Where:

The permitted values are:

  • yes  - forces vertical and horizontal scroll bars to be attached to the frame.
  • no   - disallows scroll bars to be attached to the frame.
  • auto - allows the browser to "decide" whether or not scroll bars are required based on the amount of available display space and the attributes of the HTML code loaded into the frame.

The default is auto.

Examples:

scrolling=no

Action:

This parameter determines whether or not the frame being defined will be scrollable.  By default, the browser may attach scroll bars to a frame which is too large to display fully in the available space.  Making frames non-scrollable can cause serious display difficulties for users who are viewing the HTML Document at low screen resolutions.  It is best to allow the browser to "determine" whether or not scrolling is necessary.

Parameter:

noresize

Where:

This command parameter requires no argument.

All browsers allow frames to be resized by by the user unless this parameter disallows resizing of a frame.

Example:

noresize

Action:

This prevents the browser from allowing the user to resize a frame.  In most cases, this is a bad idea, since users who are viewing the page at lower screen resolutions may need to resize a frame to see its complete content.  This parameter should be used with caution.

Parameter:

marginwidth=n
marginheight=n

Where:

The number n defines the width, in pixels, of the margins of the frame.  The default is zero (0).

Examples:

marginwidth=5
marginheight=4

Action:

These optional parameters set the left and right (marginwidth) and top and bottom (marginheight) margins or "white space" to allow within the defined frame.

Parameter:

frameborder=n (Internet Explorer)
frameborder=yes/no (Netscape)

Where:

Internet Explorer -
The number n defines the width, in pixels, of the border to be placed around the frame.  An argument of zero (0) produces no frame border.

Netscape -
The parameter can take only the yes or no argument.  Since all frames share a common border in Netscape, all contiguous frames to be displayed without borders must use the no argument.

Examples:

frameborder=0 (Internet Explorer)
frameborder=no (Netscape)

Action:

These optional parameters determine the presence or absence of a border around the frame.  Both Internet Explorer and Netscape browsers can display frames with no borders but in order for the HTML Document to display properly in either browser, both forms of the parameter and arguments must be provided.  This may appear redundant but each browser will read only the form of the command parameter which it recognizes.  The redundant code will not generate an error.

Parameter:

framespacing=n (Internet Explorer only)

Where:

The number n defines the width, in pixels, of the space to allow between frames.

Example:

framespacing=4 (Internet Explorer only)

Action:

This optional parameter is recognized only by Internet Explorer.  It is used to define the amount of "white space" or the "gutter" to allow between adjacent frames.

Parameter:

bordercolor="#RRGGBB" (Netscape only)

Where:

The desired color of the frame border is specified for the red, green and blue color components, respectively, in hexadecimal format.

Example:

bordercolor="#000033" (Netscape only)

Action:

This optional parameter is recognized only by the Netscape browser.  It defines the color to be used by the browser when displaying the frame border.

Example: 

<frame src         = "intro.html"
       name        = "display"
       scrolling   = no
       noresize
       marginwidth = 0
       marginheight= 0
       frameborder = 0
       frameborder = no
       framespacing= 0
       bordercolor = "#000000" >
 This would produce a frame named display into which the HTML Document intro.html would be loaded. The frame would be displayed without a border in either the Netscape or the Internet Explorer browsers.  Browsers which do not recognize either Netscape or Internet Explorer HTML extensions would ignore the extended parameters and load default settings.  The frame would be non-scrollable and the user would not be able to resize it within the browser.

Non-Framed Document Segment:

An HTML Document which is set in frames should also contain a Non-Frames Document Segment defined within the <noframes></noframes> command tag pair.  The reason for this is that not all browsers are capable of either interpreting a framed HTML Document or properly displaying it.  Browsers which cannot display a framed document will ignore the frames defined and read the code to be displayed in their place from within the Non-Framed Document Segment.

Example:

<noframes>

[ The Non-Framed Document Segment ]

. . . some message or standard HTML code goes here . . .

</noframes>

If no Non-Framed Document Segment is defined for a framed HTML Document then the page will load with a browser error.  It is customary, at the very least, to include a brief message in the Non-Framed Document Segment which informs the low-end browser user that the framed HTML Document cannot be displayed in the browser.  Many Web users find this practice annoying.  It is far better to place HTML code within the Non-Framed Document Segment which produces a reasonable facsimile of or alternative to the framed HTML Document.  This requires extra work to manage and maintain but, it can prevent a significant portion of the potential viewer population from being arbitrarily excluded from the website.  This is a particularly important consideration for commercial sites.
 

Basics Formatting <FRAMESET> <FRAME> <NOFRAMES>

  Tables Scripting   Course Contents  
You are here:  NetStrider   »   Tutorials   »   HTML   »   FRAMES   «