Learning html
quickly and easily for free.
HTML Frames.
Topics on this page.
How do I create frames? Creating more than one viewable window on your web pages.


Main Index

Getting started

The basics

Using text

Hyperlinks

Lists

Images

Tables

Frames

Forms

Uploading your pages

All tags

Meta tags

search engines

Better your rankings
color chart

Recommended reading

e-mail



If this site has helped you at all... Please
Add a link.

from your web site.

Frames enable you to display more than one web page on the screen at a time. Frames divide the screen into scrollable sections allowing you to utilize your web space better, and offer your visitors a constant index to refere to. Frames can be given an individual URL and name. Frames can also be resized by the user. Click here to see frames in action.
When you're done with the frames page simply close that window out and this one will still be here waiting for you.

Think of frames just like your html document accept, instead of starting the <body>.....use the <frameset> tag.

This is a good example of a basic frame document...
You can copy the following example into your own html document then view it. Then simply replace the URL's with your own.

<html>
<head><title>test frames...</title></head>


<frameset rows="*" framespacing="0" frameborder="0">

<frameset cols="20%,*" framespacing="0" frameborder="0">

<frame src="side.html" name="side" frameborder="0" scrolling="auto" noresize>
<frame src="main.html" name="main" frameborder="0" scrolling="auto" noresize>

</frameset>
</frameset>


<noframes>
This page requires a frames-capable browser... please <a href=http://"URL address">click here for no frames version.</a> </noframes> </html>

In the example above the <frameset rows="*" .... simply tells the browser that there will be only one row (vertically) in the frameset. You could put <frameset rows="200, 700" ... and you would have 2 rows (vertically).

<frameset cols="20%,*" ... tells the browser that there will be 2 columns (horizontally) the first of which is 20% of the screen and the second is the rest of the available area on the screen.

The attributes frameborder="0" and framespacing="0" in both of the framesets make it so the 2 frames join seamlessly.

<frame src="side.html" ... would be any html page that you create to fit within that frame.

<frame src="main.html" ... would be any html page that you create to fit within that frame the larger frame.

The attribute ... frameborder="0" simply tells the browser to display no border. If you wanted a border enter "1".

The attribute name="main" is just that a name for the frame. Usually used to tell the browser which frame to display something such as a linked html page.
ex... If you had a link in the side frame for someone to click on, but you wanted the actual linked page to show up in the main frame you would use...

<a target="main" href="http://www.your_link.com">click here</a>

The attribute scrolling="auto" tells the browser whether or not to display a scroll bar. It is set at auto so that if needed, it will display a scroll bar.( if the page in that frame is bigger than the area created for it.) You can set scrolling="no" or "yes" as well.

And the attribute noresize is to tell the browser that the frames cannot be resized by the visitors. If you don't put resize the browser will assume that you want the frames resizeable.

Of course </frameset> tags are to close the framesets

<noframes> is used in case someone comes to your site and their browser does not support frames...Most browsers support frames these days.

I don't recommend that you use more than 3 frames on a page.



Here are some other things that you can use to change the look of frames.

(use* for no definite size)
<frameset rows="30%,70%">
You can change the size of the frames by changing the percentages.

<frameset rows="*" framespacing="0" frameborder="0">
If you remove these 2 attributes, you'll be able to see borders on your frames.

<frame src="http:// URL address">
While you can use any URL address you like...I recommend that you create a specific html page for these frames depending on why you're using frames.

<frame src="http://URL address" frameborder="1" bordercolor="red">
You can change the border size or color to suit your needs.

<frame src="http://your 1st URL address" frameborder=1 bordercolor="red" scrolling="no">
You can make it so the frames won't scroll.

<frame src="http://your 1st URL address" frameborder="0" bordercolor="red" scrolling=no noresize>
You can make it so the frames can't be resized by the user.

<frame src="http://your 1st URL address" frameborder=0 bordercolor="red" scrolling="no" noresize name="main">

The <noframes> tag area is what is displayed to browsers that don't support FRAMES. So try and direct them to a no frames version of your page.



There are 2 attributes that you can use.... marginwidth="10" marginheight="40"
This sets the margins for your frames, but I usually set the margins within the pages themselves.


Well...that's the basics anyway. I hope this helps you somewhat.


24 Hours a Day - 7 Days a Week!!!
Now you can make your HTML learning experience much quicker and easier by joining our HTML Tutorial Club.
For only $20.00 a week, you can ask as many questions as you like and converse with Web Design Experts.
Try it out and get 1 Day FREE.

All Web Design questions answered within 24 hrs.