The image tag has many arguments and is also a rule breaker by being a single tag rather then a paired set. In its most simplistic form, the image tag contains a single argument "src" which is the name of the image file.

For example, if you wanted to display an image called "logo.gif", you would code the following:

<img src="logo.gif">

Here is a list of the other common arguments used in image tags:

• width - the width of the image in pixels
  
• height - the height of the image in pixels
  
• alt - a text description of the image
  
• border - the size of the border around an image if linked
  
• hspace - the horizontal padding on each side of the image
  
• vspace - the vertical padding on each side of the image
  
• align - how the image should be aligned in reference to text

Note: the order of arguments is never important.

To optimize an image tag for speed and backwards compatibility, you should always use the width, height, and alt tags. An optimized version of the above example would be:

<img src="logo.gif" width="50" height="58" alt="Weekly Wire">

This would allow the browser to set aside the space an image will take up. By doing this, the page will lay out faster and the text will be displayed much sooner. I always recommend using the width and height tag on EVERY image you code.

The "alt" tag is used for backwards compatibility with text only browsers that can't display images. In this scenario, the user would see "Weekly Wire" and know what the image was. If you do not use an "alt" tag, the user would see the word "image" and not know what it was. I always recommend using the "alt" tag.

To align an image to the right or the left of a paragraph of text, you would code the following.

<img src="logo.gif" width="50" height="58" alt="Weekly Wire" align="right"> or
<img src="logo.gif" width="50" height="58" alt="Weekly Wire" align="left">

The image to the right of this text is using the align="right" tag to bring the image over to the right. If you decide you want a little padding around the image so the text and the image are further apart, you can use the hspace and vspace tags. The add extra pixels to horizontally or vertically to an image.

For example:

<img src="logo.gif" width="50" height="58" alt="Weekly Wire" align="right" hspace="5" vspace="5">

This would add 5 pixels of headroom all around the image getting it further from the text

You can not center an image within text without working with tables. However, you may center an image above or below text by using the following code:

<div align="center">
<img src="logo.gif" width="50" height="58" alt="Weekly Wire">
</div>

Notice how you can often combine HTML tags to achieve what you need.