Images

You can put images in your web page by using the image tag <img>. The image tag has the attribute, src, whose value is the address and file name of the image.

For example, the code:

<p>
<img src="maxwell.jpg" width="30%" 
        alt="Portrait of James Clerk Maxwell">
<br>
<big>James Clerk Maxwell</big>

produces the following image, providing the browser can find the file "maxwell.jpg".

James Clerk Maxwell

Animations, or animated images, are inserted in exactly the same manner as other images. The animation is contained within the image file.

<p>
<img src="hackanm.gif" width="48px"height="48px" 
        alt="Little person typing furiously.">
Here is an animated image.
<p>

Here is an animated image.

Key Points to Note about Images

1. The image tag has no stop tag. All information about the image goes inside the <img> tag, in the form of attributes.
2. The browser can display the image more quickly if you give its width and height (in pixels). This information can be obtained by right clicking the image, and looking at its properties summary.
3. Changing the size of the image can be done by setting width as a % of the page (or containing block) holding it.
4. The attribute "alt" should be included for browsers that do not display images.
5. Images are treated by html as very large text characters. They generally throw text out of line. This was avoided with the images above, by using <p> and <br> tags.
6. Another way to solve the problem is to use the align attribute. Setting the align attribute to "left" or "right" causes text to flow around the image, e.g.:

   <img src="coffeegrinder1b.gif" 
    width="68px"height="48px"
    align="left"hspace="12"
    alt="Coffee Grinder">
   Setting the align attribute ...
   

   Caution: interpretation of the align attribute may vary with the browser.
7. Sometimes you need a bit of extra space around the image. The hspace and vspace attributes will do this if they are set equal to a number without units (corresponds to pixels).
8. The border attribute produces a border around the image. It is set equal to the border width in pixels.