CS logo

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 browser window.

I. Creating the frames

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. (Click here 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 not needed.

    <HTML>
    <HEAD>
    <TITLE>    Computer Services</TITLE>
    </HEAD>
    <FRAMESET COLS="    30%,70%">
    <FRAME scrolling=    yes SRC="links.html" NAME="left">
    <FRAME SRC="    intro.html" NAME="right">
    </FRAMESET>
    </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 width.

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 like this:

    <HTML><HEAD>
    <TITLE>    Computer Services</TITLE>
    </HEAD><BODY>
    <P align=Center>
    <IMG SRC="    deptbanner.GIF">
    <H1><Center>    Computer Services</Center></H1>
    <H3><Center>    Introduction</Center></H3>
    <P align=Center>
    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.
    </BODY>
    </HTML>

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.

II. Targeting information

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:

    <HTML><HEAD>
    <TITLE>    Computer Services</TITLE>
    </HEAD><BODY>
    <H3>    Computer Services Topics</H3>
    <P ALIGN=left>
    <A HREF="    intro.html" target="right">Introduction</A> <P>
    <A HREF="    helpdesk.html" target="right">Help Desk</A> <P>
    <A HREF="    seminars.html" target="right">Seminars</A> <P>
    </BODY>
    </HTML>

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.

III. Linking to other web pages

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:

    <A HREF="http://www.cnn.com" target="right">

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:

    <A HREF="http://www.cnn.com">

Back to Creating a Web Page at Temple


© 1998. Temple University. All rights reserved.