Frames in HTML


Today most of the websites contain frames.In frame we can see navigation bars at the top in one frame and contents on the other frame.Frames can contain table of contents,sites,indexes and list of the links.

Frames are the most powerful concept of HTML.It divide the browser’s window into multiple rectangular regions.Each region certain a different HTML page so that each of the them work independently.There region is called a frame.It provide a ability to display multiple webpages in a single browser window.Each frame provide a scroll bar or other controls to manipulate the size frame.

A set of frame in the entire browser window is known as a frameset.A frameset does not contain any contents.It tells the browser how to divide the browser window into frames and about the webpages that each has to load.

Frames are used in some situations such as:-

(1.)When a webpage contains a lot of information that cannot be split into separate pages.

(2.)When the part of the page is fixed while other parts of the page keep on changing.

(3.)When someone wants a company LOGO to remain in the browser window,even when an external link is clicked.

(4.)In photographic websites in which thumgnails are in one frame while corresponding pictures are in second frame.

Creating a frameset document

A browser screen could not be split into separate (unique) section. But in HTML, The splitting of a browser screen into frame is accomplished with the  opening tag<Frameset> and closing tag</Frameset> tag embedded into the HTML document .Each unique region is called Frame. A Frame can be defined as a sub region of a browser window which can be scrolled independently and can contain different document having unique URLS. A web page can be divided into many frames, which in turn, can be nested within other frames. The number of frames that can be used simultansuly is limited by the fixed screen size. Each individual frame is reported from the other by a border. A web pages that is made up of frame is called frameset .The frame set tag require one of the following two attribute:

(1.)Rows Attribute :-The rows attribute is used to specify how may horizontal frames are contained in the frameset along with the height of each frame.The number of values specified tells the  number of horizontal frame.Each value specified must be separated by a comma.For this use  wildcard character(*).

(2.)Cols Attribute :- The cols attributes is used to specify how many vertical frames are contained in a frameset along with the width of each frame are contain in the frame along with height of each frames.The number of values specified tells the number of vertical frames.Each value specified must be separated by a comma.You can also can also use wildcard character(*). When specified,it makes the frame occupy the remaining vertical space.

 Frame Element

When we define the <frame> element by using rows or cols and try to display it in the browser window.We will get the page without any contants.A <frameset> tag using rows and cols attribute is not sufficient,you must also specify which HTML document should be displayed in each frame.For this <frame> tag is used.The <frame> tag is used specify the contants of the different frames in a webpage.It has a attribute src. Once the frame is divided into rows and columns, each unique section defined can be loaded with different HTML documents. This can be achieved by using <frame> tag .Which include src attribute.

Src: indicate the URL of the document to be loaded into the frame.

The following HTML divides the screen page into two horizontal frame with the top frame having 40% and down frame having 60% of the screen .

Example(for cols):-

<FRAMESET cols= “50%, 50 %”>

<Frame src=”pp.html”>

<Frame src=”pp.html”>

</FRAMESET>

output:

 

 

 

 

 

 

 

 

 

 

 

 

Example(for rows):

<HTML>

<Head>

<Title>Frameset</Title></Head>

<Frameset rows=”50%,*”>

<frame src=”tt.html”>

<frame src=”tt.html”>

</Frameset></HTML>

Output:

 

 

 

 

 

 

 

 

 

 

Additional<frameset>element attributes

(1.)Border :-The border is used to specify the thickness of border of each frame.The border value can take in pixels.for e.g

<frameset rows=”50%,50%” border=”10”>

(2.)Framespacing :-The framespacing attribute is used to specify the amount of space between frames in pixels.Its default value is 2.It will set the space between in 5 pixels. for e.g

<frameset rows=”50%,50%”  framespacing=”10”>

(3.)Frameborder :- The frameborder attribute is used specify the display border between frame.The default value of frameborder attribute is 1. for e.g

Frame Attributes

The <frame> element can contain many attributes.

(1.)Frameborder :-The frameborder attribute is used to turn the border on or off for the individual frame.By default the border is on.You can turn off the border by setting this attribute to value 0 or no. for e.g

<frame src=”pp.html”  frameborder=”10”>

(2.)Marginwidth :-The marginwidth attibute is used to specify the amount of space that frame’s contents will have from its left and right border. The values is specified in pixels. . for e.g

<frame src=”pp.html”  marginwidth=”10”>

(3.)Marginheight : The marginheight is used to specify the amount of  space that frame’s contents will  have from its top and bottom border. The value is specified in pixels. for e.g

<frame src=”pp.html”  marginheight=”10”>

(4.)Name :-  The name attribute is used to give name to the frame.It is used when links created in one frame wants to load pages in another frame. for e.g

<frame src=”pp.html”  name=”bb”>

(5.)Noresize :- The noresize attribute is used to prevent the user from resizing the frames. This attribute is specified without any value.By default this attribute is disabled.

(6.)Scrolling :- The scrolling attribute is used to control the appearance of scroll bar in the frame.The values that can be assigned to this attribute are no, yes,auto.

(7.)Longdesc :– The longdisc attribute is used to provide link to another page containing description of the frame’s contents.

 <BASE> ELEMENT

You saw that when you click on any of the link in the  left frame, the corresponding contents are displayed in the right frame.The target attribute is set for each <A> pointing to the same frame which is a very time consuming process.This problem can be removed using <BASE> element.The <BASE> element is used to set the default target frame is any page that contain links whose contents are displayed in another frame.It is always specified in the <HEAD> element.You can specify the default target frame in the target attribute of <BASE> element.

Nested Frame

A frameset within a frameset is called nested framesets. A Single frameset file contains multiple nested frameset. Most web pages use nested frameset .There are different frameset in different rows and columns requires nested frameset.

 Example of Nested Frame

<Frameset rows = “30%, 30 %,*”>

< Frameset cols =”30 %,*”>

<Frame src= “fr1.html”>

<Frame src= “fr1.html”>

</ Frameset >

< Frameset cols =”70 %,*”>

<Frame src = “fr1.html”>

<Frame src = “fr1.html”>

</ Frameset >

<Frameset cols = “50%, 50 %”>

<Frame src = “fr1.html”>

<Frame src = “fr1.html”>

</ Frameset >

</ Frameset >

Output:

Comments are closed.