Personal tools
  •  

HTML Frames

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Tutorial 1 of 3

Objectives:

  • Learn HTML tags for creating the layout of basic frames
  • Tags discussed: <FRAMESET> <FRAME>

Template File(s):

  • frame-qu.html
  • framem.html

(Note: If you have not already downloaded the html Template Files please do so by clicking here .)

Frames

Frames are used to divided the main window into separate sections (or frames). Each frame has one name but, like a picture frame, can have any content. A link in one frame may update the content in another frame. See an example .

Layout

The <FRAMESET> tag is used to divide the browser window into frames. It replaces the <BODY> tag and has 2 attributes: ROWS and COLS. These attributes specify the height (rows) and width (columns) of each frame. These can be specified as pixels on the screen or, more commonly, as percentages of the user's window.
Tag Attribute
<FRAMESET>
(replaces BODY tag)
  • ROWS=
  • COLS=

Example

Open the file frame-qu.htm in your browser. Note how it has 4 frames, each occuping 50% of the height and width. Now, open the file in your text editor, and note how this is implemented:

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

Open the file in your text editor. Try modifying these percentages. Save the file, then display it in your browser.

Example

Suppose you wanted to nest a frame within another. For example, open the file framem.html in your browser. Take a moment to think how you might implement this.

Now open this file in your text editor. Note how we've nested multiple <FRAMESET> tags. This serves to embed a set of frames within the a larger, surrounding frame.

Modify this file in your text editor. See if you can embed yet another set of frames within a larger frame.

Content

None of the previous examples would have worked without the <FRAME> tag. This tag is used to insert content into the various frames. As shown in the next table, it has a number of important attributes.
Tag Attribute Function
<FRAME> SRC="URL" The URL specifies the content of the frame. It can be a full URL or just a file name if the file is in the same directory as the top level frameset file.
NAME="framename" "framename" becomes the name of the particular frame. The name is case sensitive.
SCROLLING =
  • YES
  • NO
  • AUTO
Indicates if the frame should have a scrollbar. "Yes" means add a scrollbar, "No" means don't, and "Auto" means add one if it is needed (if the contents of the frame are bigger than the frame size.
NORESIZE The presences of this attributes means the user cannot resize individual frames. Because you don't know the size of your user's browser window, doing this is usually a bad idea.

Example

Open the file frame-qu.html in your browser and note what the document looks like. Now open it in your text editor, and looks at the < font Class=HTMLTags><FRAME> tags.

  • Note that each individual frame has a different name (because of capitalization)
  • Note the SRC value. It contains the names of different files, which end up being the contents of each frame
  • Note that the SCROLLING and NORESIZE attributes are not used.

Open this file in your text editor, and try modifying this file. Add the SCROLLING and NORESIZE attributes. Put in different destination URLs. Save the file then view it in your browser.






Tutorial 2 of 3

Objectives:

  • Learn HTML tags for navigating frames
  • Tags discussed: <A TARGET = ... > <BASE TARGET= ...>

Template File(s):

  • index.html
  • framem.html

Navigation in frames

The power of frames lies in navigation. Clicking on a link in one frame can change the content in another. The way to do this is by adding the TARGET attribute in the anchor <A> tag. Remember, the <A> tag is used to create hypertext links. When you add the TARGET attribute, you are simply saying where (in what frame) the contents of the link should be displayed.

Example

Open the file frame-qu.html in your browser. Note that when you click on a link, the contents change in a different frame.

Now let's look at how this is implemented. We don't want to look at the HTML source for frame-qu.htm, because this document only serves to divide to the window into frames. This top level file also assigns names to each of the four frames (remember, frame names are case sensitive).

Instead, we want to open one of the frame content documents, for example, frame.htm.

Open the file frame.htm in your text editor. The link in questions is implemented as:

<A HREF= "frame.htm" target="frAme"> frAme </ A>

Thus, clicking on the link will cause the contents of the document "frame.htm" to be displayed in the frame named "frAme".

Navigation: Target and Base

As you may have noticed in the last example, the TARGET attribute also comes with a number of predefined values that you can use. See the table below.

The <BASE> tag enables you to specify a default TARGET URL for the entire document. Thus, if most links in your document will result in the same document being loaded, then you can pre-specify this destination URL by using the BASE tag in the document. You do then not need to provide TARGET attributes for links that load this base URL.

Tag Pre-defined attribute values
<A TARGET= >
  • "_blank" Loads the contents of the linked document into a new window
  • "_self" Loads the contents of the linked document into current window. This is the default (what happens if you do NOT provide a TARGET attribute with a link in a frame).
  • "_parent" Loads the contents of the linked document over the parent frame.
<BASE TARGET= "URL"> provides default target for all links without explicit targets.

Example

Let's tie all of these ideas together with an example.

Open the document index.html in your browser. This is a typical example of a use of frames, with the left column acting as a table of contents and the right frame displaying contents. Click around a bit so that you understand its functionality.

Now let's examine how this is implemented.

First let's look at the HTML source of the top-level file, index.htm . Open it in your text editor. Note how it specifies 2 frames, and names the left frame "contents" and the right frame "main".

Let's look at the HTML source of the table of contents file, contents.htm . Open it in your text editor. Or you can view the source in your browser by holding the mouse button down over the frame, and selecting "Page Source." Note how it contains 3 links, like the following:

<A HREF= "main.htm" TARGET="main"> page </A>

This indicates that when the link is clicked upon, the document main.htm should be displayed in the frame named "main" (the right frame).

Let's look at the HTML source of the table of file me.htm . Open it in your text editor. It contains 2 links:

<A HREF= "http://www.usu.edu"> USU </A>

<A HREF= "http://cc.usu.edu/~mimi/" TARGET="_self"> Mimi Recker </A>

The first link does NOT specify a TARGET. What happens when you click on it? Unfortunately, the contents of the USU home page are displayed INSIDE of the frameset. This can be considered bad design, because it implies that the USU home page is part of the frameset. Imagine someone using frames, and steals content by 'imbedding' another entire website into his frame. Unknowing readers might be mistaken into thinking that the site belongs to the other person. One of the many reasons why frames are unpopular.

The second link (uses the pre-defined "_parent" TARGET. What happens when you click on it? This makes the contents of my (unrelated) home page replace the top-level frameset. Cons: it also replaces the navigation menu (on the left frame).

Selecting an approapriate TARGET is a common error when implementing frames. A simple Rule of Thumb would be to use TARGET:

(_self) to replace ONLY the right frame, so as to keep navigation menu constant;

(_blank) to open a new window that points to an external website;

(_parent) if the link opens up a window that you want to replace the top-level frameset.

Example

Let's now modify this example. Let's add a new link to the table of contents that points to a document describing hobbies. Here is what is required:

  • Open the file contents.htm. Add a line and link pointing to hobbies, which should look like:
    • About <a href= "hobbies.htm" TARGET="main"> my hobbies </a>
    • Save the file
  • Create the file hobbies.htm. Add a line or 2 about your hobbies. Save the file.
  • Reload the top level document, index.htm and see if your implementation works.





Tutorial 3 of 3

Objectives:

  • Learn HTML for providing content for non-frame aware browsers
  • Tag discussed: <NOFRAMES>

Template File(s):

  • none

Browser compatability

Documents that use frames are usually poorly handled by text-based browsers, older browsers, and browsers for people with disabilities. For this reason, you should, whenever possible, provide alternate content for people using these kinds of browsers. This is accomplished with the <NOFRAMES> tag.

Essentially, you enclose everything intended for users with non-frame aware browsers inside the <NOFRAMES> </NOFRAMES> pair of tags. This content is ignored by Frames-aware browsers, and only made available to non-frame aware browsers.

Some of the more vocal web designers decide to forsake frames altogether. Example: http://budugllydesign.com/frame9806/framebad.html

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). HTML Frames. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource16.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.