Formatting Images

Simply typing the HTML <img> tag will just "wedge" the image in wherever you happen to type the code, but you can make text flow around an image and add space around an image. 

 

No formatting added to the image tag.

  

This image is placed at the left margin and text follows it, aligned to the bottom of the image.

The code looks like this:

<p><img border="0" src="orange_arr.gif" width="23" height="23">This image is placed at the left margin and text follows it, aligned to the bottom of the image.</p>

align="left"

If you add this to the <img...> tag the image will be placed at the left margin and text will flow around it, aligned to the top of the image, like the image on the right.

This image is placed at the left margin and text flows around it, aligned to the top of the image.

The code looks like this:

<p><img border="0" src="orange_arr.gif" align="left" width="23" height="23">This image is placed at the left margin and text flows around it, aligned to the top of the image.</p>

align="right"

If you add this to the <img...> tag the image will be placed at the right margin and text will flow around it, aligned to the top of the image, like the image on the right.

This image is placed at the right margin and text flows around it, aligned to the top of the image.

The code looks like this:

<p><img border="0" src="orange_arr.gif" align="right" width="23" height="23">This image is placed at the right margin and text flows around it, aligned to the top of the image.</p>

hspace="10"

If you add this to the <img...> tag a 10 pixel space is created both sides of the image, like the image on the right. You can specify any value for the space.

This image has a 10 pixel gap each side of it.

The code looks like this:

<p><img border="0" src="orange_arr.gif" align="left" hspace="10" width="23" height="23">This image has a 10 pixel gap each side of it.</p>

vspace="10"

If you add this to the <img...> tag a 10 pixel space is created above and below the image, like the image on the right. You can specify any value for the space.

This image has a 10 pixel gap above and below it.

The code looks like this:

<p><img border="0" src="orange_arr.gif" align="left" vspace="10" width="23" height="23">This image has a 10 pixel gap above and below it.</p>