Logobeben.jpg (28941 bytes)

HTML tutorials
Š2003 by Kati Petit

Ok, text is great, but a picture's worth a thousand words, right? Here's what you can find in this section:

Images:
Basic Images
Image Links
Background Images
Creating Thumbnails

The tag you'll need to insert a picture is this:

<IMG SRC="whatever-your-picture-is.gif">

Obviously, with different text. But you knew that.

If you're going to use a picture on your page, you will want to use a .gif or a .jpg: these are net-friendly extensions. Usually, .gif is preferred, because it takes up less space and supports transparency, however, .jpg uses more colors and therefore may be a better choice for photographs. Some people also use .png. Personally, I love them (the .pngs, not the people...well, ok, the people too), but, although Microsoft claims to support them, they fail miserably, so people using IE may not see them correctly.

Now then, IMG tells your browser that what's coming is a picture. SRC gets more information; it tells your browser where on the server to find the picture, so that it can display it. But wait--there's more! You can give your browser even more information by using ALT.

Now, if, for some reason, the person visiting your site can't see the picture (they have images turned off in their browser, it's a file type not supported by their browser, or, heaven forbid, you made a mistake when writing the code and the picture doesn't work), they'll see a text description of it anyway. Like so:

Look, it's a broken picture.

Hopefully, though, they'll see something more like this (hover over the picture with your cursor):

This is a tiger bunny.

There are a lot of uses for ALT, such as giving your visitors more information, or messing with their minds. Have fun with it.

^ top

Image Links

Here ya go, a graphic link:

All you have to do is create a link, as I showed you before, and use the image tag instead of text like so:

<A HREF="www.wherever.com"><IMG SRC="whatever-your-picture-is.gif"></A>

Of course, if you do that, you'll end up with an ugly border around your picture, showing that it's a link.

If you want to get rid of it, like in the link I have above, just add the BORDER property:

<A HREF="www.wherever.com"><IMG SRC="whatever-your-picture-is.gif" BORDER="0"></A>

Of course, you can also use this to make the border bigger, but why you'd want to do that is beyond me.

^ top

Background Images

So what if you want to use an image as your background instead of just the solid color I showed you before? Simple, put it into your <BODY> tag, like so...

<BODY BACKGROUND="whatever-your-picture-is.gif">

Cool, no? However, the background image may take a while to load for your viewers, so keep that in mind. Also, if you use an image that is smaller than the page, the image will be tiled to fit. If you want to, you can use both the background color and image commands so that your page will have a colored background until the image comes in:

<BODY BGCOLOR="blue" BACKGROUND="whatever-your-picture-is.gif">

Depending on how it's used, it can sometimes be a nice effect.

^ top

Creating Thumbnails

Ok, so you've added a lot of pictures to your page... but now it takes forever to load. (If you've ever been to a site with a lot of full-size pictures, especially with a slower modem, you know how annoying that can get.) Why not create thumbnails? Thumbnails are smaller versions of the pictures you want your visitor to see. When you click on the thumbnail, you're brought to the full-size image:

(Click on my little friend the tiger-bunny and hit back to return here.)

Thumbnails can be done in a few different ways. If you're using an HTML editor like FrontPage, it may even create thumbnail images for you automatically. The way I usually do them requires JavaScript, so I'll show you a couple of simpler ways.

The first way is fairly straightforward--use two images. Using a graphic editor, like Paint Shop Pro or PhotoShop, resize the image and save it under a different filename. Put the smaller one on your page, and link it to the full-size image you want your visitor to see; in the case of my friend the tiger-bunny:

<A HREF="tigerbunny.jpg"><IMG SRC="tigerbunny_small.jpg"></A>

The second way is a little tougher, but you don't have to bother with creating two different images. How, you ask? Like so:

Using the HEIGHT and WIDTH properties, you can resize the image using HTML. The numbers (50, in my example) show the number of pixels per inch--just play around with them for a while until you get the size you want. When your visitor clicks on the link, they will be brought to the full-size image. Cool.

^ top

Back to HTML tutorials