If you're trying to place text
directly beside an image within your web page HTML code, you may have discovered
it's not as easy as it appears. When you place your image HTML code and text
within your HTML code, instead of the text and image displaying side by side
like a newspaper, it will display like this:
 The text is displaying at the bottom of the
image. |
To enable your image and text to display properly together, you will need
to add an ALIGN attribute to your image HTML code.
Following is an example image displaying on the left with the text wrapping
around the image to the right.
By placing the above code within
your HTML, your image will be displayed on the left hand side with your text
displayed on the right.
As you continue to type your text, it will automatically format itself to
wrap around the right side and the bottom of your image. This example has
been set up with a table to keep the text neatly aligned within a limited
amount of space. This table's width is set up to span 50% of the page
width. |
To align your image to left and your
text to the right, add ALIGN="left" to your image HTML code like this:
| <IMG BORDER="0"
ALIGN="Left" SRC="yourimage.jpg"> Your Text |
Following is an example image displaying
on the right with the text wrapping around the image to the left.
By placing the above code within
your HTML, your image will be displayed on the right hand side with your
text displayed on the left.
As you continue to type your text, it will automatically format itself to
wrap around the left side and the bottom of your image. This example has
been set up with a table to keep the text neatly aligned within a limited
amount of space. This
table's width is set up to span 50% of the page width. |
To align your
image to right and your text to the left, add ALIGN="right" to your image
HTML code like this:
| <IMG BORDER="0"
ALIGN="Right" SRC="yourimage.jpg"> Your Text |
Wrapping your
text around your image will enable you to give your content a much more
professional look.
|
|
