Site hosted by Angelfire.com: Build your free website today!

How to Create Frames in HTML

This is the code for the first page that will load. It will set up the frames for the other pages. It starts like a mormal HTML document. For ease of reading, I tabed the actual code over to the right.

<html>
<head>
<title>Title for your page</title>
</head>

Here is where you insert the code for the Frame layout. Notice there are no tags used here. You must decide if you want the page layed out in ROWS (horizontal) or COLumnS (vertical) For this sample code, we will start with ROWS

<frameset rows="60,*">

This makes 2 horizontal rows: one 60 pixels high and the other one (represented by the *) uses the rest of the space on the page. Now you tell it what page(s) to load into those frames. NOTE: It is helpful to give your frames a name to be able to refer to them later...

<frame src="title.html" scrolling=no marginheight=0 noresize name=title>

Where title.thml is the name of the html file containing the title immage or text for your page. scrolling=no tells it not to put a scrollbar if the image is larger than the frame (by default it places a scroll bar there if the document is larger than the frame, or you can tell it to always place a scroll bar on the frame by using scrolling=yes) marginheight=0 takes away the top and bottom margins (you can also specify the width of margins using marginwidth=size) noresize sets it to where when the page is loaded, the boarders can not be draged name=title sets the name for that particular frame to title. next, instead of giving it a page to load for the rest of the page, we will devide the remaining space into two columns.

<frameset cols="150,*">
<frame src="links.html" name=links>
<frame src="homepage.html" marginheight=0 magrinwidth=10 name=document>
</frameset>
</frameset>

I went ahead and gave it two pages to load in those frames and then closed out the frame code. That is basically all there is to it to make a page with frames layed out somewhat like the macro depicts below, but there are still a few more details to work out... HOW IT WILL LOOK:

	_________________________________________________
	|                                               |
	|       (title)                                 |
	|                                               |
	|_______________________________________________|
	|               |                               |
	|  (links)      |       (document)              |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|               |                               |
	|_______________|_______________________________|

There is just one small problem with the code as it is now... Some browsers do not support frames so this page will not load correctly for them. Fortunatly, there is something you can do... just add the <noframes> section.

<noframes>

Inside here, you can enter in the code for the page without the frames. To make matters easier, you can just copy the code from the page you have load in the document frame to here.

<body>
</body>
</noframes>
</html>

In case you are wondering how this works, browsers that do not support frames will not know what to do with the <frameset>, <frame>, and <noframes> tags so it will just ignore them and just load what it can understand. Browsers which do support frames know to ignore what is inside the <noframes> tags. Now on to the individual pages... In the title page, you generaly will want a centered title or immage at the verry top of the document. Of course, it is up to you whether or not you want other stuff there like links. The links page can be a bit tricky. Of course, as we have this page layed out right now, you can visually tell that you will want a vertical column of links. There is just one problem... When you click on a normal link, it will open in the same frame as the link is in. Here is where the names you gave the frames come into play. You can specify which frame the page will load in using the TARGET=frame_name property <a href="page.html" target=document>Page will load in the document frame</a> To make matters easier, you can specify a base target for the page. This will make all links on the page load in the specified frame unless otherwise specified. (This goes in the head)

<head> <title>Page Title <base target=document> </head>

In some cases you may want the link to open in a different frame than the document frame. One such case would be if you want the link to open another page of links to expand list of links. To do this, you can just place the target= section in the code for the link.

<a href="moreLinks.html" target=_self>

Notice I used _self as the target rather than the actual name of the frame (links). HTML supports special Magic Target Names:

_self Loads the document in the same frame that contains the hyperlink.
_blank Loads the document in a new browser window.
_parent In a layout of nested frames, loads the page in the frame that contains the frame with the hyperlink.
_top Loads the document into the full display area, replacing the frame layout.

If you get this all up and runing right and you don't like the way the boarder looks there is a couple things you can do... You can change the boarder color by adding boardercolor=color in either your existing <frameset> or tags

<frameset boardercolor=blue> <frame boardercolor=red>

If you still don't like the way that looks, you can change the width of the boarder or even completely remove it... unlike boardercolor, this can only be used in the frameset tags.

<frameset boarder=0>

Seting the boarder to 0 removes the boarder. That about wraps it up... There is still one more option at your disposal... You can create what is called a floating frame. This places a frame within normal HTML code as a separate box or window instead of a side or top or bottom. Below is a sample section of code and diagram.

<html> <head> <title>Floating Frame Sample</title> </head> <body> <center><h1>Floating Frame Sample</h1></center> <IFRAME WIDTH=350 HEIGHT=220 ALIGN=RIGHT HSPACE=5 SRC="Sample.html"> </IFRAME> This is a sample of a floating frame. As you can tell, it is much like an inline immage. This style of frame can be usefull if you do not want to take the time to create a separate title page and links page, or if you just perfer the way these frames apear. </body> </html>

The code above should produce a page somewhat like the one diagramed below if copied to a blank html document. Note: You can use the name= property for a floating frame if you want a hyperlink to open in the frame.

	_________________________________________________________
	|                                                       |
	|       Floating Frame Sample                           |
	|                               _______________________ |
	| This is a sample of a         |                     | |
	| floating frame.  As you can   |    Sample.html      | |
	| tell, it is much like an      |                     | |
	| inline immage.  This style    |                     | |
	| of frame can be usefull if    |                     | |
	| you do not want to take the   |                     | |
	| time to create a separate...  |_____________________| |
	|                                                       |
	|_______________________________________________________|

NOTE: Only Interet Explorer Browsers 3.0 and later support Floating Frames. (Not currently supported by Netscape).

This should tell you pretty much every thing you could need to know about creating frames. I do NOT claim to be an expert in HTML, but if more help is needed, you can email me at x_whitewolf_x@yahoo.com

Please do not rediztribute this text, or if you do, please give credit where credit is due.
The White Wolf�