How To Wrap Text Around Image
One of the most challenging things that a new webmaster has to learn when building webpages is how to wrap an image around text.
The most common problems include text creeping too close images and images not being aligned properly both horizontally and vertically when placed next to text.
Always Start With The Same Image Code
Get in the habit of using the same HTML image code every single time you place an image. That way all you have to do is alter it for the page that you are working on. The code should include:
The image location (Example--"http://www.your-domain-name.com/images/your-image-name.jpg")
Alignment (Example--left, right, center)
Hspace (For horizontal alignment)
Vspace (For vertical alignment)
Alt Tag (To help search engines find your image/site)
Image Height and Width (To ensure proper display of your image without distortion)
Title Tag (So visitors will see an image description when they hover over an image)
Border HTML Code (In case you want a border around your image)
How to Wrap Image Around Text
When you want to wrap an image around text, decide which side of the page the image should appear. If you want it on the right side use ALIGN="right". Other choices are "left" or "center".
Next, adjust Hspace to gain space between the text and the image. Start with Hspace="10" and adjust as needed. Vspace is not as commonly used as Hspace but it comes in handy when you want to move an image up or down vertically. Start with "10" and adjust as needed.
Using ALIGN, HSPACE and VSPACE are the primary wrap text code needed when you want to wrap an image around text.
Using The Break Tag
Occasionally you will want to create space between the bottom of your image and where the text begins again. Using the break tag will accomplish this task. The most common break tag for this purpose is clear="all."
Other Parts of HTML Image Code
The Alt tag is extremely important. Using a keyword-rich alt tag will help search engines find your images and also your site. The Title tag is only needed if you want your visitors to see an image description when they hover over your images.
Specifying an image height and width will ensure that your images display properly, without distortion, in all browsers.
Lastly, adjust the border tag depending on what type of border you would like around your images. You can adjust weight (1 px is thin, 3 px is thicker), color and type (solid, dotted...). If you want no border, change border code to 0px.
Summary
Use the same HTML Image code repeatedly and adjust as needed.
To wrap text around an image use ALIGN, HSPACE and VSPACE.
To gain space between the bottom of an image and more text, use the break tag
Although they do not affect alignment, always use an Alt Tag and specify height and width
Optional--use Title Tag and Border as needed
by: Sandee Lembke
Advantage Of Php Include Page In Web Page Design Logo Designing: Giving Your Company A Corporate Identity Develop Your Customized Website Logo Design A Quality Website Design Company India Ennovations Provide Economical Web Designing With Affordable Prices Important Usability Points To Be Taken Care While Designing A Website About Seo Experts And Website Design In Manchester Seo And Website Maintenance Seo is It Essential For Web Design And Development Company? Fundamentals Of Web Layout Web Designers The Vital Role! Custom Social Networking Software, Do You Need It?