Home| About US |Website Development Tutorial| Ecommerce Tutorial
Back to Basic HTML Programming
HTML TUTORIAL ADDING IMAGES
Images are inserted into an HTML document by the img tag. img is short for image. As an example, suppose we would like to embed the image in the file "turtleneck-sweater.jpeg" into our HTML document. To do this we use the src attribute of the img tag like so:
<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater" />
When a graphic-capable browser encounters this tag, it places the image content inline to its surroundings. (CSS can be used to place the image as a block or float instead.) Thus, one can place graphics directly next to text. The alt tag stands for alternate which non-graphic-capable browsers (such as Lynx) may use to better enable its user to understand the purpose of the image. Many browsers, such as Internet Explorer, incorrectly use the alt tag to produce image tooltips. However, the title tag should actually be used for this. Other browsers such as Mozilla Firefox display tooltips only when title is used.
Note that there is a space before the />. Some older browsers behave strangely if the space is omitted.
The HTML specification requires that all images have an alt attribute. This is commonly known as alt text. Images can be split in to two categories:
Decorative images should have empty alt text, i.e. alt="".
Images used as bullets may use an asterisk, alt="*".
All other images should have meaningful alt text. Alt text is not a description of the image, use the title attribute for short descriptions or longdesc to link to long descriptions. Alt text is something that will be read instead of the image. For example,
<img src="company_logo.gif" alt="???"> make the best widgets in the world.
The alt text should be the company's name not the ever popular 'Our logo', which would give the sentence 'Our logo makes the best widgets in the world.' when read in a text only browser
You can help web browsers layout your web pages more quickly by always supplying the width and height attributes. Make sure you give the correct values or your images will be distorted.
The following attributes are allowed in the img tag as specified in the HTML 4 DTD:
| src | the URL of the image that should be displayed by the browser. |
| alt | a short textual replacement for the image that may be used by the browser instead of showing the image, e.g. for blind users, users without a graphic-capable browser or users who have disabled image loading. |
| longdesc | a URL that provides a long description of the image. |
| name | for backwards compatability, use id in new documents - the name of the image which may be used by scripting languages. |
| id | the unique identifier for the image which may be used by scripting languages. |
| class | asigns one or more CSS classes to this image to control styling |
| lang | language information |
| dir | text direction |
| title | title of the image, which some browsers display in a hover box (tooltip), especially when the user holds his/her mouse steady over the image for a short time. |
| style | in-line CSS information. |
| ismap | (not yet written) |
| usemap | (not yet written) |
| align | deprecated, use CSS in new documents - alignment of the image i.e. bottom, middle, top, left or right. |
| width | the width of the image, for bitmap images this should be given as a plain number, e.g. 200, which would result in a width of 200 pixels |
| height | height of the image, see width for usage |
| border | deprecated, use CSS in new documents - border width when image is linking to something, usually set to 0 |
| hspace | deprecated, use CSS in new documents |
| vspace | deprecated, use CSS in new documents |