CMPT 165 Lab 3

This lab is designed to get you working more with XHTML, and to get you started with CSS.

  1. Save this empty XHTML page as a starting point for your work on this lab. Open it in a text editor. You will need some content for the file. Have a look at the following short set of text - we will create a web page containing this text:

    Content for the page

  2. As usual, start by filling in the <title> and add an <h1> that both contain the same title. (Make up a reasonable title for such a page.)

  3. Now, fill in the rest of the content, as seen in the figure above. As always, you don't have to worry about the appearance in the XHTML - just pick tags that correspond to the type of content.

    For example, the first words on the page are (part of) a paragraph, so they should go in a <p>. You should have a look through the XHTML reference as you're doing this.

    In particular, look at the reference pages for <ol> (and the <li>s that it contains), and <em>, for the emphasized word in the last sentence.

  4. Open the XHTML page in your browser. It won't look like the figure above, but someone reading it should get the same information. That's all we're concerned about in the XHTML.

  5. Save this sample CSS file in the same directory as the XHTML file you have been working on. Add this inside the <head> of your XHTML file, so it uses the stylesheet:

    <link rel="stylesheet" href="lab3-style.css" type="text/css" />

  6. Reload the page in your browser. It should now look much more like the figure above.

  7. Modify the stylesheet so that the <h1> has...

    • a black background (colour code #000)
    • light blue text colour, to match the background colour (colour code #aaf).

    Have a look at the CSS reference as you complete this part.

  8. Upload both the .html and .css files to your space on the course web server. Check to make sure that the page works on the server and still looks the same. The URL will be something like:

    http://cmpt165.csil.sfu.ca/~userid/lab3.html

    If you would like to organize your work into directories inside your public_html directory, feel free. Just make sure you send a working URL.

When you are done the above create a text file named handin.txt using your favourite text editor. Write your name, student number, SFU e-mail ID, and the URL of your created web-page in this file. Use the Submission Server to submit this text file.