Post
Ask Question

Working With Frames in HTML

Introduction

 
This article shows how to create FRAMESET documents that define one or more frame sizes and properties for FRAMESETs and frame elements.
 
Getting Started
 
Frames allow multiple HTML documents to be present as independent windows within the main browser. They allow you to present two or more documents at once.
 
Example
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>FRAME EXAMPLE</TITLE>  
  4. </HEAD>  
  5. <frameset cols="25%,*,25%">  
  6.   <frame src="FRAME1.html">  
  7.   <frame src="FRAME2.html">  
  8.   <frame src="FRAME3.html">  
  9. </frameset>  
  10. </HTML>  

Frames Document

 
A-Frame document can be declared using the <FRAMESET> element. A regular HTML Frameset document has a start element and an end element. This element can contain one or more elements. The SRC attribute of the frameset element points to the document that you want to display in a frame. The ROWS AND COLS attributes of frameset elements define the layout of the frame.
  1. <HTML>  
  2.     <HEAD>  
  3.         <TITLE>FRAM EXAMPLE</TITLE>  
  4.     </HEAD>  
  5.     <FRAMESET cols="20%, 80%">  
  6.         <FRAMESET rows="100, 200">  
  7.             <FRAME src="contents_of_frame1.html">  
  8.             <FRAME src="contents_of_frame2.gif">  
  9.         </FRAMESET>  
  10.     </FRAMESET>  
  11. </HTML>  
Type of Frame
 
There are two types of frames based on their layout.
 
Vertical Frames
 
For vertical frames, the COLS attribute is used within the frameset elements. The COLS attribute contains the width of the column. Each column's width is a value separated by commas.
 
Example
  1. <HTML>  
  2.        <HEAD>  
  3.            <TITLE>FRAME EXAMPLE</TITLE>  
  4.        </HEAD>  
  5.              <FRAMESET cols="25%, 75%,25%">  
  6.                  <FRAME src="contents_of_frame1.html">  
  7.                  <FRAME src="contents_of_frame2.gif">  
  8.              </FRAMESET>  
  9. </HTML>  
In the preceding example, there are three columns in the frameset, the first and third columns occupy 25 percent and 75 percent of screen space respectively. Since there are four parts of the request, the first and third columns occupy one-quarter of the windows and the second takes half of the window.
 
 
Horizontal Frames
 
The ROWS attribute creates horizontal frames in HTML, such as the COLS attribute. It also takes a value for the height of the row.
 
Example
  1. <HTML>  
  2.     <HEAD>  
  3.         <TITLE>A simple frameset document</TITLE>  
  4.     </HEAD>  
  5.           <FRAMESET rows="100, 200">  
  6.                <FRAME src="contents_of_frame1.html">  
  7.                <FRAME src="contents_of_frame2.gif">  
  8.           </FRAMESET>  
  9. </HTML>  
 
Grid of Frames
 
The ROWS and COLUMNS attribute creates a grid in frames. The FRAMEBORDER attribute is for setting the border width of the grid and the BORDERCOLOR attribute sets the color of the grid. The value 0 of FRAMEBOARDER removes the border from the frame.
  1. <HTML>    
  2.       <HEAD>    
  3.          <TITLE>FRAME EXAMPLE</TITLE>    
  4.      </HEAD>    
  5.             <frameset cols="25%,*,25%">    
  6.                  <frame src="FRAME1.html" border="yellow" frameborder="1">    
  7.                  <frame src="FRAME1.html" border="Red" frameborder="0">    
  8.                  <frame src="FRAME2.html">    
  9.                  <frame src="FRAME3.html">    
  10.              </frameset>    
  11. </HTML>   
The margin of a frame can also be set using MARGINHEIGHT and MARGINWIDTH. The MARGINHEIGHT attribute for setting the margin of the top and bottom and MARGINWIDTH for the left and right.
 
Resize able FRAME and Scroll Bar in frame
 
Normally the size attribute creates a resizeable grid. Sometimes you will want to set the frame size too big or small by dragging the frame border. The SCROLLING attribute allows the frame scroll bar to be visible and hidden. The yes value of the scrolling attribute sets the scroll visibility on and No hides the scroll. The value Auto sets the scroll to visible and it is hidden based on the contents.
 
Example
  1. <HTML>   
  2.        <HEAD>
  3.            <TITLE>FRAME EXAMPLE</TITLE>    
  4.        </HEAD>    
  5.                  <frameset cols="25%,*,25%">    
  6.                           <frame src="FRAME1.html" border="yellow" frameborder="1" scrolling="yes">   
  7.                          <frame src="FRAME2.html" scrolling="NO">    
  8.                          <frame src="FRAME3.html" scrolling="auto">    
  9.                  </frameset>    
  10. </HTML>    

Summary

 
I hope that this article helps you to learn, explaining how to create a frame and specify various properties for the FRAMESET element.


Similar Articles