All about Using Framed HTML Page

What are Frames?
The first thing which crosses an amateur's mind is what is frames? The Frame as the name suggests is a window sort of thing. You actually divide any HTML page into desired number of parts. For example the header, The navigation and the content. You then write an HTML code which puts Three different pages! into these windows. If frames are set without borders, the user nevers knows that there're actually three different pages loaded at a time.

Definition of Frames:- Well, HTML frames are HTML pages which when loaded into a particular section of the main page (Page windows), are termed as frames. Watch a Framed (In which case?? :) ) HTML page in action.

Why Frames?
Frames are the quickest way to have an uncluttered easy navigation system. Actually frames are required when we want to manage several things at a time without using Tables. Frames provide easy and quick page layout with no frills.
Other advantage of frames is that since only the content is loaded and not the header image and links' code, The response time is faster giving greater user satisfaction.

Why to avoid Frames?
Sad news is that many browsers do not support frames. So, if you are not sure of the browser configuration of your potential user you should avoid using frames. Also, the address of the main page does not change, sometimes giving impression that the links are not working while they are actually working.

---

The Frameset:-
A framed HTML page is actually a set of pages put in a set. The binding tag of Frames is the frameset. The following is the code which divides the page into two columns.
<frameset cols=100px, *></frameset>

The code below divides the page into two rows
<frameset rows=100px, *></frameset>

The values of the attributes rows and cols are the width/height of the respective frame. In the first example, the page is divided into two columns. The width of the first frame is 100px while the second frame's width is the rest available width of the screen. Similarly in the second example of frameset, the page is divided into two horizontal parts.

* To divide the page into more than two parts just add one more comma and specify the value of the added frame! e.g cols=100px, 200px, * divides the page into three vertical frames.

We can specify the width of the vertical frames and the heights of the horizontal frames in percentage also. E.g cols=20%, *. We can also fix widths of all the frames by specifying the exact widths of the frames eg. cols=100px,300px, 200px.

Where are the frames?
OK, so far we have just specified the framesets. Here come the actual frames.
Each frame as mentioned earlier, contains an html page. The HTML page which is to be displayed in a specific frame is specified by the tag. The page location is given by the "src" attribute of this tag. Example would be like this
<frame src="page1.html"></frame>

So the complete source of a framed HTML page will be something like this
<frameset rows=100px, *>
<frame src="page1.html"></frame>
<frame src="page2.html"<>/frame>
</frameset>

Webpage Layout Using Frames
To create a layout of a web page using HTML frames. First you should decide what would be there in the page. A typical page will have the following components.

1. The HEADER : Generally the logo of the company or website.
2. The Navigation: Generally all the links within the website.
3. The content: The content of any web page.
4. Optional Footer: Footer of the website, giving information regarding contacts etc. However, you can add this in the links only.

To create a layout which has a header on top, navigation in left and the content in the right, we need to divide the page into three parts. For this we will

• Divide the page horizontally into two parts. The top part will load the header.html and the bottom part will be a frameset.
• Divide the bottom frameset into two vertical frames. The left frame will load the navigation page and the right one will load the content. Intitially we can creat a main.html to fill this page.

The source code of the main page containing the frames is given below.

<frameset rows=100px,*>

<frame src="header.html"> <frameset cols=100px,* >
<frame src="links.html"<>/frame>
<frame src="content.html" name=content></frame>
</frameset>
</frameset>
</code>

Notice that the frame content frame is given a name content. Why? we'll learn just in a few seconds. OK, so now as you know you have to create the following files apart from the main file.
1. header.html (To be displayed on the top)
2. links.html (To be displayed in the leftmost corner of the page)
3. content.html (This page will initially be loaded into the content frame)

The header.html file will contain only the heading of the web page. This might be the logo of the website also. The links.html file contains links with attribute "target" set to "content".

The named HTML Frame:
As promised the mystery of the named frame is here. The link (anchor) tag has one attribute target. By specifying the target of a link we mean that the page to be opened should be opened into the "target frame". So, all the links in the links.html file will have their "targets" set to "content".
The source code of links.html is given below for further clarification.

<a href=page1.html target=content>Page 1</a>
<a href=page2.html target=content>Page 2</a>


Now when the Page 1 is clicked, the page1.html is opened in the content frame. With border of the frames set to zero, the user will never know that only a portion of the displayed page is being reloaded! Now See the HTML framed webpage in action.

• To remove frame border, use the attribute border. Set the border attribute to zero. eg. < frameset rows=100,* border=0 >
• Do not specify the <body> element when using frameset.