You might reasonably expect that the text on a web page would just wrap around an image. It is not that simple.
You must add the ALIGN attribute to the IMG tag to make the text wrap around an image. The tag might look something like:
<img src="fish.gif" align="left" width="50" height="50">
Project 2: HTML Basics
In FPX, if an image has the align attribute, there is a black bar, called an anchor, on the line before the text starts. This line does not show in a browser or in print. Sometimes it is helpful to drag the image to a new location by dragging this anchor instead of dragging the image itself.
The table below shows the values for ALIGN that you will use the most for images. There are some other values, but in most situations the results are the same as with one of values listed.
The values allowed for aligning an image are not the same values as ALIGN has for paragraphs. It's a bit confusing at first.
Did you notice that there is no value that will center the image horizontally? To do that you must center the paragraph that contains the image. Yes, it's a bit awkward.
In the examples in the table above, the image bumps right into the text. A little blank space around the image would keep it from feeling so crowded.
You can add blank space around an image with two attributes in the <IMG> tag. The space is measured in pixels.
Example, setting both hspace and vspace:
<img src="fish.gif" align="left" hspace="10" vspace="15" width="50" height="50">
Adding space around an image:
The table below shows how you can use these attributes to create white space around an image. In the example images, the picture of the fish is selected, so that the handles show at the corners and sides of the image. These handles (the small squares) show you exactly where the white space is.
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~