Lesson 9: Frames

Do You Really Want Them?

Scroll down the page, see what happened? The top part of the page remained stationary while the rest of the page moved. That's what's called frames. A webpage with frames may look interesting but it can pose problems, not all browsers support frames, some search engines ignore web pages with frames, and HTML 5, the newest version of HTML code that's in the works, won’t support frame tags. But if you still want to know how they are made read on.

More Than One Page

A web page with frames is actually made up of several pages put together into one. This page for example is made of three pages: One for the top, another for the main section, and a third one which brings them together.

You can see that this page has two frames, the top frame containing the page with the title, and the bottom frame containing the page with the sidebar and main content. Webpages within the frames are written just like any other html file but the page which brings them together has it's own set of html tags. Here's how the code looks for this page:

<html>

<head>
<title>frames</title>
<head>

<frameset rows="30%,70%">
<frame src="title.html">
<frame src="main.html">
</frameset>

</html>

Notice that the html file starts out just like any other web page except there are no body tags. In their place are the opening and closing frameset tags.

The rows attribute in the frameset tag makes horizontal frames, vertical frames are made with the cols attribute. The numbers determine how much of the web page the frames will take up, in the example the top frame takes 30% and the second frame 70% of space. The percentages need to be distributed so that they add up to 100% and notice they are enclosed in quotation marks. Each percentage is separated by a comma.

Next come the frame tags, they are single tags so have no closing tag. The src attribute is telling the browser which web page is to display in the frame by default (when the visitor arrives on the web page). In the example the first frame holds a web page with the file name "title.html" and the second frame holds a web page named "main.html".

More frames can be put on a web page by adding more frame tags to the code. To remove frame borders add the border="0" attribute into the opening frameset tag like so:

<frameset rows="30%,70%" frameborder="0">

Linking From Framed Web Pages

To get links working properly on framed web pages, each frame needs to be named so that the anchor tags will know into which frame to send the destination web page when a link is clicked. This is done by putting the name attribute into the frame tags like so:

<frame src="main.html" name="myframe">

The name of the frame can be anything, once the frame is named, the link is directed to it through the target attribute in the anchor tags:

<a href="testage.html" target="myframe">Your link</a>

The target attribute told the link to send the web page into a frame named myframe. The target attribute can also force links to break out of frames completely and load like a regular web page when its value is set to "_top" like so:

<a href="testage.html" target="_top">Your link</a>

And that folks is how a web page with frames is made. So do you still want them?

 

MOCAHOST WEB HOSTING

Unlimited website traffic and disk space on all plans starting at $1.95 per month on 3 year plan. Money back guarantee.