|
HOT - 25 Professional Design Applications for the Price of ONE! |
| Home | Portal | WeBlog | Contact Us | FAQ | Templates | Webmasters | Downloads | Articles | Sponsors | Partners | |
|
RSS Feeds
Web Services Web Templates Graphics Stuff Tuts & Tools In the News Security |
|
Wrapping Text Around Images <img align=left> aligns an image to the left side of the page
Pictures are a nice addition to your home page, but you'll probably want to have some words with them. Here's how to put them together.... There are several ways for wrapping text around pictures, and they're controlled through the <img align> tags. For starters, you can align an image down the left or right side of a page and let the text flow around it. In this example, you can lead a paragraph off with the image, aligned left: <img src="bronze.gif" align=left> This is a button that was created using Paint Shop Pro 7.2. Paint Shop Pro is an excellent tool for creating your own graphics and images. You can get a free trial version at: Jasc Software The text will begin at the top of the image and flow down its right-hand side: But sometimes you'll want the text to begin above the image and wrap around it. In this case, you can integrate the image into the paragraph: This is a button that was created using Paint Shop Pro 7.2. And the image will appear on the left-hand side, beginning at the first line after it was inserted. The text will wrap around it: This is a button that was created using Paint Shop Pro 7.2.
This is a button
There's no way to align an image in the center of the page and have text wrap around both sides. You can, however, center an image in the page and have the text run below it. To do this, you'll need to use the paragraph alignment tag, rather than the image alignment tag, as well as a line break. So this HTML: <p align=center><img src="bronze.gif"> <br> This is a button that was created using Paint Shop Pro 7.2. Paint Shop Pro is an excellent tool for creating your own graphics and images. You can get a free trial version at: <a href=http://www.jasc.com>Jasc Software.</a>
Will look like this:
This is a button that was created using Paint Shop Pro 7.2. Paint Shop Pro is an excellent tool for creating your own graphics and images. You can get a free trial version at: Jasc Software. Wait...there's still more: If you'd like a single line of text to appear next to the image, and the rest to drop below it, you can use the <img align=top>, <img align=middle> and <img align=bottom> tags.
<img align=top>looks like this:
<img align=middle>looks like this:
<img align=bottom> looks like this: These rules may seem like a lot to memorize, but as long as you understand the concepts, you'll do just fine. Don't forget, there's no shame in looking things up. If you just don't want to memorize, you can always bookmark this page for future reference. |
 Previous Page |
This is a button that was created using Paint Shop Pro 7.2.
Paint Shop Pro is an excellent tool for creating your own graphics and images.
You can get a free trial version at:
 |
NOTE: Use of this Web Site, content or services herein, constitutes acceptance of our Conditions of Use, Privacy Policy and License. |