HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames into rows and columns.
There are few drawbacks with using frames.
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.
It is used to specify the rows in the frameset.
You can specify the width of each column in one of four ways.
This attribute specifies the width of the border of each frame in pixels. ( border="5" ). A value of zero means no border.
This attribute specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). ( frameborder="0" ) specifies no border.
This attribute specifies the amount of space between frames in a frameset. This can take any integer value. ( framespacing="10" ) means there should be 10 pixels spacing between each frames.
The “class” attribute assigns a class name (or a list of class names separated by spaces) to the container element. It is used together with style sheets and tells the browser the class (or classes) to which the element is associated.
A class gives presentational attributes to elements (read more at the Cascading Style Sheets tutorial).
<p class="paragraph1">Welcome to fastest</p>
The “id” attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element in other instances (e.g., from client-side scripts).
<p id="paragraph1">This is the first paragraph, named "paragraph1". To dynamically change its properties use this identifier.</p>
The purpose of this attribute is to provide a title for the element. Its value must be a short and accurate description of the element. Browsers usually render it as a “tool tip” when the user puts the mouse pointer over the element for a short period of time.
<a title="HTML Frameset" href="www.fastlearning.in">HTML Frameset</a>
This attribute is used to define presentational attributes for the containing element, and its value should be composed by style sheets properties. Although in some cases it can become useful, a better practice is to place presentational attributes in external files, relating them to elements with the “class” attribute. This way you keep the semantic and presentational parts of your document separated.
You can find more information about presentational attributes at the Cascading Style Sheets tutorial.
<p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style.</p> <p>And this is another text without style.</p>
This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.ss
This attribute allows you to provide a link to another page containing a long description of the contents of the frame.
This attribute points to the document that will be initially loaded in the frame (when the frameset is loaded).
<frame name=”articles” src=”articles-index.html”> </frame>
By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame.
This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto".
Decides if a border (separator) will be drawn for this frame. The value “1″ tells the browser to draw a border for this frame, while the value “0″ not to draw it.
This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels.
This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels.
If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user.So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understand what is inside the <body> element which is contained in a <noframes> element.
You can put some nice message for your user having old browsers. Sorry!! your browser does not support frames.
<html> <frameset cols="30%,*"> <frame src="www.fastlearning.in" name="f2"> <frame src="New Folder/UntitledFrame-3.html" name="f3"> <noframes> <body> Sorry!! your browser does not support frames. </body> </noframes> </frameset> </html>
An iframe is used to display a web page within a web page.Iframe Syntax
he src attribute specifies the URL (web address) of the iframe page.
Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent "80%".
The frameborder attribute specifies to display a border around the iframe.
<iframe src="http://fastlearning.in/" frameborder="1"></iframe>
The frameborder attribute specifies not to display a border around the iframe.
<iframe src="http://fastlearning.in/" frameborder="0"></iframe>
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe
<iframe src="demo.html" frameborder="0"> <a href="http://fastlearning.in/"> fastlearning.in </a> </iframe>
<html> <head> <title>TAG index</title> </head> <frameset cols="*,150"> <frameset rows="100,*,100"> <frame src="demo_b.html"> <frame src="demo_d.html"> <frame src="demo_c.html"> </frameset> <frame src=""demo_a.html"> <noframes> <body> <p>Alternate content</p> </body> </noframes> </frameset> </html>