cis67 foundations for creating web pages professor al fichera reference for cis127 and cis 137

C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e 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


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


<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


<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


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 alignment

frameborder "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 frame

id 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>


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.


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"


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.


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.


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

cis67 foundations for creating web pages professor al fichera reference for cis127 and cis 137

Documents