Frames were first introduced by Netscape in 1995 with it's Navigator 2.0 release. After a lot of debate over whether the frames should be included in HTML as a container tag or not, the World Wide Web Consortium has decided to include frames in HTML 4.0 standards.
Frames allow you to divide the browser window into smaller segments and display different pages in each.Frames can be designed to interact with each other; action in one can affect the contents in the other.
Frames can be a boon to the author or a pain. They offer a lot of flexibility in designing a page and also deliver volumes of contents to the user.
But many authors and users are not in favour of frames because of the face that they require a lot of time,resources and not many browsers support frames.
| Creating frames | Communication between frames | Providing contents in frames | Inline frames |
Let us consider for one minute the drawback of frames.Frames are useful, but they
are relatively new concept to the web.Some browsers such as Mosiac,Lynx and older version ofNavigator and Internet explorerdon't support frames. So it is advised not to use frames extensively on your web site, else user with incompatible browsers may find it difficult accessing your site.But at the same time don't shell frames altogether. Use them when required.
Now let us start creating frames.
Adding Frameset is simple,it is done by including <Frameset> container tag after the head in bounds of the body of the document.
For the browsers that support frames,the frameset contents is parsed and interpreted accoundingly.And for the browsers that don't support frames the result is a blank page.
The Syntax of frameset is given below.
<Frameset [rows=rowWidth] [cols=colWidth] [loadEvents]>
...Frame or Frameset definations...
</Frameset>
Here, rowWidth and colWidths are comma-delimited (should end with a <strong>,</strong>).If not included ,each value to one row and one column in spite of any number of frames that are included in the definition.The <Frameset> tag also accepts the onload and onunload JavaScript events to detect when all the frames have been load and when the user is leaving the set of frames,respectively.
The relation of <Frame> to <Frameset> is similar to the relation of anchor link item to the list container,except that frames also define visible space on the browser. Each frameset needs to include a <Frame> definition for each element.
The syntax of <Frame> tag is :
<Frame [name=] [Src=] [behavior] [Appearance] >
Here,name is a user-specified name for the particular frame, and Src is the initial URL(Uniform Resource Locator) to display within the frame.
There are two attributes that define the fundamental behavior of frame: Scrolling and noresize.These two attributes set whether the frames provides the ablity to scroll for the user and whether the user can adjust the frame size.
- Scrolling--- This attribute controls the use of scrollbar on the frame.There are three choices yes, no or auto
- noresize--- The use of this attribute is to prevent the user from ajusting the size of the frame.
Frame Appearence
There are two attributes that control the appearance of the frame.
- frameborder:This attribute controls whether the frame is surounded by a border or not.To include a border, use frameborder=1; Otherwise, use frameborder=0.
- marginwidth: This attribute sets the amount of space, specified in pixels, between the left and right edges of the frame and the frame contents. The value set with this attribute must be an integer of 1 or greater.
| Creating frames | Communication between frames | Providing contents in frames | Inline frames |
The primary method of allowing one frame to communicate with another is through the use of target attribute.This attribute is available for tags that affect hyperlinks (such as <A> and <LINK>), image maps (<AREA>), forms (<Form>), and the HEAD element (<Base>).
Let us try to understand the target attriutes how to work between frames. Here a look at simple HTML file called Frames1.HTM.
Example1:
<html>
<head>
<Title Frames Example>
</head>
<frameset rows="50%,50%>
<frame name="ref" src="cities">
<name="cities" src="c1.htm">
</body>
</html>
The above code (Example1) refers to two other pages. Their codes are given below (Example 2,3,4 & 5)
Example 2
<html>
<head>
<Title Frames Example>
</head>
<h1>This is Your city reference</h1>
<a href="c1.htm">Go to New York page </a>
<a href="c2.htm">Go to New Dehli page </a>
<a href="c3.htm">Go to Tokyo page </a>
</body>
</html>
Example 3
<html>
<head>
<Title Frames Example>
</head>
<h1>Weclome to New York<h1>
</body>
</html>
Example 4
<html>
<head>
<Title Frames Example>
</head>
<h1>Weclome to New Dehli<h1>
</body>
</html>
Example 5
<html>
<head>
<Title Frames Example>
</head>
<h1>Weclome to Tokyo<h1>
</body> </html>
Try this and get the better results
There are some special tag names that can be used which are identified by their underscore characters (_).The four special target names are:
- blank: This target name loads the content into new window.it does the same as using an undefined target name.
- self:This loads content into same window as the link
- parent:Target loads the content into parent frameset, thereby essentially doing away frames.
- top:This target provides a way to break out frames.
| Creating frames | Communication between frames | Providing contents in frames | Inline frames |
Now that we have learnt to define frameset and frames,let's now take into account those users whose browsers do not support frames. So,what exactly happens when user with a browser that dosen't support frames views a framed page?
Remember that frameset replaces the body of the document.Users will see nothing when the page is loaded. To avoid this, you can add content for non-frame-compatiable browsers with the <noframes> tag placed after the last <frame> tag.
You can insert any valid HTML inside a set of <noframes>, including an alternative home page or link to another starting point.
Take a look at the below example.
<html>
<head>
<Titel Noframe Example>
</head>
<frameset cols="25%,75%">
<frame name="toc" src="home-toc.htm">
<noframes>
Thanks for stopping at our website. to view this site without frames, check out our <a href="home.htm"> no-frame home page </a>
<noframes>
<frameset>
</body> </html>
An inline frame is treated the same way as an inline image or object; it takes up block of space on the page for inserting specified content.Inline frames are useful place to put things like indexes or sidebars that contribute to current document but aren't crucial.
The syntax is as follows.
<frame [name=framename][src=URL][frameborder=][marginwidth=]
[marginheight=][scrolling=yes or no]>
<iframe>
Top of this page
Home Overview W3C HTML4.0 Introduction Structure Interactivity
Table Forms Appearance Scripting CSS XML Advanced Technique