USING THE TAG
description
Transcript of USING THE TAG
C I S 6 7Fo u n d ati o n s fo r C re ati n g We b Pa ge s
Professor Al Fichera
USING THE <iframe> TAG
Reference for CIS127 and CIS 137
iFrames
Professor Al Fichera (All Classes, CIS67, 127, and 137)
Floating Inline FrameAn inline frame (also called a floating frame), can be
placed on the body of any Web page, similar to the way you would place an image.
An inline frame embeds another Web page within the scrolling area of the frame.
2/10/20112
Professor Al Fichera (All Classes, CIS67, 127, and 137)
The XHTML Tag <iframe>The <iframe> tag configures an inline frame.This is a special scrolling area that displays a different
Web page document on the page.This does not need to be a part of a frameset.It can be placed on the body of any Web page.
2/10/20113
Professor Al Fichera (All Classes, CIS67, 127, and 137)
<iframes> Browser SupportInline frames are supported by the most recent versions
of Firefox, Safari, and MSIEHowever, the older Netscape 4 Browser did not support inline
frames.
2/10/20114
Professor Al Fichera (All Classes, CIS67, 127, and 137)
<iframes> and Assistive TechnologyInline frames are not universally supported by all
Browsers and Assistive Technology such as screen readers, so use them with caution.
How can you be sure that you'll support Assistive Technology on a page using an iframe?
Place a hyperlink to the content that will be displayed in the iframe between the opening and closing <iframe> tags as seen in the next slide.
2/10/20115
Professor Al Fichera (All Classes, CIS67, 127, and 137)
The XHTML Code for iframeThe code for the inline frame looks like this:<iframe src="something.html" title="Something about something" height="?n in pixels" align="where I want it" name="something" width="?n in pixels">Place a description of what the iframe holds here for Browsers that do not support iframes.
<a href="something.html" target="_blank"> Something about something</a></iframe>
The <iframe> element is a container tag, and is always used with its closing </iframe> tag.
Notice how the closing tag wraps it all together.
2/10/20116
XHTML Attribute Values to use in iframes How is it used? align "left" (default) "center", "right" Specifies iframe horizontal
alignmentframeborder "0" or "1" (default) "0" indicates that no frame borders
will be visible for this inline frame."1" indicates that frame borders will display for this inline frame (default).
height Number of pixels or percentage Height of the inline frameid Alphanumeric, no spaces; the value must be unique
and not used for other id values o the same XHTML document
This attribute provides a unique identifier for the inline frame.
longdesc URL of Web page with detailed description of the contents of the inline frame
Provides a detailed description of the frame. This is accessed by assistive technologies.
marginheight Number of pixels Configures the top and bottom margins.
marginwidth Number of pixels Configures the right and left margins
name Text name, beginning with a letter, no spaces Configures the name of the inline frame. This is required when using the target attribute to configure hyperlinks. This attribute is deprecated in XHTML but is used to provide backward compatibility with Browsers that support HTML.
scrolling "yes", "no", "auto" (default) Determines whether scrollbars will appear if the document displayed is larger than the size of the inline frame.
src (in common use)
Valid file name of a Web page document (required) Configures the name of the file to be displayed in the inline frame.
title (in common use)
Text phrase that describes the inline frame recommended by the W3C to improve
Configures the title of the inline frame. This is use by screen readers and is accessible
width (common use)
Number of pixels or percentage Configures the width of the inline frame.
7
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/20118
XHTML Elements in Common UseThe iframe shown here is using the most common
elements in use, however, there are more elements that should be used.
This is letting the Browser take over, not my style!!
<iframe src="something.html" title="A little Something" width="?n" /> </iframe>
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/20119
More Attributes for <iframe>align="the options are below"left (default), center, or right Specifies the horizontal alignment for a floating inline frame (deprecated now, use CSS instead).
frameborder="options are 0 or 1"Determines whether borders should be displayed around this inline frame.
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/201110
More Attributes for <iframe>height="number of pixels or percentage"
Specifies the height of the inline frame object.
id="alphanumeric, no spaces"Provides a unique identifier for the inline frame.
longdesc="place a detailed text description of the iframe here"
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/201111
More Attributes for <iframe>marginheight="number of pixels"
Specifies the top and bottom margins of the inline frame.
marginwidth ="number of pixels" Specifies the left and right margins of the inline frame.
name="Alphanumeric, no spaces, begin with a letter"Configures the name of the inline frame; required when using the target attribute. Deprecated in XHTML but is used to provide backward compatibility for HTML Browsers.
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/201112
More Attributes for <iframe>scrolling="options are" yes | no | auto (default)
Specifies whether scroll bars are visible. Auto is the default and displays scroll bars as needed.
src="URL, the valid file name"Specifies the document or URL of the object to be displayed in the floating inline frame.
Professor Al Fichera (All Classes, CIS67, 127, and 137) 2/10/201113
More Attributes for <iframe>title="text phrase that describes the inline frame"
Sets the title of the inline frame and could be accessed by screen readers plus, is recommended by the W3C to improve accessibility.
width="number of pixels or percentage"Specifies the width of the inline frame.
As Seen In: Firefox 3.6.13
2/10/2011Professor Al Fichera (All Classes, CIS67, 127, and 137)14
2/10/2011Professor Al Fichera (All Classes, CIS67, 127, and 137)
15
As Seen In: Safari 5.0.3
2/10/2011Professor Al Fichera (All Classes, CIS67, 127, and 137)
16
As Seen In: MSIE 8.0.76