Text beside an image with <img> extensions

Attributes of the image tag

Text can now be "floated" to the right or left of an image. The align=left attribute will float text down and to the left of the image; align=right will float text down and to the right of the image.

The following example shows how the tag appears:

   <img src="" align=right> <br clear=right>

 

To have left alignment:

   <img src="" align=left> <br clear=left>

Important note: If you are floating text beside an image and use the <p> tag, a blank line will be inserted and the following text will also appear beside the image. When you want your remaining text to be below the image, you must include a <br clear=> tag so that text will go down to the next clear margin, below the picture. Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape-only.

Leaving space around an image

You can increase the space around an image by specifying a horizontal or vertical margin in pixels.

For instance, adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image. The attribute vspace= adds space to the top and bottom of the image.

The tagging looks like this:

   <img src="http://www.ncsu.edu/images/earth2.gif" align=left hspace=20>  The text is aligned to the left and there is a 
   horizontal space of 20 pixels.  It looks nice this way.  It helps to add a 
   horizontal space to the image so the text is not so close to the 
   picture.<br clear=left>

It will appear like this on the Web page:

The text is aligned to the left and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture.

There are other attributes of the image tag, some of which are explained in Netscape's Extensions to HTML tutorial.