FRAMES


Frames

Introduction

Basically, frames are used to be broken webpage into different sections i.e browser window divided into parts.Frames divide the browser window into several independent sections, each displaying a separate document. By using framesyou can change the content of one portion of the page while leaving the content of another the same.

FRAMES

Frames can divide the screen into separate windows.

Each separate window is called frames. You can use number of frames in the web page

<frameset>tag

<FRAMESET>……</FRAMESET> Tags are used within your Frameset web page to denote how big each of the two sections will be. It is paired tag. The frameset is used to group a collection of windows together, sometimes horizontally (using the rows attribute), sometimes vertically (using the cols attribute), or even a combination of horizontal and vertical arrangements. Each child window inside the frameset is defined by the frame element.

Syntax:

<html>

<head>…….</head>

<frameset>

……….

</frameset>

</html>

 

ATTRIBUTES:

cols

This attribute is specify the number and size of horizontal spaces in a frameset.

Syntax:

<frameset cols=”30,50,20”>………….</frameset>

rows

This attribute is specify the number and size of vertical spaces in a frameset.

 

<frameset rows=”30,50,20”>………….</frameset>

 

The size of the frames is mentioned in any one of the following units:

1 In pixels: it represents the number of pixels in each frame.

<FRAMESET COLS=”100,20,20”>

……………………

………………………..

</FRAMESET>

With this frameset tag three column-wise frame are generated having first frame of 100 pixels width, both second and third of 20 pixels width each.

2 in percentage:it divides the window according to the specified percentage.

<FRAMESET COLS=”80%,20%”>

……………………

………………………..

</FRAMESET>

With this frameset tag two column-wise frame are generated having first frame of 80 % of the screen and second of 20% of the screen.

3 In fractions: it also represents in fractions too. The *(asterisk) is used .

<FRAMESET COLS=”7*,*”>

……………………

………………………..

</FRAMESET>

This defines two column-wise frames.the first frame have 7 unit size and second have 3 unit size. So the frame sizes are 7/10 and 3/10 of the whole screen.

 

<frame>tag

<frame> is an HTML element which defines a particular area in which another HTML document can be displayed. A frame should be used within a <frameset>.

 

Using the <frame> element is not encouraged because of certain disadvantages such as performance problems and lack of accessibility for users with screen readers. Instead of the <frame> element, <iframe> may be preferred.

 

Attributes of frame tag as follows:

1 src
This is the only required attribute for the frame tag. The value of this attribute is the URL of the document you would like to be displayed in the frame.

2  name

This attribute is used to labeling frames. Without labeling all links will open in the frame that they are in.

3 noresize
When you set the size of your frames, your readers can come in and change that size to suit them, unless you use the noresize attribute. This allows you to keep control of the layout of your page.

4 scrolling

This attribute defines existence of scrollbar. If this attribute is not used, browser put a scrollbar when necessary. There are two choices; “yes” for showing a scrollbar even when it is not necessary and “no” for do not showing a scrollbar even when it is necessary.

5 marginheight
This attribute defines how tall the margin between frames will be. It cannot be less than 1 pixel. Also, if the browser cannot display the desired values, then this attribute will be ignored.

6 marginwidth

This attribute defines how wide the margin between frames will be.

 

7 frameborder

This attribute allows you to put borders for frames.

 

Lets take example for more clear

Source code

<html >

<head>

<title>HTML Frames – Example 1</title>

<frameset rows=”60,*,50″>

<frame src=”top_frame.html” name=”topFrame”>

<frame src=”content_frame.html” name=”contentFrame”>

<frame src=”bottom_frame.html” name=”linksFrame”>

</frameset>

</head>

<body>

</body>

</html>

Source: top_frame.html

Hi I am in top

Source: content_frame.html

I am in content

Source: bottom_frame.html

I am in bottom

In browser:

 

Above window will divide into three rows as you can see .

 

You can divide window into number of sections according to your requirement.

Example:

Source code:

<html >

<head>

<title>HTML Frames – Example 1</title>

<frameset cols=”60%,40%”>

<frame src=”top_frame.html” name=”topFrame”>

 

<frameset rows=”60%,40%>

<frame src=”content_frame.html” name=”contentFrame”>

<frame src=”bottom_frame.html” name=”linksFrame”>

</frameset>

</frameset>

</head>

 

</html>

In browser

NOTE: if your page is not exists then error will be displayed “ file not found “.

In the above example, top_frame.html,content_frame.html and bottom_frame.html not exist.

 

Creating complex frames:

Example1

<html>

<frameset cols=”50%,50%”>

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

<frame src=”page1.htm”>

<frame src=”page2.htm”>

</frameset>

<frame src=”page3.htm”>

</frameset>

</html>

Page1 Page3
Page2

 

 

Example 2

<html>

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

<frameset cols=”50%,50%”>

<frame src=”page1.htm”>

<frame src=”page2.htm”>

</frameset>

<frame src=”page3.htm”>

</frameset>

</html>

 

 

Page1 Page2
Page3

 

 

Example 3

<html>

<frameset

cols=”33%,17%,17%,17%,17%”>

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

<frame src=”page1.htm”>

<frame src=”page2.htm”>

</frameset>

</frameset>

</html>

Page1
Page2

As you can see, the “rows” part is nested within the “cols” part, since the rows are a “subpart” of the columns declaration.

 

Example 4

<html>

<frameset

cols=”33%,17%,17%,17%,17%”>

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

<frame src=”page1.htm”>

<frame src=”page2.htm”>

</frameset>

<frame src=”page3.htm”>

<frame src=”page4.htm”>

</frameset>

</html>

Page1 Page3 Page4
Page2

 

Example 5

<html>

<frameset

cols=”33%,17%,17%,17%,17%”>

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

<frame src=”page1.htm”>

<frame src=”page2.htm”>

</frameset>

<frame src=”page3.htm”>

<frame src=”page4.htm”>

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

<frame src=”5.htm”>

<frame src=”6.htm”>

</frameset>

<frame src=”7.htm”>

</frameset>

</html>

Page1 Page3 Page4 Page5 Page7
Page2 Page6

 

 

Advantages of Frames

  1. They allow parts of the screen to remain static while other parts scroll. This can be useful for navigation menus or logos that you don’t want to scroll off the screen.
  2. They can be handy when you want the user to be able to view a number of images chosen from a long list.
  3. You can introduce material from different servers on the same page, simply by assigning the appropriate URL’s.

Disadvantages of Frames

  1. Navigating through a framed site can be challenging for many users, as the forward and back buttons do not work as expected.
  2. Frames present problems for search engine indexing.