Frames are a method of showing more complex looking web pages and increasing the navigational structure.
But before you continue to read this tutorial, you must promise not to turn into a frame obsessed maniac like most people on the web. If you're using frames, make sure that they're absolutely, I do mean absolutely necessary. Frames are another little thing Netscape cooked up and if used wrong, they could fall into existance with the dreaded tag. For those of you using Microsoft browsers like me (I also use Netscape), you can't see the above text that says blink blinking which means you're extremely lucky.
Okay, now that you've read the above, you still might think frames are a great idea. Well, if you're absolutely sure . . .
Before I jump into how a frame code is established, let me explain some basic points. A framed page appears to be two web pages compacted together, yet in actuality it's three web pages. That is because the two pages being viewed have to be nested into a "parent file." The pages inside of the "parent file" are referred to as "child files." Many people learn how to do frames better by viewing the source of an HTML (Hyper Text Markup Langauge) document. There can also be more frames to a web page, but anything more that two viewings (in actuality three pages) is too much. Before someone should make a frames document, they should first know a little about HTML. But let's say they didn't. For their sake, I'll explain each variable to the code.
Frame Codes
A frameset page (which holds the URL, or address, of each page being framed) has to be free of HTML errors. Even the slightest typo will ruin the whole document which means the creator of the page has to go through each line of the code and check for the mistake. Here's an example of how the main frameset page will look like. And yes, it is in English. Note that the relevance of whether the CAPS is on or off does not matter in HTML. I also numbered each line so that it would be easier to view the explanation.
1. <HTML>
2. <HEAD>
3. <TITLE>Title Of Web Page Belongs Here</TITLE>
4. <META NAME="description" CONTENT= "type in the content of your web page here">
5. <META NAME= "keywords" CONTENT= "type in the keywords for your web page here">
6. </HEAD>
7. <FRAMESET ROWS= "xx%, xx%">
8. <FRAME NAME= "left" SRC= "left.html">
9. <FRAME NAME= "right" SRC= "right.html">
10. </FRAMESET>
11. <NOFRAMES>
12. <BODY>
13. You're browser is not reading this frameset!
14. </BODY>
15. </NOFRAMES>
16. </HTML>
Explanations
The first line contained the <HTML> tag. The <HTML> tag tells the browser that it is an HTML document it is viewing. If you've ever designed a web page before, all of this may sound familiar to you.
The second line contained a <HEAD> tag. The <HEAD> tag is used so that the browser knows that it is the heading of the document.
The third line is a <TITLE> and </TITLE> tag(s). These two tags tell the browser what the title is. The title is located at the top of the screen on the taskbar and not on the page itself, but because we included a <HEAD> tag, it also inserted it into the page.
Okay, the fourth line and fifth line it gets a little bit trickier. It's a <META> tag. The <META> tag tells robots and often called spiders how to reference the page in a search engine. This increases the chance of what percent class you'll be located in on a search engine. The description is put below the link to the page on a search engine so that the user knows more about the page he or she is about to enter. And the keywords is what really affects the percent class of the web page standing.
On the sixth line is a </HEAD> tag. This tag tells the browser that the heading is over.
On the seventh line is a <frameset row> tag value. You can also have a <frameset cols> tag if you would want the frames going left to right, rather than like the rows which go top to bottom. Notice the percent value in the tag. This tells the browser how much space of the browser each frame should take up. I placed "xx%", "xx%" where x is a variable standing for the percentage you would want.
On the eighth line and ninth line is a <FRAME NAME> tag which specifies what you want the left frame to be named. Note that it does not have to be named left and the URL (left.html) can be different, but MUST end in .html as all hyper text markup documents do. You need to have the left frame already made and published on the web before doing this document so it does not cause confusion. The same goes for the right frame.
On the tenth line there is a </FRAMESET> tag which tells the browser that the frameset code is over.
On the eleventh line is a <NOFRAMES> tag. This tag is picked up by browsers which cannot display frames. The following lines must be included with this tag.
The twelfth line is another <BODY> tag which is needed so that the browser which cannot display frames sees the following line.
The thirteenth line is the line with correlates with the twelfth line saying You're Browser is not reading this frameset. It needs no greater than or less than signs.
The fourteenth line specifies that the <BODY> tag is over using a </BODY> tag.
The fifteenth line specifies that the <NOFRAMES> tag is over with a </NOFRAMES> Note that browsers which do not support frames sees everything between the <NOFRAMES> and </NOFRAMES> tag.
And finally, on the sixteenth line we use a </HTML> tag so that the browser knows that the document is done.
Okay, and I have one brief note. A lot of people end up deleting their hard work because they can't get the links or image links on the left frame to open pages on the right side. Here is one small tag to use after the SRC (source) tag or if someone did not include height or width attributes it would be after the .gif tag: TARGET= "right" That's it. Hope you learned a thing or two by reading this report.
