HTML and CSS Reference
Inserting an Inline Image
Dave wants you to replace the name of the company at the top of his Web page with an
image of the company logo. Because HTML fi les are simple text fi les, non-textual con-
tent such as graphics must be stored in separate fi les, which are then loaded by browsers
as they render pages. To add a graphic image to a Web page, you have to insert an inline
image into your code.
The img Element
Inline images are inserted into a Web page using the one-sided img element with
<img src=” file ” alt=” text ” />
where file is the name of the graphic image fi le and text is text displayed by brows-
ers in place of the graphic image. In this tutorial, you'll assume that the graphic image
fi le is located in the same folder as the Web page, so you don't have to specify the loca-
tion of the fi le. In the next tutorial, you'll learn how to reference fi les placed in other
folders or locations on the Web.
Browsers retrieve the specifi ed image fi le and display the image alongside the rest of
the Web page content. The size of the image is based on the dimensions of the image
itself; however, you can specify a different size using the width and height attributes
Always include alternate
text for inline images. The
alt attribute is required in
XHTML code and is highly
recommended as a way
of accommodating users
running nonvisual Web
width=” value ” height=” value ”
where the width and height values are expressed in pixels. If you specify only the width,
browsers automatically set the height to maintain the proportions of the image; similarly,
if you defi ne the height, browsers automatically set the width to maintain the image pro-
portions. Thus, by setting the width and height values yourself, you can enlarge or reduce
the size of the rendered image.
Inline images are considered text-level elements and thus must be placed within
a grouping element such as a heading or a paragraph. An inline image is most com-
monly stored in one of three formats: GIF (Graphics Interchange Format), JPEG (Joint
Photographic Experts Group), or PNG (Portable Network Graphics). Dave has already
created his graphic image in PNG format and stored it with his other fi les using the fi le-
name jpslogo.png . You'll replace the text of the h1 heading with this inline image.
To insert the company logo at the top of the page:
1. Return to the jprop.htm file in your text editor.
2. Go to the h1 heading element at the top of the body section, delete the text The
J-Prop Shop from between the opening and closing <h1> tags, and then replace
<img src=”jpslogo.png” alt=”The J-Prop Shop” />
Figure 1-42 highlights the revised code in the jprop.htm file.