Web Hosts
with
Website Builders

HTML Code Tutorial

Tutor Ebook Download

Frames - Target and Scrolling

When using frames, each individual frame within a frameset will contain either an html page or an image.
Some of the frames will be static (information will never change) , others will be dynamic. Information will change.
For a frame to be dynamic it requires a name. You will then use the target attribute to send different html pages to it.

In Figure 1 (below) we labeled each individual frame within the frameset.
Frame A will be a static frame containing hyperlinks to fill Frame C.
Frame B will be static and will contain the heading of our Document.
Frame C will be dynamic and you will use it to display different pages, chosen in Frame A.

Contents

Page Structure

Text Controls

Tables

Forms

Frames

Miscellaneous

To do this we must:

1. Give a name to Frame C.
2. Create a Heading page and assign it to Frame B.
3. Create a links page, Assign it to Frame A and use target to send the pages to Frame C
4. See Code Below

For figure 1 the code would be:
<frameset cols="20/,80/">
<!--column 1-->
<!--Frame A-->
<frame src="links.html">
<!--column 2-->
<frameset rows="30/,70/">
<!--Frame B-->
<frame src="heading.html">
<!--Frame C-->
<frame src="index.html" name="frame_c">
</frameset>
</frameset>

The code for the hyperlinks of links.html would look something like:
<a href="index.html" target="frame_c">Main Page</a>
<a href="page1.html" target="frame_c">Page 1</a>
<a href="page2.html" target="frame_c">Page 2</a>


Scrolling

Scroll bars will appear automatically by default if a document is too large for a frame.
The code for the scrolling attribute would be:
<frame src="index.html" name="frame_c" scrolling="no">
<frame src="index.html" name="frame_c" scrolling="yes">
<frame src="index.html" name="frame_c" scrolling="auto">


To test the code:

1. Copy and paste the code from fig 1into an html page and name it frame_test.html.(Delete body tags)
2. Create heading.html, links.html, index.html, page1.html and page2.html.
3. Run frame_test.html in your browser.
4. Click the links in Frame A.

Check out our Free Frames Template Kit or try our Free Frames Kit Demo

CGI Online
How to Create a Website -Tutorial
Create a Web Site