Reference for CIS127 and CIS 137 iFrames 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. 2/10/2011 2 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/2011 3 Professor Al Fichera (All Classes, CIS67, 127, and 137) <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. 2/10/2011 4 Professor Al Fichera (All Classes, CIS67, 127, and 137) browsers.jpg <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. 2/10/2011 5 Professor Al Fichera (All Classes, CIS67, 127, and 137) 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 pixels" align="where I want it" name="something" width="?n in pixels"> Place a description 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/2011 6 Professor Al Fichera (All Classes, CIS67, 127, and 137) (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 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> 2/10/2011 9 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/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 10 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" <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. <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. <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/2011 Professor Al Fichera (All Classes, CIS67, 127, and 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 15 As Seen In: Safari 5.0.3 C:\Users\Al\AppData\Local\Temp\SNAGHTMLbbf376.PNG safariSML.jpg 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 16 As Seen In: MSIE 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 15 As Seen In: Safari 5.0.3 C:\Users\Al\AppData\Local\Temp\SNAGHTMLbbf376.PNG safariSML.jpg As Seen In: Firefox 3.6.13 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 14 C:\Users\Al\AppData\Local\Temp\SNAGHTMLb58ebb.PNG fireSML.jpg 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 15 As Seen In: Safari 5.0.3 C:\Users\Al\AppData\Local\Temp\SNAGHTMLbbf376.PNG safariSML.jpg 2/10/2011 Professor Al Fichera (All Classes, CIS67, 127, and 137) 16 As Seen In: MSIE 8.0.76 C:\Users\Al\AppData\Local\Temp\SNAGHTMLb85fa0.PNG msieSML.jpg