Welcome to Our Free Tutorial!

HTML FRAMES!

In HTML, Frames present multiple HTML documents with in the same browser window. You can have a left frame and right frame.

Each HTML document is called a frame, and each frame is independent of the others.

HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 35% of the width of the browser window. The second column is set to 65% of the width of the browser window. The document "frame1.htm" is put into the first column, and the document "frame2.htm" is put into the second column:

<frameset cols="35%,65%">
<frame src="frame1.htm" />
<frame src="frame2.htm" />
</frameset>

Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="35%,*").


Important: You cannot use the <body> </body> tags together with the <frameset> </frameset> tags! However.

HTML Frame Tags

TagDescription
<frameset>Defines a set of frames
<frame />Defines a sub window (a frame)
<noframes>Defines a noframe section for browsers that do not handle frames

Two Column Frameset

HTML CODE

<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>

Frame Set:

frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.

Frameset cols="#%, *" - Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself.

Frame src="" - The location of the web page to load into the frame.

Adding Banner or Title Frame

<html>
<head>
</head>
<frameset rows="20%,*">
<frame src="title1.html">
<frameset cols="30%,*">
<frame src="menu1.html">
<frame src="content1.html">
</frameset>
</html>

frameset rows="#%, *"- rows defines the height that each frame. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.

FrameBorder and FrameSpacing

Note: Framespacing and border are the same attribute, but some browsers only support one or the other, so use both, with the same value.

Frameborder="#"-- A zero value shows no "window" border.
border="#"- Modifies the border width, used by Netscape.
framespacing="#"-Modifies the border width, used by Internet Explorer.

HTML CODE:

  <html>
  <head>
  </head>
  <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
  <frame src="title1.html">
  <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
  <frame src="menu1.html">
  <frame src="content1.html">
  </frameset>
  </html>

Frame Name and Frame Target

 <html>
 <head>
 </head>
 <frameset rows="20%,*">
 <frame name="title" src="title1.html">
 <frameset cols="30%,*">
 <frame name="menu" src="menu1.html">
 <name="content" src="content1.html">
 </frameset>
 </html>

REMOVE THE BORDER

You can get rid of the borders if you like. You use frameborder="0". use the frameborder, border, and framespacing attributes.

HTML CODE:-

 
<html>
<head>
<title>Frameset page </title> </head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="/htmltop.html"> <frameset cols = "25%, *"> <frame src ="/html/aone.html" />
<frame src ="aone.html" />
</frameset>
</frameset> </html>