How to Wrap Text Around Images Using HTML Programming

A simple HTML document.

Wrapping text around an image can give you more variety in your layout, creating a varied and more professional look with images on your web page.

Instructions

1. Wrapping text around an image requires just a few simple tags in your HTML code. Images are wrapped using the "align" tag in reference to the text that surrounds the image. The tag variations include: right, left, top, bottom, texttop, middle, absmiddle and baseline. The left and right tags are horizontal tags. The top, bottom, texttop, middle, absmiddle and baseline are all vertical tags. The method is: align="tag". Example: <img src="image.jpg" align="right" />

2. 

   Below are the alignment tags and descriptions of their functions:- “left” aligns the image to the left margin, wrapping the text, which follows the image.- “right “aligns the image to the right margin, wrapping the text that comes before the image.“ top” aligns the top of the image with the adjacent text.- “texttop” aligns the top of the image with the top of the highest text.- “middle” aligns the middle of the image with the adjacent text.- “absmiddle” aligns the image with the middle of the line.- “baseline“ aligns the image with the baseline of the line.- “bottom “aligns the bottom of the image with the adjacent text.Click on the image to see an example of the tags and their HTML-generated output.

3. 

   Basic text and image alignment can also be achieved by entering the image and text in an HTML table. By inputting text in one column and an image in adjacent column, a very similar effect can be accomplished.Click on the image to see an example of alignment using tables.