Putting Images on a Web Page
In Chapters 1 through 8, you learned to create Web pages containing text. However, you'd be hard-pressed to find many Web pages these days that don't also include graphics images. This chapter shows you how easy it is to put graphics on your pages with HTML.
Chapter 10, "Creating Web Page Images,"
will help you come up with some good graphics of your own, and Chapter 11, "Making
Pages Display Quickly," will show you how to make your graphical pages appear
onscreen as fast as possible. I also save the technical details you need to know about
computer graphics files for Chapter 10.
If you have some image files already saved in the GIF or JPEG format (the filenames will end in .gif or .jpg), use those. Otherwise, you can just grab some graphics that I've put on the Internet for you to practice with. Here's how:
The familiar Web search engines and directories such as Yahoo! (http://www.yahoo.com/), Excite (http://www.excite.com), and InfoSeek (http://www.infoseek.com/) can become a gold mine of graphics images, just by leading you to sites related to your own theme. They can also help you discover the oodles of sites specifically dedicated to providing free and cheap access to reusable media collections.
To put an image on a Web page, first move the image file into the same directory folder as the HTML text file. Then insert the following HTML tag at the point in the text where you want the image to appear (using the name of your image file instead of myimage.gif):
Figure 9.1, for example, inserts the image named house.jpg between the first and second paragraphs of text. Whenever a Web browser displays the HTML file in Figure 9.1, it will automatically retrieve and display the image file shown in Figure 9.2.
Figure 9.1. Use the IMG tag to place an image on a Web page.
Figure 9.2. When a Web browser displays the HTML
page in Figure 9.1, it adds the image named house.jpg.
Just as with the <A HREF> tag (covered in Chapter 3, "Linking to Other Web Pages"), you can specify any complete Internet address as the <IMG SRC>. Or you can specify just the filename if an image will be located in the same directory folder as the HTML file. You may also use relative addresses such as photos/birdy.jpg or ../smiley.gif.
The <IMG> tag in Figure 9.1 includes a short text message: ALT="Our Humble Abode". The ALT stands for alternate text because this message will appear in place of the image in older Web browsers that don't display graphics.
The message you put in the ALT attribute will be seen by some people who are using the latest Web browser software, too. Many people--especially those with slow modems--turn off the Auto Load Images option in Netscape Navigator, so they can see the text on Web pages without wasting time downloading images they don't care about. When automatic image loading is off, the ALT message appears instead of an image. Clicking on that message causes the image to be downloaded and displayed, and clicking on the image download button (fifth from the left on the toolbar) causes all images on the page to appear. Figure 9.3 shows the same page as Figure 9.2, with Auto Load Images turned off.
Figure 9.3. Anyone who turns off Auto Load Images in
Netscape Navigator will see the ALT message instead of the image.
Both Netscape Navigator and Microsoft Internet Explorer also display the ALT message before retrieving and displaying an image, even when automatic graphics loading is turned on. If the image file is large, or there are a lot of images on the same page, the ALT message may be on the screen quite a while before it is replaced by the image.
You should generally include a suitable ALT attribute in every <IMG> tag on your Web pages, keeping in mind the variety of situations where people might see that message. A very brief description of the image is usually best, but Web page authors sometimes put short advertising messages or subtle humor in their ALT messages. For small or unimportant images, it's fine to omit the ALT message altogether.
As discussed in Chapter 5, "Text Formatting and Alignment," you can use <DIV ALIGN="center">, <DIV ALIGN="right">, and <DIV ALIGN="left"> to align part of page to the center, right margin, or left margin. Both text and images are affected these tags.
For example, the first <IMG> tag in
Figure 9.4 occurs between a <DIV ALIGN="center"> tag and the
closing </DIV> tag. You can see in Figure 9.5 that this causes the image
(as well as the text above it) to be centered on the page.
Figure 9.5. While <DIV ALIGN> only
affects the placement of text and images, <IMG ALIGN> also causes text to
flow around images.
<IMG ALIGN="left"> aligns the image to the left and causes text to wrap around the right side of it. And as you'd expect, <IMG ALIGN="right"> aligns the image to the right and causes text to wrap around the left side of it.
You can't use <IMG ALIGN="center"> because text won't wrap around a centered image. You must use <DIV ALIGN="center"> if you want an image to be centered on the page, as I did with the top image in Figures 9.4 and 9.5.
Sometimes, you may want to insert a small image right in the middle of a line of text. Or you might like to put a single line of text next to an image as a caption. In either case, it would be handy to have some control over how the text and images line up vertically. Should the bottom of the image line up with the bottom of the letters? Or should the text and images all be arranged so their middles line up? You can choose between these and several other options:
All these options are shown in Figure 9.6, and you can see how they affect two different lines of images and text in Figure 9.7. Notice that the large hat image in the top line radically affects where the small stars with ALIGN="top" and ALIGN="absbottom" are placed. The second line doesn't have a big image in it, so the effect of ALIGN="top" and ALIGN="absbottom" are much less dramatic.
Figure 9.6. You can control vertical alignment of images with the ALIGN attribute.
Figure 9.7. The top, middle, and bottom of each line
depend on the size of the text and images on that line.
If you have time for a little more experimentation, try combining multiple images of various sizes (such as the star and the magic hats) with various vertical alignment settings for <IMG ALIGN>.
With the same <A HREF> tag used to make text links, you can make any image into a clickable link to another page. Figures 9.8 and 9.9 show a sample page. Clicking on the big button (or the words "To Balance the U.S. Federal Budget") retrieves the page located at http://garnet.berkeley.edu:3333/budget/budget-1.asp on the Internet.
Figure 9.8. Any images (and/or text) between <A HREF> and </A> tags become clickable links.
Figure 9.9. The words "Click Here" are
part of the button.gif image referred to by the <IMG SRC> tag in
Chapter 13, "Backgrounds and Color Control," explains how to change the link colors, and Chapter 14, "Page Design and Layout," explains how to eliminate or change the size of the rectangle drawn around image links.
All the same rules and possibilities discussed in Chapter 3 and Chapter 8, "Intra-Page and E-mail Links," apply to image links exactly as they do for text links. (You can link to another part of the same page with <A HREF="#name"> and <A NAME="name">, for example.)
In the next chapter, you'll find out how to build (or borrow) your own great graphics like these.
This chapter has shown you how to use the <IMG> tag to place graphics images on your Web pages. You learned to include a short text message to appear in place of the image as it loads, and for people who choose not to download graphics automatically. You also learned 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 learned how to make images into "buttons" that link to other pages using the same <A> tag introduced in Chapter 3.
Table 9.1 summarizes the attributes of the <IMG>
tag covered in this chapter.