Help Index

Back to
geocities

html
Wrapping Text Around Images

<img align=left>   aligns an image to the left side of the page
<img align=right>  aligns an image to the right side of the page
<img align=top>    aligns text along the top of an image
<img align=bottom> aligns text along the bottom of an image
<img align=middle> aligns text to the middle of an image

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.

So, for instance, you can lead a paragraph off with the image, aligned left:

<p><img align=left src="cube.gif"> This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

The text will begin at the top of the image and flow down its right-hand side:

This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

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:

<p> This is a cube. It may not look like a normal cube because <img align=left src="cube.gif"> it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

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 cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

<img align=right> works the same way, and will look like this:

This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look ....

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="cube.gif"> <br> This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you.

Will look like this:


This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you.

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:

This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

<img align=bottom> looks like this:

This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

And <img align=middle> looks like this:

This is a cube. It may not look like a normal cube because it has a mouth and teeth. But you have to remember that we are on the internet and there will be many things that you will run across that could look very strange to you. After a while you will get used to the bizarre and will probably be shocked when you see something normal!

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.

Return to Help Index

mailbox ksv@earthling.net

Top | Home | Contents | Tutorials | On-Line Classes | Free Homepage | Graphics |
Publicize | Color Chart | Gadgets | Rings 'n Things | Awards |
Personal Help |