Frames tutorial

Mitzrah's Get IT Right Column!!
Frame Creation Basics
Updated : Saturday, August 01, 1998

Dear Homesteaders!

In order to create frames, you need to keep in mind that a parent file (index.html) will call up 2 or more files (navbar.html & main.html) Basically speaking, index.html will split up into 2 frames, the frame on the left will load up navbar.html and the frame on the right will support main.html. In pictorial form:

|------------index.html---------|

navbar.html

main.html

The following HTML codes will help you create a frame of medium complexity. It will have

4 frames
and are partioned VERTICALLY into 3 sections
- The top most frame will occupy 25% of your browser,
- the frame in the middle will take up 50% and the
- bottom most frame will take up the leftover 25% of the window.

Try saving this HTML file as test.html, create 2 files called file2.htm and file3.htm they could contain anything you like or use 2 exisitng files of your own. Always remember that you can PREVIEW your work with your browser. How do you do that? You open your browser and then under the "file" menu, you choose "Open Page" or just press CTRL + O and the browser will ask you where is the file you want to open located on your hard disk.

Please click here to see a sample of what the frame above will look like!

Here is some information to digest:

The FRAMESET container:

Frames are contained in a structure called a FRAMESET, which takes the place of the body container on a frames formatted page. An HTML document which contains a FRAMESET definition has no BODY section in its HTML code, and a page with a BODY section cannot use the FRAMESET tag.

So please make sure that you do not accidentally use BODY and FRAMESET within the same HTML document! Or the browser will not load up the frames.

ROWS and COLS

The FRAMESET tag has two important attributes, which are the ROWS and COLS tags. This is an example of a generic FRAMESET container:

<frameset rows="specification" rows="specification">
</frameset>

You must define a resonable number of ROWS or COLS or both. If you do not do this, the browser will not load your frames and will ignore your FRAMES ompletely.

The "specification" in the generic FRAMESET line is a comma separated list of values which can be expressed as follows:

Division into percentages: <frameset rows="25%,50%,25%">

Division into pixels: <frameset rows="100,240,140">

Proportioned : <frameset rows="*,2*,3*">

Or mixed : <frameset rows="10%,240,*">

If you use a FRAMESET with both COLS and ROWS attributes, it will create a grid of frames, like for example:

The line above will create a frame grid with 3 rows and 2 columns. And it will look something like this:

<FRAME> TAG

The frame tag defines a single frame, it must be put within FRAMESET tags like so:

The FRAME tag has 6 associated attributes, they are: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING and NORESIZE. This is an example of a complete generic FRAME tag:

<FRAME SRC="url" NAME="window_name" SCROLLING="YES|NO|AUTO" MARGINWIDTH="number" MARGINHEIGHT="number" NORESIZE">

Calling up a FRAME source

The most important FRAME attribute is SRC, what this attribute does is call up a source file or URL to be loaded up in that frame. It could be a file residing on your directory or it could point elsewhere. Here are some examples:

To load up file called myself.html in your directory, the FRAME tag should look like this:
<FRAME SRC="myself.html">
To call up a page at another URL like say my homepage for example which URL is:
http://www.oocities.org/Tokyo/Pagoda/1545 the FRAME tag is of this form:
<FRAME SRC="http://www.oocities.org/Tokyo/Pagoda/1545">
It also can be used to call up a picture, let us say my picture which is alex.jpg which can be found at::
http://www.oocities.org/Tokyo/Pagoda/1545/alex.jpg the FRAME tag is of this form:
<FRAME SRC="http://www.oocities.org/Tokyo/Pagoda/1545/alex.jpg":>

What if a visitor who cannot support frames show up?

You can do this by virtue of the <NOFRAMES></NOFRAMES> tags. And they should look like this.

<NOFRAMES>
All your ALTERNATE HTML code goes in here.
</NOFRAMES>

For example:

<NOFRAMES>
<body backgound=.......>
You have arrived here, but your browser cannot support frames :(
</body>
</NOFRAMES>

This should provide you enough grounding to understand the next chapter when we delve into some examples of FRAMEs. Please click here to continue!


[ Emiri Nakayama \| Sailor Mars, Rei \| About Me \| Photo Gallery ] [ WWW Resources \| HTML Tutorials \| Hints & Tips \| Banner Exchange ] [ Awards \| Win My Award \| Home \| Links \| Change Music \| E-Mail Me ]

LinkExchange Member

Free Home Pages at GeoCities