Main Menu
Multiwingspan Home Page
Multiwingspan Games
Gnasher @ Multiwingspan
Multiwingspan Calendar
Multiwingspan Clock
About Multiwingspan
Programming
Visual Basic 6.0 Guide
Visual Basic 6.0 Examples
Turbo Pascal Guide
SWI Prolog Guide
Visual Basic 2005 Guide
Structured Query Language
Web Design
HTML Design Tasks
Introduction To HTML
Introduction To CSS
Introduction To Javascript
Notes
AS/A2 Level Computing

HTML Guide
Frames

Introduction

Frames are used to divide the browser’s display area into separate windows. Frames can be stylish and allow easy, quick navigation around a web site. They can also be quite ugly, and complicated to design. Care should be taken when they are used.

Many authors avoid using frames because older browsers had trouble rendering them correctly. Most modern browsers should have no problems showing frames that are well designed.

A site which uses frames must have a separate file which defines the size, position and behaviour of the frames. The following are examples of the HTML required to produce a page with frames.

Side Navigation Bar

<html>
<head>
<title>frames</title>
</head>
<frameset cols="20%,80%">
<frame frameborder="1" scrolling="yes" src="left.htm" name="leftframe">
<frame frameborder="0" scrolling="auto" src="right.htm" name="rightframe">
</frameset>
</html>

In line 5 the size and direction of the frames are specified. Lines 6 and 7 describe the frames, indicating whether or not to allow scrolling, which HTML file to load first into that frame and the name of the frame to enable us to load other pages into that frame. Notice that there is no <body> tag in a page which declares frames.

Notice that there are 3 HTML files involved in producing a 2 frame window - the file which contains the frameset definition and the 3 files to load into the frames.

Top navigation bar

As above but change line 5 to <frameset rows="20%, 80%">

Creating links that load in your frames

To force a link to be loaded in a particular frame you must modify the attributes of the <a> tag.

eg <a href="link.htm" target="rightframe">My link</a>

The target attribute can also be used to create other effects. Experiment with the following…

target="_blank" loads in a new window

target="_top" loads the page in the full body of the window (removes all frames)

target="_self" loads in the same frame as the link

Exercise 13

Use frames to create a site which has a list of links to WWW resources relevant to each unit of the course. The first page should have two frames, one which has category headings and another in which to load up the pages of links. Use side, top or bottom navigation.

Return To HTML Guide || Return To Homepage