An Introduction to Images

Images are added to documents by using the <img> tag.  The tag should always have four basic attributes src, alt, width, and height.  For instance, to add the image below, the HTML markup would be:

<img src="images/family.jpg" alt="[Picture of My Family]" width="192" height="150">

The src tag shows the location of the document, and can be an absolute URL reference (if the image were somewhere on the WWW) or could be a relative URL reference (if the image were on your server).

The alt tag, which stands for alternative text, shows a textual description of the image.  This will be displayed as the image is loading and as people mouse over 

Sizes and Scaling

Image size should be used in all cases because it helps your browser render your pages quicker.   The image sizes you set can be the actual size of the images, or can be scaled to different sizes:

Aligning Your Image

There are two basic alignments your images can take: inline and floating.  Inline images are displayed as part of the line in which it is declared while floating images are text-wrapped.  All alignment is declared with the align attribute.  For inline images, the values they can take are top, middle, and bottom.  Floating images take values of left or right.

These are set with the align attribute: Inline Alignment  Topnotice how all these words align with the top of the image.  Also, notice that the next line comes under the image.  Middlenotice how all these words align with the middle of the image.  Also, notice that the next line comes under the image.  Bottomnotice how all these words align with the bottom of the image.  Also, notice that the next line comes under the image.  The last thing you should notice about images is the fact that when inline alignment is used, the picture appears EXACTLY where it inserted in the HTML.  For instance, the <img> tag for the picture above is right after the world "EXACTLY".  Also notice how the text wraps over the top and under the bottom of the images and how the line in which the image is in (the "inline") is aligned exactly as determined by the images <img> tag (for instance, alignment is "middle" for this block of text.   Floating Alignment left Notice how this text now wraps to the right of the image.  The image is said to "float" in relation to the text.    All words which appear in this section will wrap to the right until the bottom of the image is reached, at which time text will then appear under the image. right Notice how this text now wraps to the left of the image.  The image is said to "float" in relation to the text.  All words which appear in this section will wrap to the left until the bottom of the image is reached, at which time text will then appear under the image.

Adding Borders By default, images do not have borders unless they are used as links.  If you wish to insist on having one, it can be set with the border attribute.  Examples of different border sizes are as follows: Border = 1 Border = 5 Border = 15  Adding White Space to Images The amount of "white space" between your images and the text that surround it are controlled with the hspace and vspace attributes.  The hspace attribute controls horizontal space (space to the left and right), while the vspace attribute controls vertical space (top and bottom).  For example, the image to the left has a hspace attribute of 20 and vspace attribute of 10.

Back to the Examples Page