Using frames on your web page
Simply put, a
frame is a web browser window within another web browser window. By using
frames, you can create web pages consisting of multiple windows.
Frames are related to one another in a manner determined by you, the web
page author. For example, you can set up your web page so that a link in a
frame will call up a page in the same frame, another frame, or the entire
Let's suppose you want to create a web page consisting of two frames. The
frame on the left will contain a list of services. When you select a
service, a corresponding description will then appear in the right frame.
to see a sample page.)
To create a page such as this, you first need to set up your main page or
index.html file to accommodate frames.
There are two HTML tags used for frames: <FRAMESET> and
<FRAME>. The <FRAMESET> tag sets the width of each frame as a
percentage of the total width of the web page. The <FRAME> tags
assign a name to each frame and indicates which file it will display.
Here is a sample index.html file that creates a web page with two
frames. Note that the <Body> tag normally found in HTML files is
<FRAME scrolling=yes SRC="links.html"
The FRAMESET COLS code sets up the frame size starting from left to
right. So from this example, you can see that the left frame will take up
30% of the page's width and the right frame will take up 70% of the page's
Next, the FRAME code indicates:
- whether or not
a scroll bar will automatically appear with the frame,
- the content
that will appear in the frame by indicating the filename, and
- the name
of the frame.
In this case, the left frame will automatically contain a scroll
bar, indicated by the FRAME SCROLLING=YES code. This frame will
display the file called links.html, indicated by the source code
shown as SRC. Finally, the NAME code indicates that the frame is
appropriately called left.
The right frame will not automatically contain a scroll bar since the
SCROLLING code is not included. (A scrolling bar will appear, however, if
it is needed.) This frame will display the file called intro.html
and the name of this frame is right.
Note that the even though the example uses the NAME code, assigning names
to the frames is not required. It is helpful, however, to include it
because the names give you as an easy way to indicate in which frame you
wish to target information.
So to recap, our sample code indicates
that the file intro.html will contain introductory material and
will appear in the right frame when the web page opens. No frame codes
are need in the intro.html file since it is simply an html file
that displays in the right frame. A sample intro.html file might look
The Computer Services Department is
responsible for supporting all the company's computers and networks and
providing information services such as computer seminars, technical
documentation, and publications.
Now that you have the information that will automatically open in the
right frame, you can continue by creating a file for the left frame.
The left frame will contain a file
called links.html which will include links to other pages. When
someone clicks on a link, however, you can set it up so that the
information appears in the right frame.
To target information to the right frame, you must include the proper
codes as shown in the example file below:
target="right">Help Desk</A> <P>
In the sample code, you can see the standard A HREF code used to
create a link. This linking code also contains the target code
which indicates where you want to display the information. Our sample
file is set up so that when someone se lects a link, the resulting file
appears in the right frame. This is evident by the fact that the target
tag is set to "right," which is the name you assigned to the
right frame in the index.html file. In addition, note that the
file intro.html appears not only when the web page opens, but also
when you click on the link Introduction in the left frame. It also
assumes that you have created a helpdesk.html file and a
seminars.html file with all the relevant information.
Besides linking to your own HTML files, you can also set the links in your
frame to other pages on the web. To do this, you would indicate the URL
instead of a filename as in the following example:
Keep in mind, however, that if you set the link to a page that also has
frames, the entire page will be shown in the target frame, and you will
have frames within frames. To avoid this, don't set the link to appear in
a frame. Instead, have it appear in its own window by eliminating the
target tag as in this example:
Back to Creating a Web Page at Temple
© 1998. Temple University. All rights reserved.