Page Banner

Lesson Practice 3-2: Working with Iframes


Task 1: Create an Iframe-content page

  1. Open template.htm in notepad++.
  2. Save this file in your layout folder as iframecontent.htm.
  3. Copy and paste all but the first and last paragraphs of the Lorem Ipsum document.
  4. Resave the file.


Task 2: Create an Iframe page

  1. Open template.htm in notepad++.
  2. Save this file in your layout folder as iframedemo.htm.

  3. Add Content:
    1. In the title element, add the title: Demonstration of an Iframe
    2. Create an h1 element with the same text.
    3. Add a paragraph element containing the first paragraph of text from the Lorem Ipsum document.
    4. Add another paragraph element containing the last paragraph from the Lorem Ipsum document.
    5. Between paragraph elements, add an iframe element.
      • Add your iframecontent.htm file as the source.
      • Set the height of the frame to 400 and the width of the frame to 500.

  4. Save the file and preview your page in the browser. Make any adjustments needed and save the file.


Task 3: Add the iframe file-link to your Index file

  1. Open your index.htm file.
  2. To the Layout section of the page, add a hyperlink to your iframe.htm file, using the same pattern of link text and title attributes as your other links.
  3. Do not add the iframecontent page to the index, but don't forget to publish it.
  4. Save the file and test your new link.

  5. Publish your finished files in your folder of the class Share file.
  6. Open the index file in the new location and test your links.