This Lesson Is Designed for You to Gain Some Basic Information About HTML Frames and Forms

This Lesson Is Designed for You to Gain Some Basic Information About HTML Frames and Forms

T3L6

Frames

Introduction

This lesson is designed for you to gain some basic information about HTML Frames and Forms. When you finish this lesson, you should be able to:

  • Describe what an HTML Frame is.
  • Describe what an HTML Form is and it’s standard set of elements.
  • Describe what HTML Frames are composed of.
  • Explain the advantages and disadvantages of using HTML Frames
  • Recognize the importance of “intelligent” HTML Frames.

HTML Frames allow the developer to begin creating a more intelligent and interactive aspect to the traditionally limited interaction capabilities of HTML.

Frames are a great concept if used properly. Here we will give you some guidelines in where it employ frames and when. HTML forms easily allow the developer to add a certain level of interactivity on the website.

HTML Frames:

  • Advantages and Disadvantages of Using HTML Frames
  • When to use HTML Frames
  • An Example of Frames
  • HTML Frame Tools
  • HTML Frames Activity
  • Frame Summary

Additional Resources

HTML Station

[[

CNET Fun with Frames

[[

Advantages and Disadvantages of Using HTML Frames

Advantages

HTML Frames known as ‘frames’ allow the developer to create a web page that can display multiple web pages in the browser window at one time. This quickly allows for multiple content at once or maintaining a static page while others change. This is a highly used technique when designing navigational mechanisms.

A set of links can be placed in one frame so that when a user selects a link in one window the result is a change in content viewed in the other frame.

Disadvantages

Frames often receive a bad rap. When frames were first introduced with Netscape 2.0 they were not backward compatible and left a lot of web surfers using earlier versions of Netscape viewing blank screens. However, Netscape 2.0 and Internet Explorer 3.0 and above can all interpret HTML frames.

Another pitfall with using frames is the slow download time. Remember, you are actually loading several web pages at once. One web page per each frame you have designed.

Finally, if not properly employed frames eat of great portions of your viewable area (also known as “real estate”). So if the user is viewing your website on a 13’’ or 15’’ monitor, and you have a web page divided up with 3 frames there may be an issue of how the content is viewed, or how much can be seen at one time.

When to Use Frames

It is relatively simple to determine when you should develop a web page using frames. Since you are basically talking about the ability to view multiple documents, ask the question “would the user benefit from accessing these web pages all at once?” If the answer does not present itself readily then you may not require the use of frames.

An Example of Frames

The Basic Frame Tags

Frame tags are basically comprised of two main tags with additional attributes to control the way frames are formatted:

  • Frameset
  • Frame

You set these tags in an HTML document, then you load this document via a URL call. This document, in turn, calls the documents in the frame set and sets the browser window up into the frames you've specified.

 <Frameset> – defines how the area will be divided. This tag is placed right after the <HEAD> tag and has the following attributes

  • Rows (ROWS) or Columns (COLS
  • The size of these rows or columns can be set as pixels or percentages.

<FRAMESET COLS=”25%,75%”>

This would create two frames alongside each other. One frame occupies 25% of the browser window. The other frame occupies the remaining 75%.

If you don’t know the size of your user’s monitor, place an “*” in the size settings.

<FRAMESET COLS=”80,*”>

Here, the frame will occupy an 80 pixel wide section of browser window and fill the remaining portion with the other frame regardless of the monitor size.

NOTE: if the values given do not match the browser window sizes, or are invalid (for example, a series of percentages that exceeds 100)

the browser resizes all values proportionally to make them "fit".

 <Frame> - This tag is placed within the Frameset tag and specifies the name frame and document to be placed in the frame.

o Name – assigns a name to the frame for future referencing

o SRC (source) – the absolute or relative file path for the document

<FRAMESET COLS="25%,75%">

<FRAME NAME="Nav_menu" SRC="navigation.htm">

<FRAME NAME="Main_content" SRC="index.htm">

</FRAMESET>

The Name attribute allows you to target your frames for linking. (i.e. click a link in one frame and target which frame receives the content).

The navigation.htm file could contain HTML links such as:

<A HREF="index.htm" TARGET="Main_content">Home</A>

<A HREF="products.htm" TARGET="Main_content">Products</A>

<A HREF="info.htm" TARGET="Main_content">About Us</A>

<A HREF="feedback.htm" TARGET="Main_content">Feedback</A>

This would place HREF source files in the ‘Content’ Frame. This is achieved by using the TARGET attribute of the HREF tag and the NAME attribute of the FRAME tag.

NOTE: Frame Names are case sensitive, and may consist only of letters and digits. They should be descriptive and unique in a frameset, so that each frame can be identified by its name without conflicts.

HTML Frame Tools

Building frames can be completed either by creating HTML in an HTML editor or a GUI development tool. Using a GUI tool typically allows the developer to visually draw out and stretch the frames to how they see fit. Whereas using an HTML editor requires a series of trials and errors. The following tools provide frame building with a GUI interface

  • DreamWeaver
  • Drumbeat
  • Netscape Composer
  • Microsoft FrontPage
  • Adobe Pagemill

The following list of tools support HTML editing.

  • Notepad
  • Homesite
  • Dreamweaver

This list is by no means exhaustive, and is growing all the time.

HTML Frames Summary

This lesson is designed for you to gain some basic information about HTML Frames. When you are finished with the lesson, you should be able to do the following:

  • Describe what HTML Frames are.
  • Describe several html frame tag attributes.
  • Explain the advantages and disadvantages of using HTML frames
  • List some basic HTML frame editors

A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

HTML Frames

Allow the developer to display multiple pages at once.

HTML Frame Tags

  • Frameset
  • Frame

Advantages and Disadvantages of Using HTML Frames

Advantages

  • Allows the developer to display multiple pages at once.
  • Allows the developer to create a sophisticate navigation mechanism.

Disadvantages

  • HTML frames can only be viewed by Netscape 2.0 and greater and Internet Explorer 3.0 and greater.
  • Slow download times.
  • Ineffective use of browser window “real estate.”

HTML Frame Tools

This is NOT an exhaustive list.

  • DreamWeaver
  • Drumbeat
  • Homesite
  • Microsoft FrontPage

1

Top View