HTML and CSS Reference
In-Depth Information
If an image is not in one of these formats, you can use a paint or graphics-editing
program to convert an image to a .gif, .jpg, or .png format. Some paint programs even
allow you to save a standard GIF image as interlaced. A number of paint and graphics-
editing programs, such Adobe Photoshop and Corel Paint Shop Pro, are available in the
marketplace today.
Overusing Images
Be cautious about
overusing images on a
Web page. Using too many
images may give your Web
page a cluttered look or
distract the visitor from
the purpose of the Web
page. An image should
have a purpose, such as to
convey content, visually
organize a page, provide a
hyperlink, or serve another
function.
Image Attributes
You can enhance HTML tags by using attributes.
Attributes
define additional
characteristics for the HTML tag. For instance, you should use the width and height
attributes for all <img> tags. Table 2-10 lists the attributes that can be used with the
<img> tag. In this chapter, the src and alt attributes are used in the <img> tag. Image
attributes will be explained in detail, because they are used in later chapters.
Table 2-10 Image Attributes
Attribute
Function
alt
• Alternative text to display when an image is being loaded
• Especially useful for screen readers, which translate information on a
computer screen into audio output
• Should be a brief representation of the purpose of the image
• Generally should stick to 50 characters or fewer
height
• Defines the height of the image, measured in pixels
• Improves loading time
src
• Defines the URL of the image to be loaded
width
• Defines the width of the image, measured in pixels
• Improves loading time
To Add an Image
In the early days when the Web was used mostly by researchers needing to share
information with each other, having purely functional, text-only Web pages was the norm.
Today, Web page visitors are used to a more graphically oriented world, and have come to
expect Web pages to use images that provide visual interest. The following step illustrates
how to add an image to a Web page by entering an <img> tag in the HTML file using the
tags and text shown in Table 2-11.
Table 2-11 Adding an Image
Line
HTML Tag and Text
11
<header style="text-align: center">
12
<img src="rockclimber.jpg" width="450" height="300"
alt="Rock climber" />
13
</header>
