HTML Frames

To refresh our memory of HTML, we will now take a quick look at a few different HTML techniques. Since this course is concentrating on client-side web design, we will look at a few techniques that are often used by web designers. The first technique we will look at is frames. Frames were designed to divide a browser window into several rectangular areas, where each area can contain a separate web page, and the content of each area can be changed.

There are only 3 tags that you need to learn to use frames. They are frameset, frame, and noframes. There are also two steps you have to follow. The first step is to create an HTML document which defines the frames and specifies what content will be loaded into each of them. The second step is to create the content for the frames, which consists of ordinary web pages.

<frameset>

Usage: <frameset attributes> ... frame info ... </frameset>

You can have a head element before a frameset, but no body element. Framesets can also be nested to create complex setups

Attributes:

cols: specified as a percentage of the total, an absolute number of pixels, or "*" (which means the remainder of the space)
rows: specified as a percentage of the total, an absolute number of pixels, or "*" (which means the remainder of the space)
border: specifies the width of the border
frameborder: This non-standard attribute is supported by Netscape and Internet Explorer. If it is set to "yes" or "1", then a border will be displayed for the frames. If it is set to "no" or "0", then borders will not be displayed.
bordercolor: This non-standard attribute is supported by Netscape and Internet Explorer. It specifies what color the frame borders should be.
class, style (used with CSS)
id, title (HTML 4.0)

<frame>

Usage: <frame attributes>

Attributes:

frameborder: This non-standard attribute is supported by Netscape and Internet Explorer. If it is set to "yes" or "1", then a border will be displayed for the frames. If it is set to "no" or "0", then borders will not be displayed.
marginheight=n: specifies number of pixels from top and bottom edge of frame to content of frame
marginwidth=n: specifies number of pixels from sides of frame to content of frame
scrolling={"yes"|"no"}: specifies whether scrollbars are shown
longdesc="url": used for non-frames browsers
name="name": used for targeting content
noresize="noresize": disallows user resizing of frame
src="url": points to contents of frame
class, style (used with CSS)
id, title (HTML 4.0)

<noframes>

Usage: <noframes attributes> ... content ... </noframes>

Used to display content in frames-challenged browsers. Use only in the outermost frameset.

Attributes:

class, style (used with CSS)
dir, id, lang, title (HTML 4.0)

A template for creating frames

<html>
<head>
<title>Frame Test</title>
</head>
<frameset rows="70, *" cols="*,50%,*" >
   <frame src="frm1.html">
   <frame src="frm2.html">
   <frame src="frm1.html">
   <frame src="frm2.html">
   <frame src="frm1.html">
   <frame src="frm2.html">
   <noframes>
      <p>You don't have a browser with frame capability.  If you
         did, you would be seeing 6 frames right now.</p>
   </noframes>
</frameset>
</html>

Sending content to frames

It is rather easy to send content to a frame if it has a name (set with the name attribute). Just add the target attribute to an anchor tag and set the value equal to the name of the frame.

For example, clicking on the following link will send the contents of the page page1.html to the frame named content_frame.

<a href="page1.html" target="content_frame">link text</a>

Special Target Frame Names

_blank: new, unnamed window
_self: same frame or window as source document (default)
_parent: parent window or frameset of frame containing link
_top: window containing link, all frames removed

Using the BASE tag with frames

You can set the target for all the links in a page by setting the target attribute of the base tag. Remember that the base tag is in the head element of the document. The target can be overridden by supplying a specific target with the particular link. This trick can be used to make sure you don't trap your visitors by setting up external links inside one of your frames. Just set target="_top" in a base tag in the head element. Every link in the document will wipe out frames unless specifically told not to.

Inline frames

Inline frames are something that would be nice to have available. They are now part of the HTML 4.0 standard and are implemented by Internet Explorer. For the moment, however, it is probably best to stay away from them.

Inline frames are placed within a document just like an image. The frame scrolls with the document. They are also specified within the document.

<iframe>

Usage: <iframe attributes>...content...</iframe>

Attributes:

align = {top|middle|bottom|left|right|center}
frameborder: This non-standard attribute is supported by Netscape and Internet Explorer. If it is set to "yes" or "1", then a border will be displayed for the frames. If it is set to "no" or "0", then borders will not be displayed.
height=n (specified in pixels)
width=n (specified in pixels)
marginheight=n: specifies number of pixels from top and bottom edge of frame to content of frame
marginwidth=n: specifies number of pixels from sides of frame to content of frame
scrolling={"yes"|"no"}: specifies whether scrollbars are shown
longdesc="url": used for non-frames browsers
name="name": used for targeting content
src="url": points to contents of frame
class, style (used with CSS)
id, title (HTML 4.0)

Sample pages

Frameset demo using the <frameset>, <frame>, and <noframes> tags with the rows and cols atrributes set with pixels, percentages, and "*".
Nested frames demo.
Frames/frameset attribute demo using scrolling, noresize, marginheight, marginwidth.
Demo of targeting named frames which also demos special named targets.
Navigation demo using frames and a background with borders turned off.
Inline frame demo.
Another frame target demo.