Neil Macmillan & Associates Image Alignment on HTML Pages

Web Graphic Design Books now available from The Webmaster's Bookstore

Alignment Options

Image Source

To use a graphic with a page of HTML text, use the markup
<IMG SRC = "source & file type of the image">

The source of the image is defined by where the image is relative to the main document. The simplest situation is where the image is in the same directory as the main document. Then the image source is simply the name of the image file and its file type:
<IMG HEIGHT=140 WIDTH=125 SRC = "koala.jpg">.

If images are stored in a separate "graphics" directory/folder on the server:
<IMG HEIGHT=140 WIDTH=125 SRC = "graphics/koala.jpg">.

NOTE: It is good practice to specify the height and width of an image in pixels. This will let the page load much faster.

In the second image, the Markup,
<IMG HEIGHT=140 WIDTH=125 BORDER=2 SRC="koala.jpg>
creates a 2-pixel border round the image.

ALIGN=TOP

Some text here More text here. But you will note that the next line of text jumps from the top right of the document to the bottom of the image.

We will learn how to use ALIGN=LEFT and ALIGN=RIGHT to overcome this problem.

ALIGN=MIDDLE

Some text here More text here

ALIGN=BOTTOM

Some text here More text here

ALIGN=LEFT

We will now place here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas.

ALIGN=RIGHT

We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas.We will now place here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas.

ALIGN=RIGHT With Space Control

The effect of the < HSPACE=50 VSPACE=50> portion of the Markup is to create an invisible border round the image of 50 pixels. Horizontal and Vertical spacing is controlled independently, using HSPACE= and VSPACE=, respectively.

We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas.We can now place some text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place text here related to the subject of koalas. We will now place all manner of text here related to the subject of koalas.