This week's standard lab includes the creation of a basic HTML webpage and a basic CSS external style sheet which, together, demonstrate the use of CSS. Below are an example and instructions for the standard version of Lab 05.

Lab 05 (Lab 03 Redux):
Three of my Favourite Things

The Smell of Baking Pine Needles
pine trees standing in a bed of fallen needles
This smell makes me think I'm in the woods on a warm day, perhaps by the shore of an alpine lake.
Drinking Tea while Listening to Music
pouring tea near headphones, shallow DOF
These are both really relaxing, and you can find them pretty much anywhere.
Getting out on my bike
this guy is totally not me, because I'd be wearing a helmet, and I have a daughter, not a son.
Fresh air, and distance travelled.

Standard Lab

Checklist
  • Well Formatted code
  • HTML Valid
  • External CSS folder
  • External CSS
  • Two CSS rules
  • CSS Valid (2 marks)
  • ADV 7 additional rules
  • ADV Polish (2 marks)

Part 1 - Setting Up the Directory Structure

  1. First, we want to create a folder to house our CSS files. At the root level of both your local and server versions of your website, create a folder titled css

Part 2 - Creating Your Web and CSS Pages

  1. Create a new, plain text file called lab05.css, and put it inside your css folder on your local site image
  2. Use a template to create a new doc titled lab05.html and put it with the rest of your HTML files.
  3. Open your newly created page and put in a heading that identifies it as Lab 05.
  4. Copy all the HTML from the basic portion of Lab 03 into the Lab 05 file, and copy the images (or make relative links) so everything still works.
  5. Use a link element to connect your lab05.html file to your lab05.css file. Remember, you will need to use relative addressing to make sure your lab05.html file can find the lab05.css file. Once the link is working, the styles you create should show up in the lab05.html file in a browser. Note: my setup is a little different than yours, so my links won't look exactly the way yours will.
  6. Open up the lab05.css and add in two simple CSS rules as follows:

    dt { font-weight: bold; font-size: 1.3em; }
    dd { color: #009; font-style: italic; }

  7. Once everything is working on your local copy of the website, upload the two files to your server site. Remember, you need to upload both the lab05.html file (next to the other HTML files) and the lab05.css file (into the CSS folder).
  8. Don't forget to validate both your HTML file and your CSS file. Also, be sure to put a link from your homepage to your lab05.html file so I can find it!

Advanced Lab

To complete the advanced lab, enhance your content so it includes at least seven more unique HTML elements we've seen so far in this course (em, strong, code, etc.), and create CSS rules to style each of them. Do some research on W3Schools to see if you can find some more CSS properties to add to your expanded style sheet. (HINT: Think about setting font properties.) Note: If you do complete the advanced section of this lab, be sure to indicate this in the title you give your lab (i.e. Lab 05 Standard & Advanced).