IMAGES & LINKS - SECTION 1

    Images are a vital part of a HTML document, as the saying goes, 'a picture represents a thousand words'. To include a certain picture with the file name 'me.gif', just insert the following line :

<img src="me.gif" alt="My Picture">

    The <img src> doesn't need a closing tag. As for 'alt', it defines what the picture represents. Some visitors might choose not to open any image if necessary, so by defining what your picture is, it allows them to choose which image to view.

    The <img src> tag can be expanded to include alignment, width, height, borders and spacing. We'll look at each seperately.

<img src="me.gif" alt="Me!" align=left width=60 height=50>

    Both the 'width' and 'height' represents the image properties. As for 'align', you could choose either 'left' or 'right'. Here's what you'll see :
    I purposely enter a non-existing file name so as you will be able to see the 'alt' function for yourself. As you can see, the image is situated quite close to this paragraph. to distance the picture from the text you can add this few lines :

<img src="me.gif" alt="Me!" align=left width=60 height=50 hspace=10 vspace=10>

    By adding only 'hspace' and vspace', you can define the spacing you need.
'hspace' defines the horizontal spacing you need, while 'vspace' defines the vertical spacing. Notice the difference between the image on top and the image here? This allows a 'breathing' space between each image and the text.

    Another function for the <img src> tag is the inclusion of a border around the image. One more thing, to centerize an image you can use these tags, <center></center>. Here's an example :

<center>
<img src="next.gif" alt="Next" border=10>
</center>

    This is what you will get, notice that the border is in black :

    That's all for this section, continue with Section 2. Click here to get to Lesson 5 : Frames.