This hour shows you how to use the <IMG> tag to place graphics images on your Web pages. You learn to include a short text message to appear in place of the image as it loads, and whenever someone moves their mouse pointer over the image. You also learn to control the horizontal and vertical alignment of each image, and how to make text wrap around the left or right side of an image. Finally, you learn how to make images into "buttons" that link to other pages using the same <A> tag introduced in Hour 3: Linking to Other Web Pages. And you get a sneak preview of the kind of custom page backgrounds you'll learn to use in Hour 10: Custom Backgrounds and Colors.
(View HTML tags covered in Hour 9.)
ZOLZOL's Used Planet Sales(Figures 9.1 - 9.7)
This multi-page site makes extensive use of the <IMG> tag to place the graphics images developed in Hour 8 onto Web pages. Note the use of ALT to provide descriptive text to display when an image is loading, or when the mouse pointer moves over an image. Also note that the ALIGN attribute discussed in Hour 5 has a different set of options when used in <IMG> tags.
Save these graphics to your computer's hard drive by clicking on each image with the right mouse button (or holding down the mouse button if you use a Macintosh computer), then selecting Save Image As from the pop-up menu. Put them in whichever folder you use for creating Web pages, and use them to practice putting images on your pages.
In case you need a simpler page to look at before you're ready to tackle the ZOLZOL's example above, here's a more basic Web page with three images on it.
An even simpler example, demonstrating how to make an image into a clickable "button" that links to another page. And, speaking of simplicity, you can balance the U.S. Federal budget by clicking the button, too.
See how the size of the largest image on a line effects the vertical alignment of all the other images.
"Normally, Web browsers draw a colored rectangle around the edge of each image link. Like text links, the rectangle will usually appear blue to people who haven't visited the link recently, and purple to people who have visited it. Since you will seldom if ever want this unsightly line around your beautiful buttons, you should always include BORDER=0 in any <IMG> tag within a link. (You'll learn more about the BORDER attribute in Hour 12: Page Design and Layout.)"
Sample Images
The Olivers and Their House
Slash the Budget!
Image Alignment Magick Tricks