DIGI 220 Labs
Lab 03 - Lists & Links
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
- 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
- These are both really relaxing, and you can find them pretty much anywhere.
- Getting out on my bike
- 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
attributesalt
attributes- ADV separate pages (3 marks)
Instructions
- Use a template, and create a new doc titled
lab03.html
- Find images online to represent three of your favourite things
- Save each image to your computer, and note its URL
- Create a custom 200x200px thumbnail for each image (you could choose to use only a portion of each image for its thumbnail)
- In the HTML, use a
dl
element to organize your three things:- Each thing needs a
dt
for its title - Use one
dd
, with ana
inside it (for the original URL), and animg
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
- Each thing needs a
- Note the use of
alt
andtitle
attributes! - Add any other HTML you think is necessary
- Upload your
lab03.html
page to thelabs
folder in your site, along with any necessary images! Create a link on theindex.html
page to your new page - if you can't remember how, check the instructions from last week - 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 yourindex.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).