Step 16 – Frames

In some cases it’s easier to work with frames. This is one of the most complex features of HTML.
A homepage built out of frames uses more than one HTML file. The first HTML file is the one that will be opened by the browser and contains a FRAMESET:

<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *”>
<FRAME SRC=”upper-frame.html”>
<FRAME SRC=”lower-frame.html”>
</FRAMESET>

</HTML>

This is a FRAMESET that divides the screen in two parts and fills both with two other HTML files. Notice how this HTML file doesn’t contain a BODY-tag? It wouldn’t work if you added this.

Now a more complex example. Type this and save it as frameset.html

<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *”>
<FRAME SRC=”upper-frame.html”>
<FRAMESET COLS=”140, *”>
<FRAME SRC=”left-frame.html”>
<FRAME SRC=”right-frame.html”>
</FRAMESET>
</FRAMESET>

</HTML>

With the above code you use 3 frames. A top frame, a left frame en a main frame on the right.

With

<FRAMESET ROWS=”50, *”>

you open a FRAME that exists out of two more frames. With ROWS you tell the browser how big one frame should be and how big the rest. In this example, the upper frame should be 50 pixels high and the * means that rest can be used for the other frame. The upper frame is filles with a HTML file called upper-frame.html:

<FRAME SRC=”upper-frame.html”>

Never call a HTML file that contains the frameset (in this case frameset.html). An unending loop will then crash the browser. You can however call a second frameset.

The lower (thus second) frame is divided in two more frames (COLS):

<FRAMESET COLS=”140, *”>

The first column of 140 pixels in width is filled with “left-frame.html”:

<FRAME SRC=”left-frame.html”>

the rest is used for right-frame.html:

<FRAME SRC=”right-frame.html”>

Closing both framesets:

</FRAMESET>
</FRAMESET>

A FRAMESET is never placed within a BODY-tag.

So to get this page to work you need 4 HTML documents:

1. frameset.html
2. upper-frame.html
3. left-frame.html
4. right-frame.html

With frameset.html you should open this page in a browser. HTML files 2 to 4 can be filled with whatever content you want. The idea of this frameset is to use the upper-frame.html for a short welcome text (you only have 50 pixels height). Left-frame.html can be used for buttons and right-frame.html for any other content.

When you would look at this in a browser you’ll see the frames contain borders. There are a few values you can add here:

<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *” BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0>
<FRAME SRC=”upper-frame.html” NAME=”top” NORESIZE SCROLLING=NO>
<FRAMESET COLS=”140, *” BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0>
<FRAME SRC=”left-frame.html” NAME=”left” NORESIZE SCROLLING=NO>
<FRAME SRC=”right-frame.html” NAME=”right” NORESIZE SCROLLING=AUTO>
</FRAMESET>
</FRAMESET>

</HTML>

Adding BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0 to the FRAMESETS turns all the borders off including whatever default margins there were. The FRAMESET becomes unvisible.

Adding NAME=”rechts” NORESIZE SCROLLING=AUTO to the FRAME-tag you apply values to that frame only. Each frame should get a name. This is important when linking files within the frameset (see Step 16b). With NORESIZE I make sure the visitor can’t change the size of a frame by dragging its border.
With SCROLLING=AUTO you activate a scrollbar on the right side of the frame (only when necessary). By setting this to NO you’ll never allow a scrollbar to appear. It’s set to AUTO by default.

Step 16b – linking within frames:
Suppose you’ve used the above frameset and used the left-frame.html for the buttons. Set the links to the buttons as followed

<A HREF=”index.html” TARGET=”right”>Home

A TARGET is always followed by one the names of the other frames. Or with _parent, _top or _self if you want to jump out of the frames but stay in the same window. Or new when you want a new window to open.

If the above link would to be clicked index.html would be opened in the right frame.

You’re practically done. Go to Step 17 to find out how to publish a site

Bookmark the permalink.

Comments are closed