Displaying Text With An Image Within HTML Code

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.

Partner site : online news