<%@LANGUAGE="VBSCRIPT" %><% Response.CacheControl = "no-cache" %>
Exercise #9 (Due End of Period)

Turn in:

  • A folder named your "Lastname, Firstname" containing:
    • indexIframeTransitional.html
    • indexObjectStrict.html
    • content_a.html
    • content_b.html
    • frameset_a.html
    • nestedContent_a.html
    • text_a.html

Details:

An alternate type of frame is called the iframe, however the iframe is deprecated. It essentially floats on the page, loading a separate page inside of it. In this exercise, you will gain practice using an <iframe>. Since the iframe is deprecated, we'll also look at and XHTML 1.0 Strict compliant method using the object tag.

Expand/Collapse Section ImageExercise Specifications

  • Copy "content_a.html", "content_b.html", "frameset_a.html", "nestedContent_a.html", and "text_a.html" from your previous lab and reuse them for this lab.
     
  • iframe - The old way (Transitional DTD)
    • The <iframe> tag is deprecated and thus does not exist / is not supported by strict DTDs, but some applications still use it, like Facebook.
    • Create a XHTML page called "indexIframeTransitional.html".
      • The second line of this one document should use the XHTML Transitional DTD for the <!doctype> tag.
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        • We will use transitional for this one file only.
      • Set the background-color style of the body tag to "#ffffcc" so that you will be able to see the iframe better (use style="...").
      • Create a table with 1 row and 5 columns. (ok to use a table here)
        • border: 0, cellpadding: 2, cellspacing: 2, width: 700
        • Contents of the cells: | Content A | Content B | Frameset | Purdue | College of Technology |
        • Link each of the words or phrases to the appropriate file or web address.
        • Set the target of the anchor tags to "content" so that it targets the iframe through the JavaScript code.
          • The only reason we can use the target attribute here is because this one file is using the transitional DTD
      • Add an <iframe> below the table
        • name: content, width: 700, height: 400, align: left, frameborder: 1, scrolling: auto, src: content_a.html, and set the style background-color to #ffffff
      • Try the page in a browser. Clicking each of the content pages should load that content page into the iframe. Clicking the Frameset link should load the frameset page into the iframe. Clicking Purdue should load the Purdue home page into the iframe. Clicking College of Technology should load the CoT home page into the iframe.
         
  • object - The new way (Strict DTD)
    • Copy the page above and save it as "indexObjectStrict.html"
    • Change the second line of this document to the XHTML Strict DTD for the <!doctype> tag.
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • Leave the table, but remove the target="content" from the anchor tags and replace it with rel="external"
    • Remove the iframe tag
    • Inside a <p> tag, add an object tag with name=content, data=content_a.html, type=text/html, and the following styles
      • border:1px solid #000000;
      • background-color:#ffffff;
      • width:700px;
      • height:400px;
    • Add this JavaScript after the <p> tag but before the </body> tag
      • Note the html comment tags inside the script tags
    • Test the page

Expand/Collapse Section ImageFinalization

Solution Images:

  1. Image showing a page of the solved exercise: Exercise 09
Note: This exercise is to be done by hand/hard-coding. No editors!