This site applies only to CMPT 165 D1 (Burnaby) in Spring 2010. See the CMPT 165 sections page for other sections.

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

  1. Save this empty XHTML page (either right-click the link and select “Save Link As” or follow the link and select File → Save Page As) as a starting point for your work on this lab. (Again, don't use Internet Explorer for this.) Open it in a text editor. You will need some content for the file. Have a look at the following short set of instructions—we will create a web page containing these instructions.

    sample content for page
    Figure 1: 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 (or where the line breaks are): 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> and the word “really” in the last sentence is being emphasised, so it should be in an <em> tag. 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).

  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="lab2-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> (and only the <h1>) has a black background and a light blue text colour to match the background colour, like this:

    background-color: #000;
    color: #aaf;

  8. On the course web server, create a directory lab2 in your public_html directory.

    Upload both the .html and .css files to the lab2 directory you just created. When you put your files into a directory like this, the directory name becomes part of the URL, with the components separated by a slash (/).

    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/lab2/lab2.html

    Remember that URLs are case sensitive. So, whether you named the directory lab2 or Lab2 (and your file lab2.html or Lab2.html) matters.

    We suggest you organize your files this way throughout the course: create a new directory for each lab exercise and assignment.

Make sure the TA has marked you off the grade list before leaving.