Aligning Text Around The Image
Once you start to put text and images together in you web page, you may find it difficult to align your text around the images. This is because
every web browsers has its own default settings for the images; and the default settings may not be what you want. In order to change
the settings to what you require, you have to use a combination of the attributes and tags such as hspace, vspace,
<BR>, and align.
Look at Figure 6.1.
Figure 6.1: The Use of hspace and vspace.
Do you notice the main different of the three images ? Well, in case you don't (take it easy, you're still a good observer, it's simply my fault, cause I made them look almost indifferent ;) ), let me tell you. The first image has blank space on every sides of the image; the second image has blank space on top and bottom; whereas the third image has blank space on left and right.
When you use <IMG> tag to place an image, the default setting for the space around the image is just like the first image shown above. To get the effect as that of the second image, you have to specific the image attribute to <IMG SRC="an_image" HSPACE=0 VSPACE=2> Likewise, to get the effect as that of the third image, you have to specific the image attribute to <IMG SRC="an_image" HSPACE=2 VSPACE=0>. Don't be confused that you must use 2 for the value of both hspace and vspace -- You may specific whatever value you want, as long as you realize that the value reflects the size of the space in pixel.
Changing the value of hspace and vspace do not change the alignment of the text around the image. Look at figure 6.2. To get the text align like that of the first image, you have to indicate ALIGN="bottom" within the <IMG> tag. Likewise, to get the effect of the second image, simply indicate ALIGN="middle" within the <IMG> tag. You may have the text on top-right of the image by specifying ALIGN="top".
 Let's Party! | Let's Party! | |
Figure 6.2: The use of align. | ||
In most all of the time you may find it annoying to arrange the text around the image. :-)
