Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

To put an image on a web page, first move the image file into the same folder as the HTML text file. Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of myimage.gif:

<img src="myimage.gif" alt="My Image" />

Both the src and the alt attributes of the <img /> tag are required in XHTML web pages. The src attribute identifies the image file, and the alt attribute allows you to specify descriptive text about the image, the latter of which is intended to serve as an alternative to the image in the event that a user is unable to view the image. You'll read more on the alt attribute later, in the section "Describing an Image with Text."

By the Way

The <img /> tag also supports a title attribute that is used to describe an image. Unlike the alt attribute, the title attribute is truly intended to provide an image description with the assumption that the image is visible. The alt attribute serves a more important purpose, and enters the picture primarily when an image cannot be displayed, such as when a blind user is "viewing" a page. The alt attribute is required but it's a good idea to provide both alt and title attributes if you want to ensure that your images are all well-described.

As an example of how to use the <img /> tag, Listing 8.1 inserts several images at the top and bottom of a page. Whenever a web browser displays the HTML file in Listing 8.1, it automatically retrieves and displays the image files as shown in Figure 8.1. Notice that these are some of the same images you saw created and edited in Paint Shop Pro in the preceding lesson.

Listing 8.1. The <img /> Tag Is Used to Place Images on a Web Page

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Michael's Pond</title> </head> <body> <p> <img src="/books/4/158/1/html/2/pondtitle.gif" alt="Michael's Pond" /> </p> <p> My backyard pond is not only a fun hobby but also an ongoing home improvement project that is both creative and relaxing. I have numerous fish in the pond, all Koi from various places as far as Japan, Israel, and Australia. Although they don't bark, purr, or fetch anything other than food, these fish are my pets, and good ones at that. The pond was built in a matter of weeks but has evolved over several years through a few different improvements and redesigns. I still consider it a work in progress, as there are always things to improve upon as I continue to learn more about how the pond ecosystem works, how to minimize maintenance, and how to get a more aesthetically pleasing look. </p> <p> <img src="/books/4/158/1/html/2/pond1.jpg" alt="The Lotus, Floating Hyacinth, Japanese Lantern, and Waterfall All Add to the Drama of the Pond" /> <br /> <img src="/books/4/158/1/html/2/pond2.jpg" alt="Feeding Time is Always Full of Excitement" /> <br /> <img src="/books/4/158/1/html/2/pond3.jpg" alt="One of the Larger Fish Cruises for Dinner" /> <br /> <img src="/books/4/158/1/html/2/pond4.jpg" alt="A Dragonfly Hovers Over the Lotus for a Quick Drink" /> </p> </body> </html>

Figure 8.1. When a web browser displays the HTML page from Listing 8.1, it adds the images named pondtitle.gif, pond1.jpg, pond2.jpg, pond3.jpg, and pond4.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 in Hour 1, "Understanding HTML and XHTML," a web page image is always stored in a file separate from the text, even though it appears to be part of the same page when viewed in a browser.)

Just as with the <a href> tag (covered in Hour 3, "Linking to Other Web Pages"), you can specify any complete Internet address in the src attribute of the <img /> tag. Alternatively, you can specify just the filename if an image is located in the same folder as the HTML file. You can also use relative addresses such as images/birdy.jpg or ../smiley.gif.

By the Way

Theoretically, you can include an image from any Internet web page within your own pages. For example, you could include a picture of my steely glare by putting the following on your web page:

<img src="/books/4/158/1/html/2/http://www.michaelmorrison.com/mmintro1.jpg" />

The image would be retrieved from my web server whenever your page was displayed. You could do this, but you shouldn't! Not only is it bad manners (it often costs people money whenever you pull something from their server computer), but it also can make your pages display more slowly. You also have no way of controlling whether the image has been changed or deleted.

If someone gives you permission to republish an image from one of his pages, always transfer a copy of that image to your computer and use a local file reference such as <img src="/books/4/158/1/html/2/mmintro1.jpg" />. In other words, you should host all images used on your pages.

Related

Категории