html5-img
1 / 16

USING THE <iframe> TAG

USING THE <iframe> TAG. CIS67 Foundations for Creating Web Pages Professor Al Fichera. iFrames. Reference for CIS127 and CIS 137. Floating Inline Frame. An 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.

deepak
Download Presentation

USING THE <iframe> TAG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. USING THE <iframe> TAG CIS67 Foundations for Creating Web Pages Professor Al Fichera iFrames Reference for CIS127 and CIS 137

  2. Floating Inline Frame • An 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. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  3. 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. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  4. <iframes> Browser Support • Inline frames are supported by the most recent versions of Firefox, Safari, and MSIE • However, the older Netscape 4 Browser did not support inline frames. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  5. <iframes> and Assistive Technology • Inline 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. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  6. The XHTML Code for iframe • The 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. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  7. XHTML Elements in Common Use • The 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)

  8. More Attributes for <iframe> • align="the options are below"left(default),center, or rightSpecifies the horizontal alignment for a floating inline frame (deprecated now, use CSS instead). • frameborder="options are 0or1"Determines whether borders should be displayed around this inline frame. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  9. 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)

  10. 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)

  11. 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)

  12. 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. Professor Al Fichera (All Classes, CIS67, 127, and 137)

  13. As Seen In: Firefox 3.6.13 Professor Al Fichera (All Classes, CIS67, 127, and 137)

  14. As Seen In: Safari 5.0.3 Professor Al Fichera (All Classes, CIS67, 127, and 137)

  15. As Seen In: MSIE 8.0.76 Professor Al Fichera (All Classes, CIS67, 127, and 137)

More Related