Slacker's Guide to HTML: How to Make Frames in HTML 4.0

Frames are good and bad. They can be seriously hideous to look at, or they can really help make a page work by presenting the navigation and the content in a complimentary way. In this lesson we learn how to divide a window up into frames so that you can display multiple web pages at once.

Rows and Columns

Before we get started, I would just like to make sure everyone knows that ROWS go one on top of each other, while COLUMNS go side by side. Look at this stunning graphical representation of what I just said:

3 columns
| | |

3 rows
____
____
____

Alright, now that we have the easy stuff out of the way let's move on to something a little more difficult. Before I try to show you the different tags and what they mean I will just show you some examples of pages using frames and then I will show you the code used to make those pages appear in frames.

Examples and Sample Code for Pages Using Frames

Our first example will be a framed page that has two windows. One is on the left and one on the right. The left window takes up only 25% of the space and the right takes up the remaining 75%. You can view the page I am talking about by clicking here, and you can view the HTML on how to create that document by viewing the source. (If you don't know how to view the source code of a page you are visiting click here)

The second example will be a little different. It will be comprised of 3 different frames. Yes, 3. The big time. The page will be divided into these 3 frames. The 2 left frames will be on top of each other, each taking up a certain percentage of the left side. The right frames will take up the rest of the space. To view this example click here, and then view the source to see how it was made.

Our third example will be a page that consists of 2 frames. These 2 frames rest one on top of each other, with the top one taking up 20% and the bottom taking up the remaining 80%. A lot of pages on the web are done this way, and it could be quite useful to display banners, a table of Contents, or a page title. Anyway, the sample link is right here and you can see the HTML by viewing the source code.

Now, remember that you can change the three examples I am giving you. The percentages can be changed around to change how much space on the page each frame takes up. So, when using these frames on your page it is very easy to change the proportions of each frame to match your needs. The name you apply to the different frames can be whatever you want it to. Here is the sample code for the first sample which featured two frames side-by-side, and next to the HTML code is a representation of what the frames page would look like.

<frameset cols="20%,80%"> <frame src="yellow.html" name="yellow"> <frame src="green.html" name="green"> </frameset>

<frameset cols="30%,70%"> <frameset rows="75%,25%"> <frame src="yellow.html" name="yellow"> <frame src="green.html" name="green"> </frameset> <frameset rows="*"> <frame src="red.html" name="white"> </frameset>

<frameset rows="25%,75%"> <frame src="white.html" name="top"> <frame src="black.html" name="main"> </frameset>

I suggest actually cicking the links and visiting each sample framed page so that you can view the source code while viewing the actual pages.

Linking Between Frames

To make links in one frame work on another frame, you have to give each frame a name. You do that by attaching name="put_name_here" in the frame src tag. If each frame is named then you will be able to refer to different frames in your links. That way you can choose what frame to open a link up in.

<frame src="aboutme.html" name="topframe">

In the sample code above the frame will automtically load the page aboutme.html into the browser when a visitor first arrives. The specific frame is named topframe. If you wanted to click on a link in another frame and have the link open up in topframe then you would simple refer to topframe as the target frame:

<a href="contactme.html" target="topframe">

As you can see we are calling the page contactme.html to be loaded in the frame topframe. As long as you make sure that you assign a name to each frame then you shouldn't have any problem linking between frames.

The default setting for links is for the link to open up in the same frame that it originated in. So if you do not refer to your target frame in your link then the link will automatically load in the same frame.

Breaking Out of Frames

Breaking out of frames can be accomplished by adding target="_top" onto the link which will break you to of the frames. Here's a full example of what such a link would look like:

<a href="http://www.google.com">Open a Link to Google in a New Window</a>

With that link you would open up a link to Google and it would not open in the framed window.

Scrolling and Border Settings in Frames

To alter settings for having or not having scrolling in your frames and having a border or not, all you have to do is add a little bit of code and then pick 'yes' or 'no'. Very simple. Look, here's an example to set the border to 'yes' and the scrolling to 'no':

<frameset rows="*,70"><frame src="link.html" scrolling="no" 
frameborder="yes" name="page"></frameset>

To set the border or scrolling properties all you have to do is alternate between yes and no, and the border can have varying thicknesses, depending on the number you choose. 0 is no border, 1 is a thin border, 2 is a little bit thicker, etc.

Resize Setting in Frames

In order to set the frames to have the ability to be resized by the visitor or not, include this HTML in the code for the frameset: noresize.

The full code would resemble this:

<frameset rows="*,70">
<frame src="page.html" scrolling=no 
frameborder=yes noresize name="page">
</frameset>

And there you have it - making frames which cannot be resizeable.

Inline Frames

Inline frames are the only frames which don't cause me to want to vomit. That being said, let's move on.

Unlike normal frames inline frames can be set anywhere within an HTML document and they will just exist wherever you place them. For example I am going to go ahead and drop an inline frame right here:

I added a single line break right before the inline frame and a single line break following it. The inline frame has dimensions of 400px wide and 200px in height and a border of 1 pixel. And here is the actual code I used to display that inline frame:

  <IFRAME src="sample_iframe.html" width="400" height="500" scrolling="auto" frameborder="1">
  </IFRAME>

And that's it for the lesson on frames. With all this new knowledge you can turn your computer off and perhaps drink a Pepsi while basking in the glory of your nerdiness. That sounds delicious, doesn't it?