CST161: Web Site Design

Project 10:  The Robert Frost Web Page

The Robert Frost Web Page is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

CST161 Project 10

Complete the following:

  1. Using an HTML editor, open the Project10.htm and Project10.css files from the download, enter your name and the project due date in the comment section of each file
  2. Replace the rflogo.gif" img element in the header block with an object block, assign the image file rflogo.gif to the data attribute of the object and set the type, widthheight attributes as well; place a paragraph <p> to replace the alt text "The Robert Frost Web Page" from the img within the object block
  3. Scroll down to the figure element directly after the page header. Within the figure element, create an iframe element linking to the YouTube video The Road Not Taken - Robert Frost and add parameters to the URL to disable the ability of users to display the video in full-screen mode. Set the width and height of the object to 320 pixels by 200 pixels. The easiest way to get the iframe code for the video is directly from YouTube as follows:
    1. Click the 'Share' button below the video
    2. Click the 'Embed' button next to the link
    3. Copy the entire iframe code and paste it into your HTML document
  4. Scroll down to the first poem section. Directly below the Fire and Ice h2 heading, insert an audio element with fireice.mp3 and fireice.ogg as the source files. Display the audio controls.
  5. Within the audio element, nest an object element for the fireice.swf Flash player. Set the width and height to 345 pixels by 21 pixels.
  6. Within the object element, nest an embed element for the fireice.swf file, setting the dimensions again to 345 pixels wide by 21 pixels high.
  7. Go to the next poem section. Directly below the Devotion h2 heading, insert nested audio, object, and embed elements (as you did for Steps 4 through 6) for the devotion.mp3, devotion.ogg and devotion.swf files.
  8. Remove the two poems "Fire and Ice" and "Devotion" along with their paragraph <p> tags from this document, and place and save them as the only code within two new HTML document files, fireice.htm and devotion.htm; then embed the code from the two files back into the same location in this "The Robert Frost Web Page" document using object elements; set the height attribute for the "Fire and Ice" object to 250
  9. Save your changes to the file. Open the Project10.htm file in your web browser and verify that you can play the YouTube video only within the YouTube player, and also that the ability to play the clip in full-screen mode has been disabled. Also verify that you can play the two poetry audio clips in an HTML5-enabled browser.