Image Tag and Attributes  <img />   

Another single element which graphic browsers display images as well as text to enhance the web pages. Images, whether stagnate or animated help communicate messages effectively. Insert images with the <img> tag along with the many attributes. Try to keep the image file size small.

Image Tag and Alt Attribute

Insert an image on the page. The alternate text displays the image description for non-graphic browsers or if images are turned off. Use break clear all to place text on a new line. <br clear="all> <img style="float:center" src="images/ARROW.GIF" alt="arrow left">
arrow left

Image Vertical Alignment

Vertical align graphics with text used these attributes:top, middle, and bottom. Use CSS float:left

Left Arrow   align = top Arrow   align = middle Arrow   align = bottom

Horizontal Alignment - use CSS Float

Image Border

Borders are displayed when the value is more that zero or the image is a link. This image border is one pixel.

<img src="images/ARROW.GIF" border="2" alt="arrow left">
arrow left

Image Height and Width

Displays image size in measurement of pixels(px), inches(in), centimeters(cn), percent(%). Use CSS height and width properties.

Arrow  height="15px" width="15px" Arrow  width="60px" height="30px"

Background Image

<body background="images/bckgrnd2.jpg">   Use CSS

A browser error image is displayed when image is unable to be shown. The alternate text is displayed instead.
Use CSS format: body{background-image:url(images/w.gif)}

arrow left<img src="images/rrow.gif" border="2" alt="arrow left">

Animated Gifs

Animated gifs are graphic images made to move or animate continuosly or for a number of loops. GIF Animator, GIF Construction or any of the many graphic programs used to create animation. These images used appropriately can enhance the page but try not to over whelm the user and the text with too much movement.

Web Design with XHTML Part I
Doris Cuffey, Instructor