HTML 005 - Frames
PDF

Frames are not very commonly used in websites but they can be useful in some instances. Basically frames will split up your browser screen so that it is possible to view two or more different web pages with in one web browser window.

In order to use frames in a web browsers screen you first must begin with the <frameset></frameset> tags. Open up your HTML file in your text editor and we will get started. Along with the frameset tags it is also suggested to use the <noframes></noframes> tags for the browsers that do not support frames. The noframes tags work the same way that the alt attribute is used in the image tag, the only difference is that you can put anything within the noframes tags. Below is how you would set up an HTML file with frames.

<html>
<head>
<title>My Web Page</title>
</head>
<frameset>
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
</html>

As you can see the <frameset> tags replace the <body> tags and encompass everything that will appear on the page. The <noframes> tags is what will appear if a browser does not support frames so within that you would add the <body> tags as you would any other page and treat everything within it as such.

Now that we have the basic layout of frames set up we can actually make the frames. We will have two different frames in our browser screen. In order to do this we must define the width or height of our frames. I will split our screen vertically:

<frameset cols="50%,50%">
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>

The cols="" attribute stands for columns and to define the width of our frame in 'cols' we use a percentage. This is the percentage of the whole browsers viewing window width. If you test your page out now you will notice that nothing happens and we just have a white screen. To make frame work we must also have the <frame> tag. This is similar to the image tag in the fact that it does not have a separate closing tag and we use the src="" attribute.

<frameset cols="50%,50%">
<frame src="http://www.darkscarab.com">
<frame src="http://www.shop.darkscarab.com">
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>

If you test that out in your web browser you should see the two different frames and the two different web pages to load. This is basically what frames do. You can also make as many frames as you like vertically or horizontally or a combination of both. To make the frames go horizontally you would use the rows="" attribute rather than the cols="" attribute. To do a combination you would put a frameset within a frameset.

<html>
<head>
<title>My Web Page</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.forum.darkscarab.com">
<frameset cols="50%,50%">
<frame src="http://www.darkscarab.com">
<frame src="http://www.shop.darkscarab.com">
<noframes><body>Your browser does not support frames.</body></noframes>
</frameset>
</frameset>
</html>

There are a few other things you can do with frames. If you test out your HTML page now you will see that you can adjust the size of your frames. You can disable that feature by adding the noresize="noresize" attribute in your frameset tag.

There is also another use of frames. For these types of frames you do not have to use the <frameset> tags. This is called the inline frame. This feature can just be used within the <body> tags like most other tags. Below is an example of an inline frame:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<iframe src="http://www.darkscarab.com"><iframe>
</body>
</html>

With this kind of frame you can put a webpage within your webpage. Usually the default inline frame will be quite small and use scroll bars. You can resize your inline frames just like you would resize an image. All you have to do is use the width and height attributes.

Inline frames also have a border by default. Sometimes this is not desired, so to remove this you will use the frameborder attribute. This attribute is defined by either a '1' or a '0'. If you use 1, then the border will be shown, if you use 0 then there will be no border. Below is what the coding would look like without a border.

<iframe src="http://www.darkscarab.com" frameborder="0"><iframe>

In conclusion, frames can be quite useful. However, if you are designing a website with frames it is important to remember that each frame will need its own separate HTML file. In many cases it can become difficult to keep track of all the HTML files if you use many frame. Typically I try not to use frames unless it will make updating my website easier.