Unit-3.15 HTML Basics-HTML5-IFrames

HTML TAGS
(IFrame)
 <iframe>…</iframe>
◦ The iframe in HTML stands for Inline Frame.
◦ An Iframe is defined with <iframe> tag
◦ The “iframe” tag defines a rectangular region within
the document in which the browser can display a
separate document, including scrollbars and
borders.
◦ An HTML inline frame is used to embed another
document within the current HTML document i.e. a
web page within a web page
◦ The <iframe> tag is not related to <frameset> tag,
it can appear anywhere in the document.
◦ The src attribute is used to specify the URL(web
address) of the document that occupies the inline
frame page
◦ An iframe or inline frame is used to display external
objects including other web pages within a web
page.
◦ An iframe acts like a mini web browser within a web
browser.
◦ The content inside an iframe exists entirely
independent from the surrounding elements.
 Syntax:
<iframe src=“URL”>
…..
</iframe>
Attribute Description
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.html" will load an
HTML file available in html directory.
name=“…” This attribute allows 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.
height=“…” To specify the height of the iframe in pixels or in
percentage like 50%, 60% etc. Default height is 150
pixels
width=“…” To specify the width of the iframe in pixelsor in
percentage like 50%, 60% etc. Default width is 300
pixels
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). Now deprecated. “border option of style can be
used to create/remove boreders”
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".
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"
 The layout of the iframe can be specified
using various properties of style like height,
width, background-color, border etc.
 Syntax:
<iframe src=“URL”
style=“height:no;width:no;border:size color;”>
Browser does not support iframe
</iframe>
<html>
<head>
<title> Example of Iframe</title>
</head>
<body>
<h1> <u>Example of Iframe </u></h1>
<iframe src="demo-iframe.html"
style="height:200px;width:600px;border:5x">
</iframe>
<iframe src="student.jpg"
style="height:200px;width:300px;border:none;">
</iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height =
"200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
 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
 The name of the iframe is given by using the
name=“….” attribute of iframe
 Steps to open a link in target frame:
◦ First define a frame using <iframe> tag
◦ Give a name to the iframe using “name” attribute
◦ <iframe name=“i_frame1”>
◦ A link is specified using href
◦ Using target attribute of href the link is opened in
the target frame
◦ <a href=“…” target=“i_frame1”>
◦ The example is in the next slide
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="demo-iframe.html"

name="iframe_a"></iframe>
<p><a href=“takeoff.mp4" target="iframe_a“> Click to see Flight

Take off video</a></p>
<p>When the target of a link matches the name of an iframe, the

link will open in the iframe.</p>
</body>
</html>
 <iframe> can be used for
◦ embedding third-party media
◦ embedding your own media in a document-
agnostic way
◦ embedding code examples
◦ embedding third party “applets” like payment forms
 <iframe> should not be used for
◦ photo gallery
◦ forum etc.
 <iframe> of HTML5 is a better option than
old <frameset> tag and if you need to embed
some independent, already-existing HTML
document into the current document, use
an <iframe>.
 If you are building all of it from scratch
together, there is almost no good reason to
break a page design into several independent
documents, especially if they aren't actually
independent pieces of content.

Unit-3.15 HTML Basics-HTML5-IFrames

Uploaded by

Copyright:

Available Formats

You might also like

Unit-3.15 HTML Basics-HTML5-IFrames

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-3.15 HTML Basics-HTML5-IFrames

Uploaded by

Copyright:

Available Formats

HTML TAGS

<iframe height="300px" width="100%" src="demo-iframe.html"

<p><a href=“takeoff.mp4" target="iframe_a“> Click to see Flight

<p>When the target of a link matches the name of an iframe, the

You might also like