This week's Standard lab includes the creation of a basic HTML webpage which demonstrates the use of lists, and links. Below are an example and instructions for the standard version of Lab 03.

Lab 03: 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
  • Site Structure (index and lab links)
  • Valid HTML
  • three thumbnails
  • three links
  • Definition List (with dt, dd, dd)
  • title attributes
  • alt attributes
  • ADV separate pages (3 marks)

Instructions

  1. Use a template, and create a new doc titled lab03.html
  2. Find images online to represent three of your favourite things
  3. Save each image to your computer, and note its URL
  4. Create a custom 200x200px thumbnail for each image (you could choose to use only a portion of each image for its thumbnail)
  5. In the HTML, use a dl element to organize your three things:
    • Each thing needs a dt for its title
    • Use one dd, with an a inside it (for the original URL), and an img inside that, for the (local) thumbnail, like this:
      <dd><a href="http://photos.up-wallpaper.com/images/ypqrhi1xv2k.jpg" title="view a larger version of this image"><img alt="pine tree" src="pines.jpg"></a></dd>
    • Use a second dd to briefly describe why you like the thing
  6. Note the use of alt and title attributes!
  7. Add any other HTML you think is necessary
  8. Upload your lab03.html page to the labs folder in your site, along with any necessary images! Create a link on the index.html page to your new page - if you can't remember how, check the instructions from last week
  9. Your finished webpage must be fully valid (use the W3C validator). Remember, it is easier to work incrementally and validate as you go - don't leave it until the end! Make sure that I can view your lab03.html by following the link from your index.html page at your site!

Advanced Lab

To complete the advanced lab, have each of the three links open as a separate HTML page containing the full-size image, instead of simply linking to somewhere else on the web. Put in a "back" link on each page. Your lab will now consist of four HTML pages. This is the starting point for an image gallery of your own. Remember to validate your webpage after you make these additions! 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 03 Standard & Advanced).