Turn Desktop View Off
You are here:   HomeHTML LanguageHTML TutorialHTML MARQUEE
by Dinesh Thakur Category: HTML

A frame is an independent scrolling region or window, of a web page. A framed document divides a browser window into multiple panes or smaller window frames. Each frame may contain a different document. Frames can communicate with each other so that an action performed on a page in one frame can change the contents and behavior of another frame.

Users can view information in one frame while keeping another frame open for reference, instead of moving back and forth between pages. Frames offer many possibilities. They can contain table of contents, site indexes and lists of links. Fixed screen sizes limit how many frames can realistically be used simultaneously. Each frame in a window may be separated from the others with a border, in this way a framed document may resemble a table.

 



However frames aren't a fancy form of tables. Because the documents included in a framed region may be much larger than the room available onscreen, each frame may provide a scroll bar or other controls to manipulate the size of the frame. Individual frames are usually named, so that they may be referenced through links or scripting, allowing the contents of one frame to affect the contents of another.

 

CREATING FRAMED DOCUMENTS

 

Creating frames is actually quite simple. First of all you need to set a layout in your mind, as how do you want to divide the browser's window or the web page. Then remember that a framed document is composed of several documents. For example, a page with two frames actually involves three files

 

1. The framing document or the master document that defines the framing relationship i.e. what does where.

2. The file that contains the contents of frame one

3. The file that contains the contents of frame two.

The two tags which are used for created a framed document are:

This tag is included after <HEAD> tag and it establishes frames within the HTML document. It does all the dividing. It requires a closing tag and there may be any number of <FRAMESET>tags within an HTML document.

 

Syntax:

 

<FRAMESET COLS = "Width1, Width2, " Rows = “height1, height2,....">

...... Frame or Frameset definitions……….

</FRAMESET>

 

Cols: This attribute is used for vertical frames and widths are specified as a comma delimited list of sizes in pixels, percentage or as a proportion of the remaining space by using “*”

Rows: This attribute is used for horizontal frames and height again is specified in pixels, percentage or as a proportion of the remaining space by using “*”

 

<FRAME> TAG

 

This tag contains the frame content and works same as the <LI> tag for lists. It tells the browser, what to put in each frame. Each Frameset must include a <FRAME> definition for each division; it does not have a closing tag.

 

Syntax:

 

<FRAME SRC = "URL">

 

SRC: This attribute accepts the URL of the frame content.

Example 1: Now, in order to divide the browser window into two frames. Following is the code for the master document.

<HTML>

<HEAD><TITLE>FRAMING TAGS</TITLE></HEAD>

<FRAMESET COLS="50%, 50 %">

<FRAME SRC="FRAME1.HTM. :'>

<FRAME SRC="FRAME2.HTML :'>

</FRAMESET>

</HTML>

 

Notice that there is no <BODY>tag. The master page does not use them. If you put <BODY>tag within the master page, the browser won't be able to divide the browser's window using a <FRAMESET>tag the page has been vertically divided into two columns each of width 50%of the browser's window. Also as there are two partitions, so two <FRAME> tags are used for specifying frame content. The codes for the two frames FRAME l and FRAME2 are shown below:

 

FRAME1.HTML

 

<HTML>

<HEAD>

<TITLE> PRODUCTS PVT LTD</TITLE>

</HEAD>

<BODY>

<H1 ALlGN="CENTER"><B><FONT FACE="ARIAL BLACK">PRODUCTS PVT LTD.</FONT></B></H1>

<P ALIGN="CENTER"> &NBSP; </P>

<UL>

<LI>

<P><FONT COLOR="#990033">COMPUTER PRODUCTS</FONT></LI>

<LI>

<P><FONT COLOR="#990033"> PRODUCTS</FONT></LI>

<LI>

<P><FONT COLOR="#990033">HARDWARE</FONT></LI>

<LI>

<P><FONT COLOR="#990033">KITCHENWARE</FONT></LI>

</UL>

<P> &NBSP; </P>

</BODY>

</HTML>

 

FRAME2.HTML

 

<HTML>

<HEAD><TITIE> TEXT FIEIDS</TITIE></HEAD>

<BODY BGCOLOR="PINK">

<P ALIGN ="CENTER"><B>ADMISSION FORM</B>

<FORM>

<P>

<INPUT TYPE ="TEXT” NAME="NAME" VALUE="ENTER YOUR NAME:" SIZE="25"

MAXLENGTH="30" accesskey="N"> <U>N</U>AME<BR><BR>

<INPUT TYPE ="PASSWORD" NAME="PASSWD" SIZE="25"

MAXLENGTH="30" accesskey="P"> <U>P</U>PASSWORD<BR><BR>

<INPUT TYPE ="TEXT" NAME="ADDRESS" SIZE="25" MAXLENGTH="30"

accesskey=" A"> <U>A</U>ADDRESS<BR><BR>

<INPUT TYPE ="RADIO" NAME="SEX" VALUE="MALE" accesskey="M" CHECKED><U>M</U>ALE<BR>

<INPUT TYPE ="RADIO" NAME="SEX" VALUE="FEMALE" accesskey="F"> <U>F</U>FEMALE<BR>

</FORM>

</BODY> </HTML>

 

Example 2: Now we will create a frameset having four vertical frames. The first one will occupy 40 per cent and each of the remaining three will occupy 20 per cent of the available window space. Since we have four vertical columns and so each of them require <FRAME> tag with an html document. The code for master document is shown below.

 

<HTML>

<HEAD><TITLE>FRAMING TAGS</TITLE></HEAD>

<FRAMESET COLS="40%,20%,20%,20%">

<FRAME SRC="FRAME1.HTML.:'>

<FRAME SRC="FRAME2.HTML.:'>

<FRAME SRC="FRAME3.HTML.:'>

<FRAME SRC="FRAME4.HTMI.:'>

</FRAMESET>

</HTML>

The html codes for the two new documents used in the example are given below:

 

FRAME3.HTML

 

<HTML>

<HEAD><TITLE> TEXT FIELDS</TITLE></HEAD>

<BODY BGCOLOR="PINK">

<P ALIGN ="CENTER"><B>ADMISSION FORM</B>

<FORM>

<P>

<INPUT TYPE ="TEXT' tabindex="30" NAME="NAME" VALUE="ENTER YOUR NAME:" SIZE="25"

MAXLENGTH="30"> NAME<BR><BR>

<INPUT TYPE ="PASSWORD" tabindex="20" NAME="PASSWD" SIZE="25"

MAXLENGTH="30"> PASSWORD<BR><BR>

<INPUT TYPE ="TEXT" tabindex="40" NAME="ADDRESS" SIZE="25"

MAXLENGTH="30"> ADDRESS<BR><BR>

<INPUT TYPE ="RADIO" tabindex="10" NAME="SEX" VALUE="MALE" CHECKED> MALE<BR>

</FORM>

</BODY>

</HTML>

 

FRAME4.HTML

 

<HTML>

<HEAD><TITLE> TEXT FIELDS</TITLE></HEAD>

<BODY BGCOLOR="PINK">

<P ALIGN ="CENTER"><B>ADMISSION FORM</B>

<FORM>

<FIELDS>

<LEGEND><H2>DETAIL</H2></LEGEND>

<P>

<INPUT TYPE ="TEXT" NAME="NAME" VALUE="ENTER YOUR NAME:" SIZE="25" MAXLENGTH="30"> NAME<BR><BR>

<INPUT TYPE ="PASSWORD" NAME="PASSWD" SIZE="25" MAXLENGTH="30"><BR><BR>

<INPUT TYPE ="TEXT" NAME="ADDRESS" SIZE="25" MAXLENGTH="30">

ADDRESS<BR><BR>

<INPUT TYPE=”RADIO” NAME=”SEX” VALUE=”MALE” CHECKED>MALE<BR>

<INPUT TYPE=”RADIO” NAME=”SEX” VALUE=”FEMALE” >FEMALE<BR>

<SELECT NAME =”COUNTRY”>

<OPTION VALUE = “INDIA”>INDIA

<OPTION VALUE = “AMERICA”> AMERICA

<OPTION VALUE = “AUSTRALIA”> AUSTRALIA

<OPTION VALUE = “NEW ZEALAND”> NEW ZEALAND

<OPTION VALUE = “CHINA”> CHINA

</SELECT><B>COUNTRY</B>

<TEXTAREA NAME="COMMENTS" ROWS=2 COLS=20 WRAP="VIRTUAL:”> PLACE YOUR COMMENTS HERE: </TEXTAREA> <B> COMMENTS </B>

<FIELDSET>

<INPUT TYPE=”FILE” NAME =”ATTACHEMENTS” SIZE=”30” ACCEPT=”IMAGE/JPG” DISABLED> <B> ATTACHEMENTS</B>

<P ALIGN=CENTER>

<INPUT TYPE=”IMAGE” SRC=”C:\WINDOWS\HLPGLOBE.GIF” ALT=”SUBMIT” WIDTH = 55 HEIGHT = 40>

<INPUT TYPE=”RESET” VALUE=”RESET”>

</FORM>

</BODY>

</HTML>

 

Elastic Frames

 

The height/width of frames can be specified in terms of number of pixels. For example the Frameset definition:

<FRAMESET ROWS = "200, 300, 350">

</FRAMESET>

 

This will produce three horizontal frames of heights 200, 300 and 350 pixels respectively but specifying absolute dimensions may create problem as browser's window may be opened in different screen resolution. In our example if the browsers window height is greater than 850 pixels, an empty frame will appear whereas for browsers having height less than 500 pixels the third frame won't be displayed at all.

 

The solution is use of elastic frames. In elastic frames we use the notation * instead of a number. The "*" means whatever is left over.

The following code shows the use of elastic frames.

<HTML>

<HEAD><TITLE>FRAMING TAGS</TITLE></HEAD>

<FRAMESET ROWS="100 ,* ,* ">

<FRAME SRC="FRAME1.HTML”>

<FRAME SRC="FRAME2.HTML”>

<FRAME SRC="FRAME3.HTML”>

</FRAMESET>

</HTML>

The above code tells the browser to make three frames. The first one is of height 100 pixels and the rest of the height is divided equally between frames 2 and 3. Instead of specifying absolute dimensions, we have used elastic frames and now the frames will appear in any case.

The following <FRAMESET> can be used to specify elastic frames

• <FRAMESET ROWS = "100, * , 2* “>

………………

………………

 

</FRAMESET>

 

The above code makes 3 horizontal frames. The first frame 100 pixels high. The rest divided between frames 2 and 3 but make frame 3 twice as big as frame 2.

 

<FRAMESET cols ="*, *, * ">

………………..

………………..

………………..

 

</FRAMESET>

 

The above code makes 3 equal vertical frames each having width 1/3 rd of the browser's window

 

<FRAMESET rows="* ,2* ,* ">

…..

…..

</FRAMESET>

 

The above code makes 3 horizontal frames that respectively occupy 1/4 I 2/4 = 1/2 and 1/4 of the available space.

 

<FRAMESET rows = "2* ,* , 3* ">

…….

…….

 

<FRAMESET>

 

The above code makes 3 horizontal Frames that respectively occupy 2/6 = 1/3 . 1/6 and 3/6 = 1/2 of the available space.

 

Nested Frame Sets

 

So far we have discussed only vertical or horizontal frames in a window. Sometimes we may require a more complex structure including both the horizontal and vertical frames. We can combine these two types of frames by including a <FRAMESET>tag within another <FRAMESET>tag. This is called a nested Frameset.

 

Example 1: The following code will make 3 horizontal frames.

 

<HTML>

<HEAD><TITLE>FRAMING TAGS</TITLE></HEAD>

<FRAMESET ROWS=="20%,*, 2* ">

<FRAME SRC=="FRAME1.HTM”>

<FRAME SRC=="FRAME2.HTML”'>

<FRAMESET COLS=="50%, 50% ">

<FRAME SRC=="FRAME3.HTM”>

<FRAME SRC=="FRAME4.HTM”>

</FRAMESET>

</HTML>

 

Make the first one 20% of the browse window. The rest divide between frames 2 & 3 but make frame 3 twice as big as Frame 2. Place "FRAME1.html" in first frame "FRAME2 html" in frame 2 and divide the third frame further. The third Frame is divided vertically in two equal halves, using a second <FRAMESET> tag. Place FRAME3.HTML & FRAME4.HTML If in these two vertical frames.





About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.SC (Computer Science), MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to contact us.



What's New and Popular





Search Content







Advance Courses



Basic Courses



Advertise with Us