More Alignment

<IMG ALIGN="?"> aligns an image.

Using the image align tag, you can control where the image is placed on the page. For instance, you can line it up on the left:

<IMG ALIGN="LEFT" SRC="anikokosax.gif">

Which pushes it to the left:

anikokosax

Or you can line it up on the right:

<IMG ALIGN="RIGHT" SRC="anikokosax.gif">

Which pushes it to the right: anikokosax

Centering an image is a little trickier, because <IMG ALIGN="CENTER"> doesn't work on most browsers. Instead, you'll have to first center the paragraph, with <P ALIGN="CENTER"> (even if you don't have any text), and then place the image.

So, to center the anikokosax, we'd write:

<P ALIGN="CENTER"><IMG SRC="anikokosax.gif">

And it would appear like this:

anikokosax

Image Borders

<IMG BORDER="#"> sets the border size of an image

The image border is the line that appears around the edge of a picture placed on a Web page. Normally, this border will only appear if you use the image as a link; however, you can create a border of any size around your image by using the <IMG BORDER="#"> tag, and replacing the # with a border size, from 0-99, 0 being the smallest.

You can also prevent a border from appearing around a linked image by setting the border size to zero (<IMG BORDER="0">).

Our normal image, with the border unspecified has no border at all:

<IMG SRC="anikokosax.gif">

anikokosax  graphic

But we can add a border, using <IMG BORDER="#">.

<IMG BORDER="5" SRC="anikokosax.gif">

anikokosax graphic

<IMG BORDER="15" SRC="pointme.gif">

anikokosax  graphic

<IMG BORDER="30" SRC="anikokosax.gif">

anikokosax  graphic

 

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="anikokosax.gif"> This is a anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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!</P>

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

anikokosax 
graphicThis is a Anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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 anikokosax.gif. It may not look like a normal picture<IMG ALIGN="LEFT" SRC="anikokosax.gif"> but it has many uses. You can use it for linking things. 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 anikokosax.gif. It may not look like a normal picture anikokosax 
graphicbut it has many uses. You can use it for linking things. 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 anikokosax.gif.It may not look like a normal picture anikokosax 
graphicbut it has many uses. You can use it for linking things. 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!

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="anikokosax.gif"> <BR>This is a anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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!

Will look like this:

anikokosax graphic
This is a anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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!

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:

anikokosax graphicThis is a anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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:

anikokosax  graphicThis is a Anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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:

anikokosax 
graphicThis is a anikokosax.gif. It may not look like a normal picture but it has many uses. You can use it for linking things. 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.

Back Next

Home