Image Alignment with HTML

How to Align Images on a Web Page

As well as extending the Image tag by adding Alternative text, you can use the ALIGN tag with the Image tag. However, when you use the ALIGN tag with the IMG tag you are aligning text with your image. Let's try an example to clear things up.

Change your Image tag so that it looks like the one below (we've left out the ALT tag):

<IMG SRC = "planet2.jpg ALIGN = right>

Save your work, and then view the results.

You should find that the image shifts nicely to the right hand side of the browser. However, there's a problem. Type some more text after the IMG tag, something like the one below, which is just the title copied and pasted a few times:

<HTML>
<HEAD>
<TITLE>Insert Your Title Here</TITLE>
</HEAD>

<BODY BGCOLOR = White>

This image was created using Paint Shop Pro 7<P>

This image was created using Paint Shop Pro 7. This image was created using Paint Shop Pro 7. This image was created using Paint Shop Pro 7. This image was created using Paint Shop Pro 7. This image was created using Paint Shop Pro 7. This image was created using Paint Shop Pro 7

</BODY>
</HTML>

When you've finished, save your work and view the results. The page in a web browser should look something like the one below:

Image and Text

The problem is that although the image is aligned to the right, any text we put after that will wrap to the left of the image. Similarly, if we put ALIGN = Left, the image would appear on the left hand side, and the text would wrap to the right of it. And if we didn't want the text there, but below the image, we're stuck.

There are few solutions, one of which we'll see soon. But bear in mind if you're adding either ALIGN = Right or Align = Left to an image tag then what you are doing is wrapping text around an image. You are not aligning an image independent of text.

There are some other Aligning options you can use with images and text. Play around with these and see what they do. But cut all the text from after the image to just a couple of words, otherwise either nothing will happen or you'll get strange results.

The software doesn't add these Align tags for you, so you'll have to type them all out by hand. This will give you some practice in amending HTML code.

Image Height and Width

Another thing you can do with the Image tag is specify a new height and width. This one is quite easy. Change your image tag to this:

<IMG SRC = "planet2.jpg" Height = 600 Width = 600>

The original image was 300 pixels high by 300 pixels wide. By changing the Height and Width to 600, we can double the size of the image. The image itself will still take the same amount of time to load into a browser because we haven't changed the size of the JPEG file. All we've done is to change the height and width attributes of the IMG tag.

Changing the size down to say 100 by 100 would not be practical. Because the size of the JPEG file wouldn't change. All you'll do is use up more download time to get a smaller image. So when changing image size with the Height and Width attributes, go up in size and not down.

What you're really doing is just zooming in. Unfortunately, the more you zoom in the more the quality will decrease. So don't increase the size of an image too much.

In the next part, we'll have a closer look at other attributes you can use with the IMG tag when you're design web pages.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses