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.
- Site Structure (index and lab links)
- Valid HTML
- three thumbnails
- three links
- Definition List (with dt, dd, dd)
- ADV separate pages (3 marks)
- Use a template, and create a new doc titled
- Find images online to represent three of your favourite things
- Save each image to your computer, and note its URL
- Create a custom 200x200 thumbnail for each image (you could choose to use only a portion of each image for its thumbnail)
- In the HTML, use a
dlelement to organize your three things:
- Each thing needs a
dtfor its title
- Use one
dd, with an
ainside it (for the original URL), and an
imginside 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
ddto briefly describe why you like the thing
- Each thing needs a
- Note the use of
- Add any other HTML you think is necessary
- Upload your
lab03.htmlpage to the
labsfolder in your site, along with any necessary images! Create a link on the
index.htmlpage 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.htmlby following the link from your
index.htmlpage at your site!
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).