• Placing an Image on a Web Page
  • Figure 9.1.
  • Figure 9.2.
• Labeling an Image
  • Figure 9.3.
• Horizontal Image Alignment
  • Figure 9.4.
  • Figure 9.5.
• Vertical Image Alignment
  • Figure 9.6.
  • Figure 9.7.
• Images That Are Links
  • Figure 9.8.
  • Figure 9.9.
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 9

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.

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:

1. Enter the following address into your Web browser:
http://w3school.cjb.com

You should see a page with four images of hats and stars at the bottom.

2. Save the images 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 on your hard drive in whichever folder you use for creating Web pages.

3. As you read this chapter, use the hat and star image files to practice putting images on your pages. (You'll find out how to find or create the perfect images for your Web pages in the next chapter.)

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.

Placing an Image on a Web Page

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://wwww.softlookup.com/images/logo.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">.

---

Labeling an Image

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.

Horizontal Image Alignment

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.

---

Vertical Image Alignment

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:

• To line up the top of an image with the top of the tallest image or letter on the same line, use <IMG ALIGN="top">.
• To line up the bottom of an image with the bottom of the text, use <IMG ALIGN="bottom">.
• To line up the bottom of an image with the bottom of the lowest image or letter on the same line, use <IMG ALIGN="absbottom">. (If there are some larger images on the same line, ALIGN=absbottom might place an image lower than ALIGN=bottom.)
• To line up the middle of an image with the middle of the text, use <IMG ALIGN="middle">.
• To line up the middle of an image with the overall vertical center of everything on the line, use <IMG ALIGN="absmiddle">. This might be higher or lower than ALIGN="middle", depending on the size and alignment of other images on the same line.

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 guide 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.

• Copy the magic.gif image file to the same directory folder as the HTML file.
• With a text editor, add <IMG SRC="magic.gif"> where you want the image to appear in the text.
• If you want the image to be centered, type <DIV ALIGN="center"> before the <IMG> tag and </DIV> after it. To wrap text around the image instead, add ALIGN="right" or ALIGN="left" to the <IMG> tag.

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>.

Images That Are Links

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 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.

Summary

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.

Q&A

Q I found a nice image on a Web page on the Internet. Can I just use Save Image As... to save a copy and then put the image on my Web pages?

A It's easy to do that, but unfortunately it's also illegal in most countries. You should get written permission from the original creator of the image first. Most Web pages include the e-mail addresses of their authors, which makes it a simple matter to ask for permission--a lot simpler than going to court, anyway!

Q How long of a message can I put after ALT= in an <IMG> tag?

A Theoretically, as long as you want. But practically, you should keep the message short enough so that it will fit in less space than the image itself. For big images, ten words may be fine. For small images, a single word is better.

Q How do I control both the horizontal and vertical alignment of an image at once?

A The short answer is that you can't. For example, if you type <IMG ALIGN="right" ALIGN="middle" SRC="myimage.gif">, the ALIGN="middle" will be ignored.
There are ways around this limitation, however. Chapter 14 will explain how to position text and images exactly where you want them in both the horizontal and vertical directions.

Quiz Questions

1. How would you insert an image file named elephant.jpg at the very top of a Web page?

2. How would you make the word "Elephant" appear whenever the actual elephant.jpg image couldn't be displayed by a Web browser?

3. Write the HTML to make the elephant.jpg image appear on the right side of the page, with a big headline reading "Elephants of the World Unite!" on the left side of the page next to it.

4. Write the HTML to make a tiny image of a mouse (named mouse.jpg) appear between the words "Wee sleekit, cow'rin," and the words "tim'rous beastie."

5. Suppose you have a large picture of a standing elephant named elephant.jpg. Now make a small image named fly.jpg appear to the left of the elephant's head, and mouse.jpg appear next to the elephant's right foot.

Answers

Activities

• Try using any small image as a "bullet" to make lists with more flair. If you also want the list to be indented, use the <DL> definition list and <DD> for each item (instead of <UL> and <LI>, which would give the standard boring bullets). Here's a quick example, using the star.gif file from my sample images page: