FRAMES AND IFRAME
HTML - Frames
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 when divided into frames in a similar way the tables are organized: into rows and columns. it's never recommended to use frames in your webpages, this is because smaller devices cannot cope with frames due tothe size.Other times your page will be displayed differently on different computers due to different screen resolution. The browser's back button might not work as the user hopes. There are still few browsers that do not support frame technology.
Set backs of Frames
Frameset
A frameset is a collection of frameset, to create a frame we use the 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. Each frame is indicated by frame tag and it defines which HTML document shall open into the frame.
Note − The <frame> tag deprecated in HTML5. Do not use this element.
<!DOCTYPE html>
<html>
<head >
<title>frame </title>
</head>
<body>
< frameset rows="10%,70%,20%">
<frame name="top" src="#" />
<frame name = "main" src = "#"/>
<frame name = "bottom" src = "#" />>
<noframes>
<body>
<p>our browser does not support frames.</p>
</body>
<noframes>
</frameset>
</html>
Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically.
<!DOCTYPE html>
<html>
<head >
<title>frame </title>
</head>
<body>
< frameset rows="10%,70%,20%">
<frame name="left" src="#" />
<frame name = "center" src = "#" />
<frame name = "right" src = "#" />>
<noframes>
<p>your browser does not support frames.</p>
</body>
<noframes>
</frameset>
</html>
The frameset Tag Attributes
- Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
- A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%".
- Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case wildcard takes remainder of the window.
- As relative widths of the browser window. For example, to create three vertical frames,use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth
- Row This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height of each row in the same way as explained above for columns.
- Border This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value of zero means no border.
- Frameborder This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border.
- Framespacing This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing = "10" means there should be 10 pixels spacing between each frames.
Cols Specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of the four ways:
The frame Tag Attributes
src This attribute is used to give the file name that should be loaded in the frame.Its value can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html directory. name 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. frameborder This attribute specifies whether or not the borders of that frame are shown;it overrides the value given in the frameborder attribute on the frameset tag if one is given, and this can take values either 1 (yes) or 0 (no). marginwidth 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 For example marginwidth = "10".æ marginheight 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. For example marginheight = "10". noresize 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.For example noresize = "noresize". scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars. longdesc This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "framedescription.htm"
Frames and Browser
In the case where an old browser or any browser which does not support frames is been used,then noframes element should be displayed to the user. in this case you must place a body element inside the noframes element because the frameset element is supposed to replace the body element, this is done so that if the browser does not understand frameset element it will understand what is inside the body element which is contained in a noframes element. In here you can tell the userr why they can not view the page, as stated in the example above.
Frame's Name Attributes
The most common use of frame is to place navigation bars in one frame and then load main pages into a separate frame.
<!DOCTYPE html>
<html>
<head >
<title>frame </title>
</head>
<body>
< frameset col="200, *">
<frame src="#" name="menu_page"/>
<frame src = "#" name = "main_page" />
<noframes>
<p>your browser does not support frames.</p>
</body>
</noframes>
</frameset>
</html>
What we have done here is to create two colums to be filled With two frames, the first is 300pixels wide it will serve as a navigation bar, while whats is left of the space will serve to hold the main content.
Target attribute
The targetvattribute can take one of the following values to give a different result.
- The self vaule- this Loads the page into the current frame.
- The blank value- this Loads a page into a new browser window. Opening a new window.
- The parent value- this Loads the page into the parent window, which in the case of a single frameset is the main browser window.
- The top value- This Loads the page into the browser window, replacing any current frames.
- The targetframe value- this Loads the page into a named targetframe.
HTML - Iframes
An iframe is the same as frame but instead it been written to replace a body instead it is written in side body,it can appear anyewhere in the document. The i here stands for inline. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. The src attribute is used to specify the URL of the document that occupies the inline frame.
<!DOCTYPE html>
<html>
<head >
<title>iframe </title>
</head>
<body>
<!--this broser does not support frames-->
<iframe src = "#" width = "500" height="200" />
</iframe>
<p>content content content</p>
</body>
</html>
The Iframe Tag Attributes
- SRC -This attribute is used to give the file name that should be loaded in the frame.
- NAME -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.
- FRAMEBORDER - This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the frameset tag if one is given, and this can take values either 1 MEANING yes or 0 MEANING no
- MARGINWIDTH - 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.
- MARGINHEIGHT - 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.
- SCROLLING - This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.
- LONGDESC - This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "framedescription.html"
- WIDTH - This attribute specifies the width of iframe.
Other attributes are class, id, and title
Note − The frameborder, marginwidth, longdesc, scrolling, marginheight attributes deprecated in HTML5..Do not use these attributes.