CMPT 165 Lab 4

This lab is designed to get you to work more with CSS, and to get you to try a validator.

  1. First, we suggest that you do not use Internet Explorer for this or subsequent work in this course: it mangles HTML files it downloads. Use Firefox or Safari instead.

    Make a copy of your XHTML from lab 2. For this part, you will create a new stylesheet for this page. Change the XHTML file so it uses a stylesheet.

    Create a CSS file (lab4-style.css) and make these changes to the appearance of the page:

    • Set the background colour of the <body> to light yellow (colour code #ff7), and the text colour to black (colour code #000).
    • Give the <body> a margin of two times the font size (2em).
    • Set the font of the <h1> to a sans-serif font.
    • Give the <h1> a thin black border. You need to set the border's colour, line style, and thickness.
    • Change the background colour of the <h1> to a lighter shade of yellow (colour code #ffa).

    You will probably want to look at the CSS reference as you do this.

  2. Download this invalid XHTML file and the image from the page. [Again, use anything other than Internet Explorer.] Add the XHTML 1.0 doctype to the start of this file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Run it through an XHTML validator and have a look at the error messages. Fix the errors in the markup. (When working with the validator, look at only the first error or two; fix them and try again.)

    Once the page validates with no errors, you're done.

When you're done, upload the files from this lab to the course web server. Create a text file named handin.txt using your favourite text editor. Write your name, student number, SFU e-mail ID, and the URLs of your created web-pages in this file. Use the Submission server to submit your text file.