ptg16476052

Inline Images in HTML: The <img> Tag 203

9

Output ▼

So far, so good. Now you can add an image to the page. Suppose that you happen to have
an image of a haunted house lying around on your hard drive; it would look excellent at
the top of this web page. The image, called haunted_house.png, is in PNG format. It’s
located in the same directory as the halloween.html page, so adding it to the page will
be easy.

Now, suppose that you want to place this image above the page heading. To do so, add
an tag to the file, just before the heading:

Welcome to The Halloween House of Terror

Images, like links, don’t define their own text elements, so the tag has to go inside
a paragraph or heading element.

When you reload the halloween.html page, your browser should include the haunted
house image on the page, as shown in Figure 9.2.

If the image doesn’t load and your browser displays a funny-looking icon in its place,
make sure that you entered the filename properly in the HTML file. Image filenames are
case sensitive, so all the uppercase and lowercase letters have to be correct.

If the case isn’t the problem, double-check the image file to make sure that it is indeed a
GIF or JPEG image and that it has the proper file extension.

FIGURE 9.1
The Halloween
House home page.

▼

▼