Placing an Image on a Web Page
| 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."
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.
|
EAN: 2147483647
Pages: 345