Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
Web Technology
(NCS-504)
Prepared By
Mr. Abhishek Kesharwani
Assistant Professor,UCER Naini,Allahabad
HTML Frames
Frames divide a browser window into several
pieces or panes, each pane containing a
separate HTML document.
One of the key advantages that frames offer is
that you can then load and reload single
panes without having to reload the entire
contents of the browser window.
A collection of frames in the browser window is
known as a frameset.
• The window is divided up into frames in a similar
pattern to the way tables are organized: into rows
and columns.
• The simplest of framesets might just divide the
screen into two rows, while a complex frameset
could use several rows and columns.
• To create a frameset document, first you need
the <frameset> element, which is used instead of
the <body> element.
• The frameset defines the rows and columns your
page is divided into, which in turn specify where
each individual frame will go. Each frame is then
represented by a <frame> element.
Example
<html>
<head>
<title>Frames example</title> </head> <frameset
rows="10%,80%,10%">
<frame src="/html/top_frame.htm" />
<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />
<noframes>
<body> Your browser does not support
frames. </body>
</noframes>
</frameset>
</html>
<frameset> Element Attributes:
• 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 four ways:
• 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%".
• rows: attribute works just like the cols attribute
and can take the same values, but it is used to
specify the rows in the frameset.
• border: attribute specifies the width of the
border of each frame in pixels.
• frameborder: specifies whether a three-
dimensional border should be displayed between
frames. This attrubute takes value either 1 (yes)
or 0 (no). For example frameborder="0" specifies
no border.
• framespacing: specifies the amount of space
between frames in a frameset. This can take any
integer value.
<frame> Element Attributes:
• src: indicates the file that should be used in the
frame. Its value can be any URL.
• name: attribute allows you to give a name to a
frame. It is used to indicate which frame a
document should be loaded into..
• frameborder: attribute specifies whether or not
the borders of that frame are shown. This can
take values either 1 (yes) or 0 (no).
• marginwidth: 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: 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: 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.
The <noframes> Element
• 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.
• In XHTML 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 the <frameset> element it should
understand what is inside the <body> element
contained in the <noframes> element.
Frame's name and target attributes
• One of the most popular uses of frames is to
place navigation bars in one frame and then
load the pages with the content into a
separate frame.
• <frame> element can carry the name attribute
to give each frame a name.This name is used
in the links to indicate which frame the new
page should load into.
<a href=http://www.google.com
target="main_page">Google</a>
Inline Frames - The <iframe> Element:
• You can define an inline frame with the <iframe>
tag.
• The <iframe> tag is not used within a <frameset>
tag. Instead, it appears anywhere in your
document.
• The <iframe> tag defines a rectangular region
within the document in which the browser
displays a separate document, including
scrollbars and borders.
• Use the src attribute with <iframe> to specify the
URL of the document that occupies the inline
frame.
Example
<html>
<head></head>
<body>
<iframe src=“URL" width="75" height="200"
align="right">
</iframe>
</body>
</html>
<iframe src="demo_iframe.htm”
name="iframe_a">
</iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

More Related Content

uptu web technology unit 2 html

  • 1. Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad
  • 2. HTML Frames Frames divide a browser window into several pieces or panes, each pane containing a separate HTML document. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset.
  • 3. • The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. • The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. • To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. • The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. Each frame is then represented by a <frame> element.
  • 4. Example <html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%"> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
  • 5. <frameset> Element Attributes: • 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 four ways: • 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%".
  • 6. • rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. • border: attribute specifies the width of the border of each frame in pixels. • frameborder: specifies whether a three- dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border. • framespacing: specifies the amount of space between frames in a frameset. This can take any integer value.
  • 7. <frame> Element Attributes: • src: indicates the file that should be used in the frame. Its value can be any URL. • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into.. • frameborder: attribute specifies whether or not the borders of that frame are shown. This can take values either 1 (yes) or 0 (no). • marginwidth: 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".
  • 8. • marginheight: 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: 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.
  • 9. The <noframes> Element • 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. • In XHTML 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 the <frameset> element it should understand what is inside the <body> element contained in the <noframes> element.
  • 10. Frame's name and target attributes • One of the most popular uses of frames is to place navigation bars in one frame and then load the pages with the content into a separate frame. • <frame> element can carry the name attribute to give each frame a name.This name is used in the links to indicate which frame the new page should load into. <a href=http://www.google.com target="main_page">Google</a>
  • 11. Inline Frames - The <iframe> Element: • You can define an inline frame with the <iframe> tag. • The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document. • The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders. • Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame.
  • 12. Example <html> <head></head> <body> <iframe src=“URL" width="75" height="200" align="right"> </iframe> </body> </html>