Workshop

Now that you know how to add images and color to your pages, you can really get creative. This workshop will help you remember some of the most important points about using images and color on your pages so that they'll be compatible with HTML 3.2 and HTML 4.01 browsers. If you want to design your pages strictly around the HTML 4.01 specification, you'll need to forego many of the presentation options you learned in this lesson in favor of style sheets.

Q&A

Q	What's the difference between a GIF image and a JPEG image? Is there any rule of thumb that defines when you should use one format rather than the other?
A	As a rule, you should use GIF files when images contain 256 colors or fewer. Some good examples are cartoon art, clip art, black-and-white images, and images with many solid color areas. You'll also need to use GIF files if you want your images to contain transparent areas or if you want to create an animation that doesn't require a special plug-in or browser helper. Remember to use your imageediting software to reduce the number of colors in the image palettes whenever possible, because this also reduces the size of the file. JPEG images are best for photographic-quality or high-resolution 3D rendered graphics because they can display true-color images to great effect. Most imageediting programs enable you to specify how much to compress a JPEG image. The size of the file decreases the more an image is compressed; however, compression can also deteriorate the quality and appearance of the image if you go overboard. You have to find just the right balance between quality and file size, and that can differ from image to image.
Q	My client-side imagemaps aren't working. What's wrong?
A	Make sure that the pathnames or URLs in your <area> tags point to real files. Also, make sure the map name in the <map> file matches the name of the map in the usemap attribute in the <img> tag. Only the latter should have a pound sign in front of it.
Q	How can I create thumbnails of my images so that I can link them to larger external images?
A	You'll have to do that with some type of image-editing program (such as Adobe Photoshop or Paint Shop Pro); the Web won't do it for you. Just open up the image and scale it down to the right size.
Q	What about images that are partially transparent so that they are able to display the page background? They look like they sort of float on the page. How do I create those?
A	This is another task you can accomplish with an image-editing program. These types of images are known as transparent GIFs, and you can only achieve this effect with a GIF image. Most image-editing programs provide the capability to create these types of images.
Q	Can I put HTML tags in the string for the alt attribute?
A	That would be nice, wouldn't it? Unfortunately, you can't. All you can do is put an ordinary string in there. Keep it simple, and you should be fine.

Quiz

1.	What's the most important attribute of the <img> tag? What does it do?
2.	If you see a funny-looking icon rather than an image when you view your page, the image isn't loading. What are some of the reasons this could happen?
3.	Why is it important to use the alt attribute to display a text alternative to an image? When is it most important to do so?
4.	What is an imagemap?
5.	Why is it a good idea to also provide text versions of links that you create on an imagemap?
6.	True or false: You can use a relative URL when you specify a URL destination in an imagemap file.

Quiz Answers

1.	The most important attribute of the <img> tag is the src attribute. It indicates the filename or URL of the image you want to include on your page.
2.	There are several things that cause an image not to load. The URL may be incorrect; the filename might not be correct (they're case sensitive); it might have the wrong file extension; it might be the wrong type of file.
3.	It's a good idea to provide text alternatives with images because some people use text-only browsers or have their graphics turned off. It's especially important to provide text alternatives for images used as links.
4.	An imagemap is a special image in which different areas point to different locations on the Web.
5.	It's a good idea to include text versions of imagemap links in case there are users who visit your page with text-only browsers or with images turned off. This way, they can still follow the links on the web page and visit other areas of your website.
6.	False. URLs in a map file must be absolute pathnames from the top of the web root. The URLs cannot be relative from the map file.

Exercises

1.	Create or find some images that you can use as navigation icons or buttons on one or more pages of your website. Remember that it's always advantageous to use images more than once. Create a simple navigation bar that you can use on the top or bottom of each page.
2.	Create or find some images that you can use to enhance the appearance of your web pages. Images such as small banners (for page titles), bullets, horizontal rules, and background images are always handy to keep around. After you find some that you like, try to create background, text, and link colors that are compatible with them.
3.	Create and test a simple client-side imagemap that links to pages that reside in different subdirectories in a website or to other sites on the World Wide Web.
4.	Create and test a client-side imagemap for your own home page, or for the entry page in one of the main sections of your website. Remember to include alternatives for those who are using text-only browsers or browsers designed for the disabled.