leoma
Uploaded by
10 SLIDES
231 VUES
100LIKES

Web Foundations

DESCRIPTION

This lecture explores the fundamental concepts of inline frames (IFrames) and their practical applications in web development. Learn how to effectively use IFrames for embedding content, handling browsers that do not support them, and implementing name/ID anchors for linking. The session includes various demos illustrating how to construct IFrames with links, manage scrolling behaviors, and utilize attributes like src, width, height, and sandbox. Empower your web pages with dynamic content using IFrames!

1 / 10

Télécharger la présentation

Web Foundations

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. Web Foundations Wednesday, November 6, 2013 LECTURE 25: INLINE FRAMES (IFRAMES), Name/ID Anchors, IFRames with Links and Name/ID Anchors

  2. iframe W3Schools: iframe iframe.html page.html

  3. iframe W3Schools: iframe iframe.html page.html

  4. iframe W3Schools: iframe iframe.html page.html

  5. iframe • Demo Walk-Through • page.html • iframe_empty.html • iframe.html • page1.html • book_TOCpage1.gif • book_TOCpage2.gif • book_TOCpage3.gif • iframe1.html <iframesrc="URL"></iframe> <iframesrc="page.html" width="600" height="800"></iframe> To deal with browsers that do not support <iframe>, add a text between the opening <iframe> tag and the closing </iframe> tag. Example: <iframesrc="page.html">Your browser does not support the iframe tag. How very lame! Don't be a trogladyte! Upgrade to Chrome now!</iframe> W3Schools: iframe

  6. iframe • Demo Walk-Through • page.html • iframe.html • page1.html • book_TOCpage1.gif • book_TOCpage2.gif • book_TOCpage3.gif • iframe1.html <iframesrc="URL"></iframe> <iframesrc="page.html" width="600" height="800"></iframe> To deal with browsers that do not support <iframe>, add a text between the opening <iframe> tag and the closing </iframe> tag. Example: <iframesrc="page.html">Your browser does not support the iframe tag. How very lame! Don't be a trogladyte! Upgrade to Chrome now!</iframe> W3Schools: iframe

  7. Iframe Attributes • src– Specifies the address of the document to embed in the <iframe> • name– Specifies the name of an <iframe> • width– Specifies the width of an <iframe> in pixels • height– Specifies the height of an <iframe> in pixels • srcdoc– Specifies the HTML content of the page to show in the <iframe> • sandbox– Enables a set of extra restrictions for the content in the <iframe> (" " | allow-forms | allow-same-origin | allow-scripts | allow-top-navigation ) • seamless– Specifies that the <iframe> should look like it is a part of the containing document • scrolling– Technically deprecated in HTML5, although it is still supported by all the browsers (yes | no | auto) W3Schools: iframe

  8. Name/ID Anchors • Demo Walk-Through • name0.html • name1.html • name2.html • name3.html It used to be this: <a name="bookmark1"> In HTML5 it has become this: <a id="bookmark1">

  9. iframe with Links to iframe • Demo Walk-Through • page.html • page0.html • iframe0.html <iframesrc="page.htm" name="iframe_a"></iframe> <p><a href="page0.html" target="iframe_a">Page0</a></p>

  10. iframe Using Name/ID Anchors with Links and Scroll, and Links Only • Demo Walk-Through • iframe2.html • iframe3.html • iframe4.html • iframe5.html Difficult JavaScript Solution Easy HTML Solution <iframesrc="page1.html" name="theframe"></iframe> <a href="page1.html#toc1" target="theframe">TOC 1</a> <a href="page1.html#toc2" target="theframe">TOC 2</a> <a href="page1.html#toc3" target="theframe">TOC 3</a>

More Related