HTML Frameset


HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document.

A collection of frames in the browser window is known as a frameset.

The window is divided into frames into rows and columns.


Disadvantages of Frames

There are few drawbacks with using frames.

  • Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.
  • Sometimes your page will be displayed differently on different computers due to different screen resolution.
  • The browser's back button might not work as the user hopes.
  • There are still few browsers that do not support frame technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag.

The <frameset> tag defines how to divide the window into frames.

The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.


<frameset> Tag Attributes

  • rows

    It is used to specify the rows in the frameset.

    • rows="10%, 90%"
  • cols

    You can specify the width of each column in one of four ways.

    1. Absolute values in pixels. ( cols="200, 300,100" ) .
    2. A percentage of the browser window. ( cols="20%, 60%,20%" ) .
    3. Using a wildcard symbol. ( cols=" *, 20%,20%" ) .
    4. As relative widths of the browser window. ( cols="2*, 6*,2*" ) . This is an alternative to percentages.
  • border

    This attribute specifies the width of the border of each frame in pixels. ( border="5" ). A value of zero means no border.

  • frameborder

    This attribute specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). ( frameborder="0" ) specifies no border.

  • framespacing

    This attribute specifies the amount of space between frames in a frameset. This can take any integer value. ( framespacing="10" ) means there should be 10 pixels spacing between each frames.


<Frame> Tag Attributes

  • class

    The “class” attribute assigns a class name (or a list of class names separated by spaces) to the container element. It is used together with style sheets and tells the browser the class (or classes) to which the element is associated.

    A class gives presentational attributes to elements (read more at the Cascading Style Sheets tutorial).

    <p class="paragraph1">Welcome to fastest</p>
  • id

    The “id” attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element in other instances (e.g., from client-side scripts).

    <p id="paragraph1">This is the first paragraph, named "paragraph1". To dynamically change its properties use this identifier.</p>
  • title

    The purpose of this attribute is to provide a title for the element. Its value must be a short and accurate description of the element. Browsers usually render it as a “tool tip” when the user puts the mouse pointer over the element for a short period of time.

    <a title="HTML Frameset" href="www.fastlearning.in">HTML Frameset</a>
  • style

    This attribute is used to define presentational attributes for the containing element, and its value should be composed by style sheets properties. Although in some cases it can become useful, a better practice is to place presentational attributes in external files, relating them to elements with the “class” attribute. This way you keep the semantic and presentational parts of your document separated.

    You can find more information about presentational attributes at the Cascading Style Sheets tutorial.

    <p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style.</p>
    <p>And this is another text without style.</p>
  • name

    This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.ss

    <frame name="menubar"></frame>
  • longdesc

    This attribute allows you to provide a link to another page containing a long description of the contents of the frame.

    <frame  longdesc="frameabout.html"></frame>
  • src

    This attribute points to the document that will be initially loaded in the frame (when the frameset is loaded).

    <frame name=”articles” src=”articles-index.html”> </frame>
  • noresize

    By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame.

    <frame noresize="noresize"></frame>
  • scrolling

    This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto".

    • auto: Scrolling devices are shown only when necessary.
    • yes: Scrolling devices are always shown.
    • no: Scrolling devices aren’t provided.
    <frame scrolling="yes"></frame>
  • frameborder

    Decides if a border (separator) will be drawn for this frame. The value “1″ tells the browser to draw a border for this frame, while the value “0″ not to draw it.

    <frame frameborder="0"></frame>
  • marginwidth

    This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels.

    <frame marginwidth="50"></frame>
  • marginheight

    This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels.

    <frame marginheight="50"></frame>

<noframes> Tag

If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user.

So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understand what is inside the <body> element which is contained in a <noframes> element.

You can put some nice message for your user having old browsers. Sorry!! your browser does not support frames.

Example

<html>    
  <frameset cols="30%,*">  
     <frame src="www.fastlearning.in" name="f2">
     <frame src="New Folder/UntitledFrame-3.html" name="f3">
      <noframes>
         <body>
                Sorry!! your browser does not support frames.
         </body>
      </noframes>
   </frameset>
</html>

<iframe> Tag Attributes

An iframe is used to display a web page within a web page.

Iframe Syntax

he src attribute specifies the URL (web address) of the iframe page.

  <iframe src="URL">
  • Height and Width

    Use the height and width attributes to specify the size.

    The attribute values are specified in pixels by default, but they can also be in percent "80%".

  • Border

    The frameborder attribute specifies to display a border around the iframe.

     <iframe src="http://fastlearning.in/" frameborder="1"></iframe>
  • remove the Border

    The frameborder attribute specifies not to display a border around the iframe.

     <iframe src="http://fastlearning.in/" frameborder="0"></iframe>
  • iframe as a Target for a Link

    An iframe can be used as the target frame for a link.

    The target attribute of the link must refer to the name attribute of the iframe

     <iframe src="demo.html" frameborder="0">
    <a href="http://fastlearning.in/"> fastlearning.in </a>
     </iframe>

Events

  • onload: The onload event is triggered when the user agent finishes loading a window or all frames within a frameset. This event is exclusive of the HTML body element and the HTML framset element.
  • onunload: The onunload event is fired when the user agent removes a document from a window or frame. This event is exclusive of the HTML body element and the HTMLframset element.
  • onclick: The onclick event occurs when the mouse button is clicked over the element.
  • ondblclick: The ondblclick event is executed when the pointing device button is double clicked over the element.
  • onmousedown: The onmousedown is triggered when the mouse button is pressed over the element.
  • onmouseup: The onmouseup event is fired when the pointing device button is released over the element.
  • onmouseover: The onmouseover event occurs when the mouse is moved onto the element.
  • onmousemove: The onmousemove event is executed when the pointing device is moved while it is over the element.
  • onmouseout: The onmouseout event is triggered when the mouse is moved away from the element.
  • onfocus: The onfocus event is fired when an element receives focus either by the pointing device or by tabbing navigation. This attribute is exclusive of those elements that can get the focus.
  • onblur: The onblur event occurs when the element losses focus either by the pointing device or by tabbing navigation. This attribute is exclusive of those elements that can get the focus: HTML a element, HTML area element, HTML label element, HTML input element, HTML select element, HTML textarea element, and HTML button element.
  • onkeypress: The onkeypress event is executed when a key is pressed and released while the element is focused. This attribute is exclusive of those elements that can get the focus: HTML a element, HTML area element, HTML label element, HTML input element, HTML select element,HTML textarea element, and HTML button element.
  • onkeydown: The onkeydown event is triggered when a key is pressed down while the element is focused.
  • onkeyup: The onkeyup event is fired when a key is released while the element is focused.
  • onsubmit: The onsubmit event occurs when the form is submitted. This attribute is exclusive of those elements that can get the focus. This event is exclusive of the HTML form element.
  • onreset: The onreset event is executed when the form is reset. This event is exclusive of the HTML form element.
  • onselect: The onselect event is triggered when a user selects some text in the text field. This event is exclusive of the HTML input element and the HTML textarea element.
  • onchange: The onchange event is fired when a control losses the input focus and its value has been modified since gaining focus. This event is exclusive of the HTML input element, the HTML select element and the HTML textarea element.

HTML Frameset Example

<html>
   <head>
    <title>TAG index</title>
   </head>
    <frameset cols="*,150">
    <frameset rows="100,*,100">
     <frame src="demo_b.html">
	 <frame src="demo_d.html">
     <frame src="demo_c.html">
   </frameset>
     <frame src=""demo_a.html">
   <noframes>
   <body>
     <p>Alternate content</p>
   </body>
   </noframes>
 </frameset>
</html>
Output

Share this article on