Frames

Introduction

Frames Will not it be better, if you are able to display the more then one HTML document in the same browser. Yes of course it will be better. So get ready to learn this fascinating idea. It can be done very easily using "Frames" in the HTML.

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

With the frames you will be able to create the pages like this:

In this way the browser can be divided into the Horizontal & Vertical Frames and each frame contains a page in it. Hence by using frames you can display more then one page in one Browser.

Different Types of Frame

Horizontal Frame

The horizontal frames are created in the horizontal pattern on the browser. Horizontal frames divides the browser in the horizontal parts as you see in the figures. And all the frames displaying a different html files in them.

Vertical Frame

The vertical frames are created in the vertical pattern on the browser. Vertical frames divides the browser in the vertical parts as you see in the figures. And all the frames displaying a different html files in them.

Mixed Frame

The mixed frames are created using both vertical frames and horizontal frames. Mixed frames divides the browser in the vertical parts as well as in the horizontal parts as you see in the figure of Mixed frames. And all the frames displaying a different html files in them. Before starting the creation of the frames you will need to read some Simple Tags about frames.

Frame Tags

Tags Description <frameset> Defines a set of frames <frame> Defines a sub window (a frame) <iframe> Defines an inline sub window (frame)

Tags and its Attributes:

Tags Attribute Value Description <frameset> rows pixels, % part of page Defines the proportion of division of page in horizontal frame. cols pixels, % part of page Defines the proportion of division of page in vertical frames. <frame> src path of the file path of the file which in to displayed in frame. noresize noresize Defines weather the frames resizable or not. name name of frame Provides the name of frame. <iframe> src path of the file path of the file which in to displayed in iframe. name name of iframe Provides the name of iframe.

<frameset> Tag

The <frameset> defines the set of frames or you may say, it defines no. of frames we will have on the a page. The frameset is a set of frames.

Format:

<frameset rows="pixels or % of page, pixels or % of page,....,pixels or % of page">

Examples:

<frameset rows="30%,40%,30%">

This example will create the three horizontal frames with area of 30%, 40%, 30%. As 100% area is divided in three parts of 30%,40% and 30% for three frames.

<frameset rows="30%,*">

Star character '*' here represents the remaining part of the screen. This example will create the two horizontal frames with area of 30% and whatever is remaing part of the screen will the height of second frame. As 100% area is divided in two parts of 30% and then the remaining screen area will be second frame. Note: This * is commonly used for creating frames.

Its Attributes:

rows: it is used when user wants to create the horizontal frames.

cols: it is used when user wants to create the vertical frames.

If you want to create the three horizontal frames of ratio 20%, 50%, 30% of the page.

Then the <frameset> tag will be:

<frameset rows="20%,50%,30%">

If you want to create the three vertical frames of ratio 20%, 50%, 30% of the page. then the <frameset> tag will be:

<frameset cols="20%,50%,30%">

In both the examples the first frame is of 20%, second is of 50%, third of 30%. But <frameset> alone will not display the frames it only defines the set of number of frames it will have. To display those frames make the use of <frame> tag.

<frame> Tag

The frame tag displays the empty frames. <frame> tag is used between the start & end tag.

If you want to display the other pages in the frames then use src attribute of <frame> tag.

Format:

<frame src="path of file" noresize="noresize" name="any_name">

Example:

<frame src="d:\html\frames.php" noresize="noresize" name="frame1">

Its Attributes:

src: defines the path of file which is to be displayed in the frame.

noresize: defines the resize property of the frame, if we defines the its value as "noresize" then the you can not change the size of frames. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders.

And if you need resizable frames then do not use "noresize" attribute in <frame> tag.

name: defines the name of the frame. You can provide the name of your choice.

<iframe> Tag

It is the tag for the inline frames. The inline frame is the small frame which can be inserted on any web page. It is defined inside the body of the html file. It is not resizable.

Format:

<iframe src="path of file" name="name_of_this_frame">

Example:

<iframe src="c:\html\lists.php" name="iframe">

Its Attributes:

src: defines the path of file which is to be displayed in the frame.

name: defines the name of the frame. You can provide the name of your choice.

How To create Horizontal Frames

Example:

if you want to create three horizontal frames of area 20%, 50%, 30% then first use the <frameset> Tag.

so now lets do some Practical.

Examples of Different Frames

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

This example will display empty frames.

<html> <frameset rows="20%,50%,30%"> <frame> <frame> <frame> </frameset> <head> <title> Frames</title> </head> </html>

so now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

This example will display three frames with different pages.

<html> <frameset rows="20%,50%,30%"> <frame src="c:\html\list_tags.html" name="frame1" noresize="noresize"> <frame src="c:\html\basic.html" name="frame2" > <frame src="c:\html\link_media.html" name="frame3" > </frameset> <head> <title> Frames</title> </head> </html>

Page in browser will look like:

Note:

You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.

How To Create Vertical Frames

To create such type of vertical frames you do not have to do much more just write "cols" in place of "rows" in the <frameset> tag.

Example:

<frameset cols="20%,50%,30%">

also test them in the browser.

Example:

This example will display three frames with different pages.

<frameset cols="20%,50%,30%"> <frame src="c:\html\list_tags.html" name="frame1" noresize="noresize"> <frame src="c:\html\basic.html" name="frame2" > <frame src="c:\html\link_media.html" name="frame3"> </frameset> <head> <title> Frames</title> </head> </html>

Page in browser will look like:

How To Create Mixed Frames

To create the mixed frames, concept of nesting is used, in mixed frames we use the nesting of <frameset>. See how nesting of <frameset> is done

Example:

<html> <frameset cols="20%,80%"> <frame src="c:\html\list_tags.html" name="frame1"> <frameset rows="20%,80%"> <frame src="c:\html\link_media.html" name="frame2"> <frame src="c:\html\basic.html" name="frame3"> </frameset> </frameset> </html>

Page in browser will Look Like:

In this example you see how first <frameset> tag divides the browser into two frames i.e. of 20% and 80%. then first frame1 is defined but the second frame is again divided into the two new horizontal frames using the second <frameset> tag of inside the first <frameset> tag.

so now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Note:

You do not have to worry if the second example does not display the any page in the frames. It is because path of file defined in the src attributes of the <frame> tag does not exist or files in the directory c:\html does not exists.

How to Create Inline Frame

Inline frames are created using the <iframe> tag. This tag is used inside the body of the HTML file.

So lets have an example:

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks:

Example:

<html> <body> <iframe src="c:\html\list_tags.html"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>

Page in browser will Look Like:

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.