HTML for the complete beginner

Frames

Frames are the part of HTML that people love to hate.
People hate them so much because people can't use them properly. Frames can be a bonus for a web page if used well, but a few simple rules should be followed.

Frames, no matter how they are set out should be based if not made on a 640 x 480 screen setting. People hate to scroll sideways, hence the hating of them. Graphics in frames is another big problem people can't grasp. If you want to fit a 100 pixel graphic in a 100 pixel frame, don't make your graphic to that size, make it smaller, the browser adds a default border around all pages. There is an HTML tag to clear this default but isn't widely accepted, but I still use it, it's marginheight, left border etc equals 0. We'll see this soon.

Links is another down fall to frames, everyone loves to use graphics for links (don't get me wrong I like both) but using graphics as links you should use text links as well, sort of a backup. People use just graphics in frames with no links on the other pages, what would happen if the page with the links on didn't show up? Or if someone had linked just to the main page without any links? For me it would be a very short visit.

The most common frame type is the two cells, either one on top (or bottom) or one at the side, but there is no limit to how many you can use. Remember the 480 x 620 users when you make your site, trust me when I say there is more people using the smaller size than you think.

Lets make some frames, but remember - NO SCROLLING SIDEWAYS.

Instead of sending you off to view frame pages I have made table samples, so just imagine they have scroll bars down the side.

One last note for making frames, remember the best size for a web page is under 30kb, using frames uses 2 plus pages, so all pages you use should add up to 30 kb, not each page.

This is the basic side border frame:
This is our main page (we still need the two pages to view: left.html and right.html)

<html>
<head>
<title>your title goes here</title>
</head>
<frameset cols="20%,80%">
<frame src="left.html" name="leftside">
<frame src="right.html" name="rightside">
</frameset>
<noframes>
What ever is between the <noframes></noframes> is what your non-frames viewers see, so add your page contents or at least a nice message for the people who can't view your site. The browsers will ignore the noframes tags if it is capable of displaying frames.
</noframes>
</html>

this is the left frame left.html

this is the second frame right.html

Remember, to make a frames page we need 1 more page than we see. So having two frames like the above shows us, we need to make 3 html pages. This main page (above) is the backbone, this isn't seen (unless your viewer can't view frames) but holds all your framed pages together.

So left.html will be:
<html>
<body>
contents of the left frame here
</body>
</html>

And right.html will be:
<html>
<body>
contents of the right frame here
</body>
</html>

To make two rows instead of columns like the sample above, we replace cols with rows.
You can use more than two of either, or even combine the both, I wont being showing how to do this for the simple reason of people abusing frames.

A lot of people hate frames so think if you really need them before using them, or even offer them a choice, frames or no frames. I could of made this site with frames, probably would have been easier but I decided it wasn't worth cutting those who don't like, or cant see frames out, this site is for everyone.

The row and cols tags look like this. Note that the sizes may be pixels (numbers) or %. The * is a wild card, meaning it will take up whatever is left. Never make the frame cols equal anything over 100%, and never make rows wider than 630. It's best to use % or a fixed side row and wild card (*) for the rest and you wont have any side ways scrolling.
For best results set your left (top or bottom or even right frame - smallest one) to a fixed size, i.e 100 and leave the other cell with * <frameset cols="80,*"> (or rows).

<frameset cols="20%,80%"> Gives us two columns, first one at 20%, the second at 80%.
<frameset rows="80,*"> Gives us two rows, first one at 80 pixels wide, and the * takes up the rest.

Links in frames are pretty useless unless we add the 'target=' tag. See above how we quoted name=, this is our target goal, so when you make a link, you put <a href="rightside.html" target="rightside"> and it will open in the right frame, use target="leftside" and it will open on the left. Most frames users only want pages opening in one part of the frame so we can use the <base> command or just the one name= on the page we want to open everything. Other targets we can use are:

_blank which loads the page into a new blank window.
_top which loads the page into a new window
_self which loads the page into the same window as the link
_parent pretty much the same as _self.

If you don't add the target= command all links will open in the same window as the link.

Like tables you can add commands into the tags, here is a list of some of the things you can do.
As far as I know these will all work in version 3 browsers and up.

<frameset>, <frame>, <noframes>, rows, cols, target, frameborder, bordercolor, noresize, marginwidth, marginheight, scrolling.

<noframes></noframes> always use this tag in frames
<frameset rows="?,?"></frameset> pixels or % and/or *
<frameset cols="?,?></frameset> pixels or % and/or *
<frameset border=?></frameset> 0 or 1 is most common
<frame src="url or page name"> left.html or desired page url
<frame name="main"> main frame, can be any name
<frame target="_blank or _self or _parent or _top> or your own
<frame marginwidth="?">
<frame marginheight="?">
<frame scrolling="yes or no or auto"> default is auto (never use 'no' if unsuitable for 620 x 480 users)
<frame noresize> default is resizeable
<frame frameborder="yes or no"> Netscape uses 'yes' or 'no' while IE uses '0'

To create a borderless frames in both Netscape and Internet Explorer, you have to use the framespacing="0" frameborder="0" border="0" in the frameset tag.

I may add more on this later, including an example page.