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.
We’ll be covering the following topics in this tutorial:
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: <FRAMESETCOLS="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: <FRAMESRC="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"> </p> <ul> <li> <p><fontcolor="#990033">computer products</font></li> <li> <p><fontcolor="#990033"> products</font></li> <li> <p><fontcolor="#990033">hardware</font></li> <li> <p><fontcolor="#990033">kitchenware</font></li> </ul> <p> </p> </body> FRAME2.HTML </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>
Elastic Frames
The height/width of frames can be specified in terms of number of pixels. For example the Frameset definition:
<framesetrows="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.
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.
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.
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular