<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