Manuscript for HTML Tutorial #20

Listed below is the manuscript of all textual instructions used in HTML Tutorial #20 - Attributes That Should Be Added to All Images. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #20 - Attributes That Should Be Added to All Images

Lesson #20: Image Attributes. Click the play button to begin the tutorial.
In this lesson we will learn about three attributes that should be included in all <img> tags.
We’ll start with the width and height attributes, which tell the browser how much space to reserve for the image.
Before we can insert values for the image dimensions, we need to find out what they are.
Fortunately, Internet Explorer makes this easy. From inside our IE browser, we’ll right click on our image.
Then we’ll select Properties.
Here are the dimensions of the image in pixels; width is listed first.
Let’s also grab the dimensions for this image.
Now we can add width & height attributes to our image tags.
If we don’t set the width & height, the image will still appear at its regular size, but the page may shift a lot while loading.
Now, the third attribute we need to add is the alt attribute, which is used to specify alternate text.
This way people who cannot, or choose not to, see our image will be able to determine its purpose from the alternate text.
Let’s check it out.
In some web browsers, the alt text will appear as a tool tip when the cursor is place over the image.
If images have been disabled, some web browsers will display the alt text in place of the image.
Web browsers for the visually impaired may supply the alt text audibly, or in Braille.
Now that you know about the width, height & alt attributes, you can meet us in Lesson #21.

<<<Tutorial #19

Tutorial #21>>>