<img> Image Tag

An image tag is used to insert an image in a web page. The tag has some parameters which allow the relationship between it and surrounding text to be defined, but it is more common now for images to be specifically allocated space in a web page within a table cell. It is not a container tag there is no </img>. It is written as <img <!-- parameter list -->> . Parameters are:

Src
src="mygif.gif" {relative file name} or "http://www.gifsunlimited.com/mygif.gif" { absolute image address}

Identifies the source file for the image to be displayed. Where the image file is in the same directory or folder as the web page, the file name can be used by itself:

For example:
<img src="title.jpg">
This is refered to as a relative file name as its use assumes the image is always in the same folder as the web page. If, as is common, the images are kept in an 'images' sub-folder, the tag would be written as:
<img src="images/title.gif">

The image could be on a completely different web site on the other side of the world, in which case the full web address or URL should be given:
<img src="http://www.gifsunlimited.com/images/title.gif">

Align
align="left" {or right, center}

For example:
<img src="title.gif" align="left">

An image can be included 'inline' with text in a web page. This simply means that the image tag is inserted in the text where you want the image to appear. If the 'align' parameter is included, you can dictate how the image relates to that text:

align="top"	Text is aligned with the top of the image.
align="middle"	Text is aligned with the middle of the image.
align="bottom"	Text is aligned with the bottom of the image.

These options leave large gaps of white space on the page as images are usually much taller than the text. It is better if text can 'wrap' around the image. The following options provide for this:

align="left"	Text will wrap around the right side of the image and the bottom.
align="right"	Text will wrap around the left side of the image and the bottom.

Height, Width
height="150"

For example:
<img src="title.gif" height="150" width="200">

The height and width of an image can be given in pixels. Note - this is not made available to 'dictate' the size of the image, but to warn the browser of its coming. If you increase the size of an image using this method, the quality will be very poor. If you reduce the size of an image, you will have wasted bandwidth downloading the full image. These parameters ensure that as the page is downloading space is reserved for the image, and the page is not constantly reshaping and images arrive.

Alt
alt="New York skyline"
The alt parameter is designed to allow the developer to provide an alternative to the image for browsers which do not display images. In practice it should be used as some search engines take not of this text in building their rankings,and as the mouse pointer hovers over an image this text will be displayed, a possible design feature.

Border
border="0"
By default a browser displays a 1 pixel border around an image. The border width can be increased as a design feature to eg 5 or 10 pixels. Where the image is used as a hyperlink, the border will usually be a distracting bright blue. It is common in this case to specify border="0".

Vspace, Hspace
vspace="10"
These parameters determine how much space (pixels) is left around an image before text encroaches on it. Their use prevents a page having a cluttered appearance.

An image tag with parameters might be:
<img src="title.gif" height="150" width="200" align="left" border="0" vspace="5" hspace="5" alt="Guide To HTML">