Exercise - IMG tag attributes

This lesson introduces the use of tag attributes which act to modify the action of the basic tag. We'll use some attributes of the image tag to control it's size and draw a border around it. Size attributes are particularly useful, as they allow you to make adjustments to without having to go back to your graphics program.

Step 1.

Place three images on your page by entering the following somewhere in the body of the document: (Hint: Type the first line, then use "drag and drop" to create lines two and three, then change the values)

<IMG SRC="images/parrots.jpg" BORDER=10>

<IMG SRC="images/parrots.jpg" HEIGHT=100>

<IMG SRC="images/parrots.jpg" WIDTH=50>

Step 2.

Save the document and reload it with your web browser

A border 10 pixels wide is created.

Height is reduced to 100 pixels. Since WIDTH is not specified, proportions are retained.

Width is reduced to 50 pixels. Since HEIGHT is not specified, proportions are retained.

Other useful image attributes are for alignment with text (left, right, top, bottom etc.)

Exercise: Alternate Text

The ALT option offers both a kindness to users who are working with graphics turned off to enhance speed over slow connections, and the visually impaired using text to speech convertion software to browse the web. Embedded within an IMG SRC tag, it provides a text explanation what the graphic portrays. Since both are unable to see images, alt text is displayed or read aloud.It is essential to meet modern disability guidelines, and if you submit your pages to HTML checkers, you'll be downgraded if you do not include them.Step 1:Return to the text document and modify the HTML tags.