Greetings, Better Builders, and welcome to the fifth issue of "Handcrafted," the Better Builders newsletter, straight from the screens of Tripod and Webmonkey. Last time, we introduced you to making small, fast graphics for your Web site. Now we'll show you how to get those images right where you want them on your page.

If you missed the first part of our image tutorial, or if you want to reminisce about the good ol' days, check out the "Handcrafted" Archives.

So, you've created the perfect illustration of a stapler for your "Ode to Staplers" site. It's a lovely image called "stapler.gif," and somehow manages to capture both the majestic utility and madcap insouciance of the stapler. And since it's only 8K in size, it'll download quickly. Now, how do you add it to your Web page?

All you need to remember is this one simple tag:

<IMG SRC="stapler.gif">

IMG SRC stands for "image source." It tells the browser that you want to insert a picture, and that it should use the image file called "stapler.gif." The image will appear wherever you put the IMG SRC tag in your code.

Here's something to keep in mind: You need to make sure the browser knows where "stapler.gif" is. As long as that file is in the same directory (folder) as the HTML file you're working with, then you can just use the above code. However, if you store all of your images in another folder (which is a pretty common practice — it helps keep things a little more organized), you need to tell the browser that. Let's say your images are kept in a directory called "stuff." Then the HTML code would look like this:

<IMG SRC="stuff/stapler.gif">

This lets the browser know it should look in the "stuff" folder for the necessary file. You are then using a relative URL — the URL is explaining where the image file is relative to the current file you're dealing with. You could also use an absolute URL, which may look more familiar:

<IMG SRC="http://www.whatever.com/stuff/stapler.gif">

But if your image is there on the same server along with your HTML files, you're better off using the relative URL since it will take the browser less time to locate it.

There is no closing tag for IMG SRC, so the above code is all you will need. By default, the image will be placed on the left-hand side of the page, unless you're sticking it in between some text or other images (more on that later). To center it, just put some <CENTER> tags on either side of the IMG SRC tag. If you want to have greater control over the arrangement of images and text, you may want to fire up a table and use that to organize everything. (For details on table making, check the third issue of "Handcrafted.")

To control the placement of the text next to your picture, you need to use the ALIGN attribute. Let's say you have this chunk of code:

<P>Here is a picture of my stapler. <IMG SRC="stapler.gif">

Most browsers, by default, would place the stapler picture right after the text, so that the bottom of the text is aligned with the bottom of the image. This may be what you want, or it may mess up the spacing of the text. By using ALIGN in the IMG SRC tag, you can adjust how the image is aligned next to the text. So, if you wanted the top of the text to be lined up with the top of the image, you'd use this code:

<IMG SRC="stapler.gif" ALIGN=TOP>

You can also use MIDDLE and BOTTOM. Or, if you want the text to wrap around the picture, try ALIGN=LEFT or ALIGN=RIGHT.

<IMG SRC="stapler.gif" ALIGN=LEFT>
I love staplers. They are sleek and powerful, beautiful and deadly. I think it's fair to say that they are the panthers of the office supply jungle.

This HTML above will put the image on the left side of the page, with the text running along its right-hand side. If the text goes on for long enough, it'll wrap around the image, creating a look you see a lot in magazines or newspapers.

You can also make an image a link, which is extremely common these days. Instead of clicking on some text, you can click on the picture to go somewhere else. To do this, you use the same A HREF tag around the IMG SRC tag, like so:

<A HREF="http://www.tripod.com/"><IMG SRC="stapler.gif"></A>

This will put a border around your picture to let your visitors know that the picture is a link. (The border will be the same color as the other links on your page.) If the border ruins the aesthetic of your site, you can make it disappear by making the border equal zero in the IMG SRC tag:

<A HREF="http://www.tripod.com/"><IMG SRC="stapler.gif" BORDER="0"></A>

Remember, that's a zero, not the letter O. You can put a number in there instead of zero, and that will make the border bigger. (The larger the number, the bigger the border — try putting in "1,000" and watch in horror at the results!)

Another attribute you can add to the IMG SRC tag is the size of the picture, by specifying its HEIGHT and WIDTH. The image editor that you used to create your picture should be able to tell you how big the image is — in other words, how many pixels high and wide it is. Once you know the dimensions, you can stipulate them in the tag:

<IMG SRC="stapler.gif" HEIGHT="35" WIDTH="70">

Why would you want to do this? Well, if you don't, browsers will have to figure it out by themselves, which takes longer. Another perk is that if you happen to put the wrong dimensions in, the browser will stretch or compress the picture to fit the specified size. This isn't usually a good thing, but if you read the TIPS section below, you'll learn how it could result in some interesting effects.

So that's about it for images. They can make the difference between a drab, text-heavy page and a picturesque, drab, text-heavy page. Use them wisely.

See the HTML code used in this lesson in action!

HINTS, POINTERS, and TIPS o' the TRADE

One of the older tricks on the Web is the single-pixel GIF. What you do is make a tiny little image that consists of only one pixel, so it loads extremely quickly. Then, in the IMG tag, you set the HEIGHT and WIDTH attributes to whatever size you want, and the browser will stretch the image out to fit those dimensions.

What possible use could this have, you may be wondering? Let's say for some reason, you want a big green square on your page. Instead of creating a huge square with a big file size that takes forever to load, why not make a tiny green square and have the browser stretch it out for you? It'll look the same, but will download much more quickly.

If the pixel is transparent, then you can use it as a spacer. Put it in front of some text, for example, then have the browser make it a little wider, and you have an indented paragraph.

This is really a hack, though — a sneaky workaround. The main problem with it is that many people don't load images on Web sites. Either they're using a text browser like Lynx, they have a slow connection and don't want to wait around, or they're just plain sick of looking at fancy Web graphics. So, if they're not looking at your images, then these single-pixel GIFs won't be helping matters. They may, in fact, make the layout even more confusing.

Because some people won't see your images, it's always a good idea to add ALT text to the IMG tag. This is the text that people will see if the image isn't loaded. The code looks like this:

<IMG SRC="stapler.gif" ALT="This is a picture of a stapler">

That way, the person at least knows what they're supposed to be seeing.
It's the decent thing to do.

RESOURCES

Organize Your Site

Align Images

Make Image Borders

Wrap Text