Maddog's HTML Primer for Real People - Chapter 7

Chapter 7, Exercise

Chapter 7 - Practice Exercise

If you really don't need the practice, you can advance.

Nothing solidifies learning like practice. That's all this exercise is for. Try doing the exercise without help from the lessons, and see how you make out. Then consult the lessons as required to make your page come out correctly. If you really get stuck, go to the example solution. And when you're done, compare your solution to ours. (But don't presume that because you did it differently than our example that it's wrong; rather, compare so as to see different ways of doing the same thing; it can be quite educational). We suggest submitting your page to a validation service, just to catch any errors that aren't obvious at first glance. Two free services that I know of are Doctor HTML and TechWeb's HTML Validation Service

In the following exercises, you'll need seven images:

"acft_b1.gif" (thumbnail, 74 x 50),
"acft_b1.jpg" (B-1 Bomber),
"acft_106.gif" (thumbnail, 74 x 50),
"acft_106.jpg" (F-106 Fighter),
"acft_sun.gif" (thumbnail, 74 x 50),
"acft_sun.jpg" (Fighters' Sunset),
"arrow_l.gif" (left-arrow image).

You can obtain these 7 images by clicking on the image filenames, then saving to the same directory as your exercise's HTML file, or by FTP'ing them from the anonymous site at ftp.io.com (user = "anonymous", password = "your_e-mail_address") in the /usr/u/f/ftp/pub/usr/maddog directory. If you have a browser with built-in FTP, you can just go -here-. Alternatively, some browsers allow you to "right-click" on an image to get a menu for saving the image locally.

If you don't like using images of war planes, or you want the extra practice with your image editor (which ain't a bad idea...), it is perfectly permissable to use your own images in the exercise. Just follow the general outline regarding the use of thumbnails and off-page images.

Here's the practice exercise:

Build a web page called "Cool Airplane Pics" and do the following:

Specify a light background (preferrably "#C0C0C0")
Make a large headline, called "Cool Airplane Pics"
draw a horizontal rule
On the same line, create three clickable image links to off-page images:
     1. B-1 Bomber "acft_b1.jpg"
     1. F-106 Fighter "acft_106.jpg"
     1. Fighters' Sunset "acft_sun.jpg"
[for the thumbnails, use the smaller image of the same filename, except '.gif'.
align the thumbnail image "MIDDLE"
Still on the same line, immediately following each of the three links, insert the simple left-arrow image (not a link) "arrow_l.gif"
Still on the same line, immediately after each of the three arrows, insert a number and three explicit non-blanking spaces (<nbsp;), thus numbering the image links 1, 2, 3.
Start a new paragraph
Using text links, form a clickable link out of the title of each of the three off-page images. Each link should be on a separate line numbered 1, 2, 3, and should point to the off-page ('.jpg') image.
For each of the above numbered text links, add a text caption immediately after the link, in italics. You can make your own caption saying whatever you like.
Specify the WIDTH and HEIGHT for each image (because the 'left-arrow' image is so small, there is no need to specify WIDTH and HEIGHT for that image)
Specify alternate text for each image (you can use the image title)
Don't forget things like the html, head, body, and title tags.
Don't forget to use closing tags where they are required.

If you find the instructions difficult to follow, you can look at an example of the working web page in action, and try to duplicate it's behavior by writing your own HTML file. Have fun with it! Try out different things, to see what works and what doesn't, but try to end up with something that pretty much complies with the HTML guidelines. If you get stuck, check out our example solution.

Overseer: Monty Northrup ...

... leave e-mail ...