Working with images - HTML5 - page 78

Strictly speaking, browsers don't need the width or height attributes to render the image; they can
detect the size if those values are not present. However, leaving the dimensions out of the <img> tag
slows down the page rendering a bit and web designers typically include the width and height attri-
butes to optimize their sites.

Keep in mind that if the width and height attributes are present, the browser will
use them to display the image. If you accidentally add a zero to a 300-pixel-wide
graphic, it will be shown with a width of 3000 pixels. Although it's more advis-
able to always rescale your images with a graphics program, you can temporarily
take advantage of this browser property to view resized graphics in your page.

The final attribute in the example code, alt , is short for alternative text . If, for whatever reason, the
browser is not able to display the image, the alternative text is shown. You can see this behavior on
smart phones when they retrieve HTML e-mail; if the automatic download of images is disabled,
a rectangle the width and height of the image is shown along with the alternative text. Perhaps the
most critical use of alternative text is to provide an image substitute for screen readers, which are
used to help the visually impaired understand web pages. For this reason alone, foreground images
should always include an alt property and value.

Try iT

In this Try It you learn how to add an image to the page.

Lesson requirements

You will need the tpa.html file from the Lesson_10 folder, a text editor, and a web browser.

You can download the code and resources for this lesson from the topic's web
page at www.wrox.com .

step-by-step
1. Open your text editor.

2.

From the Lesson_10 folder, open tpa.html .

3. Remove the placeholder text Header and enter the following code:

<img src=”images/logo.png” width=”410” height=”181” alt=”TPA: Trans Planet
Airlines” />

4.

Save your file.