1 / 10

Web Foundations

Web Foundations. Wednesday, November 6, 2013 LECTURE 25 : INLINE FRAMES (IFRAMES), Name/ID Anchors, IFRames with Links and Name/ID Anchors. iframe. W3Schools: iframe. iframe.html. page.html. iframe. W3Schools: iframe. iframe.html. page.html. iframe. W3Schools: iframe.

leoma
Download Presentation

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