Frame in HTML9 min read

Introduction

One can divide the web page screen into a number of different windows at the same time by using the concept called Frames which looks like a rectangle box. Thus a frame allows us to divide the window screen into say sections called frames. These frames which are independent of other frames may perform some different tasks. The window screen can be divided either horizontally or vertically. One can create frame in HTML using tag <FRAMESET> instead of tag <BODY>.

Features of Frame in HTML

  1. Its ability to display related information independent of other frames.
  2. Every frame has a unique name that can be referred to by web pages
  3. One can create Web Contents as a menu in one of the frames, display corresponding information in another frame.
  4. One can also nest the frame i.e. frame within a frame

Creating Frames

When one would like to divide the screen into frames then one should not use a <BODY> tag which is reserved for using the entire window screen. Thus in order to divide the window into frames, one should use tag <FRAMESET>..</FRAMESET>. The basic structure of HTML to create a frame is given below

<HTML> 

 <HEAD> <TITLE> Title of the document </TITLE> </HEAD> 
 
 <FRAMESET> 
   
   <FRAME> Actual document 
     
 </FRAMESET> 
 
</HTML>

One can not use both <BODY> and <FRAMESET> tag together. If both are included then the browser ignores the frame structure.

The <FRAMESET> tag

The <FRAMESET>..</FRAMESET> tags are the pair tags for all other tags that are used to create frames. Thus splitting a browser screen into a frame is accomplished with help of the following attributes used in <FRAMESET>..</FRAMESET> creates a “table of documents” in which each frame in the table holds a separate document. In its simplest use, <FRAMESET> states how many columns and/or rows will be in the “table”.

A frame is defined only as single rows and columns are ignored by some browsers and display only a blank screen. While executing one must execute or load the main HTML file containing frameset which in turn automatically loads the existing .html file specified in the main file from the folder.

1) ROWS

This attribute is useful to specify the number of horizontal frames to be shown within a web page. It measures the height of frame rows relative to one another Available browser screen area. The value of a row can be specified by means of the following methods,

  1. Percentage: It is one of the easiest ways to specify row height of each frame, Ex. <FRAMESET ROWS=”30%, 20%, 50%”>. It divides the browser screen into 3 horizontal sections having sizes of frames 30%, 20%, and 50% for the first, second and last frame respectively. Web browser scales the percentage to equal a total of 100%.
  2. Pixels: One can also specify the height of each frame using pixels but it is not usually recommended due to some variance in user video. Ex. <FRAMESET ROWS=”200, 150, 300″>
  3. Relative Scale: It is also referred to as relative ratios. Here the symbol * is used to specify the remaining space rather than counting the remaining area. Ex. <FRAMESET ROWS=”34%, 27%, *”> Here browser screen into 3 horizontal section having size of frames 34%, 27% and rest of screen area ( 100 – (34+27)) for the first, second, and last frame respectively.

2) COLS

This attribute is useful to specify the number of vertical frames to be shown within a web page. It measures the width of frame rows relative to one another. Available browser screen area The value of columns can be specified by means of the following methods, each frame,

  1. Percentage: It is one of the easiest ways to specify column width Ex. <FRAMESET COLS=”30%, 20%, 50%”> It divides the browser screen into 3 vertical section having size of frames 30%, 20% and 50% for the first, second and last frame respectively. Web browser scales the percentage to equal a total of 100%.
  2. Pixels: One can also specify the width of each frame using pixels but it is not usually recommended due to some variance in user video. Ex. <FRAMESET COLS=”200, 150, 300″>
  3. Relative Scale: It is also referred to as relative ratios. Here the symbol * is used to specify the remaining space rather than counting the remaining area. Ex. <FRAMESET ROWS=”34%, 27%, *”> Here browser screen into 3 horizontal section having size of frames 34%, 27% and rest of screen area (100 – (34+27)) for the first, second and last frame respectively. –

The <FRAME> tag

Once the screen is divided into vertical and/or horizontal frames via tag <FRAMESET> then each frame must load with a different HTML document and this is performed using one of the mandatory attribute SRC of <FRAME> tag which is a singular tag. <FRAME> tag must be inserted within the <FRAMESET>..</FRAMESET>. Thus remember frame does not have any text of its own rather it displays the contents of the existing file in the frame area.

One must include a single <FRAME> tag within each rectangular frame box i.e. number of <FRAME> tags must be equal to the number of rectangular frame boxes that appears on the web page.

Syntax : <FRAME Attributel = “Value” Attribute2 = “Value” Attribute of FRAME are

1) SRC: It specifies the URL document to be loaded in the frame. If this attribute is not specified for a frame then the area that the frame covers appear as blank.

Syntax <FRAME SRC= “URL”>

Example :

  • <FRAME SRC = “web1.html” Consider the example of <FRAME> tag shown below, <FRAMESET ROWS=”30%, 20%, 50%”>
  • <FRAME SRC=”web1.html”>
  • <FRAME SRC=”web2.html”>
  • <FRAME SRC=”web3.html”> </FRAMESET>

In the above example, we are creating 3 frames, each frame is loaded with existing HTML files web1.html, web2.html, and web3.html in respective frames.

2) MARGINHEIGHT: It specifies the vertical margin of the frame i.e. distance of text from the top border of a frame.

  • <FRAMESET ROWS=”30%, 20%, 50%”>
  • <FRAME SRC=”web1.html” MARGINHEIGHT=50>
  • <FRAME SRC=”web2.html” MARGINHEIGHT=20>
  • <FRAME SRC=”web3.html” MARGINHEIGHT=30> </FRAMESET>

3) MARGINWIDTH: It specifies the horizontal margin of the frame i.e. distance from the left border of a frame.

  • <FRAMESET ROWS=”30%, 20%, 50%”>
  • <FRAME SRC=”web1.html” MARGINWIDTH=50>
  • <FRAME SRC=”web2.html” MARGINWIDTH=20>
  • <FRAME SRC=”web3.html” MARGINWIDTH=30> </FRAMESET>

4) SCROLLING: It helps to control the appearance of vertical and horizontal scrollbars in a frame. It takes one of the following values,

  • YES: Scrollbar must be visible.
    NO: Scrollbar should not be visible
  • AUTO: Depending size of the text scrollbar may visible or invisible. If the entire text is not visible within the area then the browser automatically provides a scrollbar. This is a default setting.

5) NORESIZE: One can resize the frame by dragging the border. NORESIZE attributes specify one can not drag its border.

  • <FRAME SRC=”web1.html” NORESIZE>

6) BORDER: Specifies in pixels the gap between frames in the frameset. A value of 0 (zero) indicates no gap.

7) FRAMEBORDER: Specifies if the frameset has borders around the individual frames. A value may be default value 1 or it may be 0.

8) NAME: The user can assign a unique name to each frame. The name of the frame must start with an alphanumeric character. These features are especially useful during linking to display the contents of a web page in a specific frame.

  • <FRAME NAME = “Frame Name”>

Demonstration of dividing screen into horizontal frames

<HTML>
  
  <FRAMESET ROWS="33%,33%,33%" BORDER="15" FRAMEBORDER="YES"> 
    
    <FRAME SRC="WEB1.html">
    <FRAME SRC="WEB2.html">
    <FRAME SRC="WEB3.html"> 
    
  <FRAMESET>
    
</HTML>

Demonstration of Dividing Screen Into Vertical Frames

<HTML>

 <FRAMESET COLS = "33%,33%,33%" BORDER="15" FRAMEBORDER="YES"> 

  <FRAME SRC="WEB1.html"> 
  <fRAME SRC="WEB2.html"> 
  <FRAME SRC="WEB3.html">

 </FRAMESET>
 
</HTML>

NESTED FRAMESET

One can nest the frameset. Where first of all one divides the screen either vertically or horizontally. Now if the screen is divided first into vertical frames then one can create horizontal frames within one or more vertical frames. Here child frame appears within the space used by the parent frame.

The “Menu-On-The-Left” Frameset

This is a pretty common frameset, where the page is split into two columns. The narrow left-hand column contains graphic or text links to pages that appear in the right-hand column.

<HTML>

 <FRAMESET COLS="140,*>
 <FRAME NAME = "MENU " SRC ="MENU.HTML">
 <FRAME NAME = "MAIN " SRC="WELCOME.HTML"> 
 
 <FRAMESET> 

</HTML>

TARGET Attributes in Linking

Usually, when the link is loaded it is loaded in place of current windows, TARGET attribute specifies the link to be loaded in a targeted window.

Syntax) <A HREF = “URL” TARGET= “Window_Name”> Text </A>

<NOFRAME> tag

Some browser does not support the concept of frames and for such browser, we can create an alternative text using the pair <NOFRAME>..</NOFRAME> tag. One can specify <BODY>.</BODY> tag within <NOFRAME> tag to display messages such as unavailability of frame concept by the browser.

Demonstrate of NOFRAME if browser does not support FRAME

<HTML>

  <FRAMESET COLS="33%,33%,33%" BORDER="15" FRAMEBORDER="YES"> <FRAME SRC="WEB1.html">
  <FRAME SRC="WEB2.html">
  <FRAME SRC="WEB3.html"> </FRAMESET> 
  
  <NOFRAME>
 
  <BODY>
  
  <B> CURRENT BROWSWER DOES NOT SUPPORT FRAME CONCEPT </B> 
  
  </BODY> 
 
 </NOFRAME> 
 
</HTML>

Share:

Leave a Reply