HTML and CSS Reference
In-Depth Information
Springfield, CA 94532
</p>
</body>
</html>
.
Output
FIGURE 9.1
The Halloween
House home page.
9
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 excel-
lent at the top of this web page. The image, called
house.jpg
, is in JPEG 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
<img>
tag to the file, just before the heading:
<div><img src=“haunted_house.png” alt=“House of Terror” /></div>
<h1>
Welcome to The Halloween House of Terror
</h1>
Images, like links, don't define their own text elements, so the
<img>
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.
