Join Webmonkey, it's free. Members log in.


[Learn It][Teaching Tool]

Aligning Images
[Imagemap]
<img src="?"> places an image
<img align=?> aligns an image

Before you can put an image on a Web page, you need to know the name of the image file and where it's stored on your server (its source, of course.) That way you can instruct the browser on how to find the image it needs.

The easiest place to save the image is in the same folder or directory as your HTML source file, which is where the browser will automatically look for it. If you have many images to organize, you may want to place them in a single folder, called "imag es" or "stuff," then place that folder (or directory) in the same directory as your HTML file.

My image is called "monkey.gif," and it's in a folder called "stuff," which is in the same folder on our server as this HTML file.

The HTML for my monkey image will read like this:

<img src="stuff/monkey.gif">

The picture looks like this:

Simple, huh? Now, using the image align tag, I can also control where the image is placed on the page. For instance, I can line it up on the left:

<img align=left src="stuff/monkey.gif">

Which pushes it to the left:


Or I can line it up on the right:

<img align=right src="stuff/monkey.gif">

Which - surprise! - pushes it to the right:

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 our little monkey, we'd write:

<p align=center><img src="stuff/monkey.gif">

And it would appear like this:


Got a handle on it? Do it.



Previously in HTML ...

HOMESEARCH
HELP

Copyright © 1996 HotWired, Inc. All rights reserved.