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.
To Do: You should get two or three images ready now so you can try putting them on
your own pages as you follow along with this chapter.
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:
Just A Minute: If you aren't using Netscape Navigator or Microsoft Internet Explorer for Windows 95, you may need to call up each of the images individually at the following addresses, and select File | Save As... to save each one:
http://www.mcp.com/sams/books/235-8/sample/hat.gif
http://www.mcp.com/sams/books/235-8/sample/magic.gif
http://www.mcp.com/sams/books/235-8/sample/magic2.gif
http://www.mcp.com/sams/books/235-8/sample/star.gif
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):
<IMG SRC="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.
If you guessed that IMG stands for "image," you're right. SRC
stands for "source," which is a reference to the location of the image
file. (As discussed back in Chapter 1, "Welcome to HTML," a Web page image
is always stored in a separate file from the text, even though it will appear to
be part of the same "page.")
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.
Just A Minute: Theoretically, you can include an image from any Internet Web page within your own pages. For example, you could include the hat image from my "Sample Images" page by putting the following on your Web page:
<IMG SRC="http://www.mcp.com/sams/books/235-8/sample/hat.gif">
The image would be retrieved from my server computer whenever your page was displayed. However, even though you could do this, you shouldn't do it! Not only is it bad manners (it costs most people money whenever you pull something from their server computer), it can also make your pages display more slowly. If someone gives you permission to use an image from one of their pages, always transfer a copy of that image to your computer, and use a local file reference such as <IMG SRC="hat.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.
Microsoft Internet Explorer also allows people to turn off graphics (by deselecting
View | Options... | General | Show Pictures) so that users have to click on the ALT
message to see the actual image. Internet Explorer 3.0 also displays the ALT
message whenever someone holds the mouse over a graphic image without clicking.
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.4. Use the ALIGN attribute
with the DIV and IMG tags to control horizontal image alignment.
Figure
9.5. While <DIV ALIGN>
only affects the placement of text and images, <IMG ALIGN> also causes
text to flow around images.
You can also make text wrap around images, as it does around the two cartoon images
at the bottom of Figure 9.5. You do this by including an ALIGN attribute
within the <IMG> tag itself, as shown in the second and third <IMG>
tags in Figure 9.4.
<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.
Just A Minute: Note that ALIGN means something different in an <IMG> tag than it does in a <DIV> tag. <IMG ALIGN="right"> will align an image to the right and cause any text that follows to wrap around the image. <DIV ALIGN="right">, on the other hand, just controls the alignment and never causes text to wrap around images.
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.
Time Saver: If you don't include any ALIGN attributes in an <IMG> tag, the image will line up with the bottom of any text next to it. That means you never actually have to type in ALIGN="bottom" because it does the same thing.In fact, you probably won't use any of the vertical alignment settings much. The vast majority of Web page images use either ALIGN="left", ALIGN="right", or no ALIGN attribute at all. So don't worry about memorizing all the options listed above--you can always refer to this book if you ever do need them!
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.
To Do: Try adding some images to your Web pages now, and experiment with all the
different values of ALIGN. To get you started, here's a quick review of
how to add the magic hat image to any Web page.
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.html 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 Figure 9.8.
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.
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.
Table 9.1. HTML attributes covered in Chapter 9.
| Attribute | Function |
| SRC="..." | The address or filename of the image. |
| ALT="..." | A text message that may be displayed in place of the image. |
| ALIGN="..." | Determines the alignment of the given image. If LEFT or RIGHT, the image is aligned to the left or right column, and all following text flows beside that image. All other values, such as TOP, MIDDLE, BOTTOM, ABSMIDDLE, or ABSBOTTOM, determine the vertical alignment of this image with other items in the same line. |
