Slacker's Guide to HTML: HTML Image Tag

Images are pretty much necessary if your site is not going to be a pile of stinking crap. So read this.

The image tag is used to "call" an image file from a computer that is storing it. If you are using Tripod then your images are stored on their drive, and the address of that image is something like http://www.geocities.com/SomeWhere/someplace/1436/myimage.gif.

If you are using another server then the image path is different. Images are one of the few essentials to a good web page. If you do not have any images on your page, then frankly, you're page probably sucks. Who wants to just see loads and loads of text? Nobody. Unless of course someone is there just to experience text, text, and more text. Displaying an image with HTML is very easy.

You need to use an image tag and you must correctly refer to the location and name of the image. There are two basic parts to the image tag: the IMG part (which means it is calling an image), and the SCR="imagename.filetype" part (which is pointing to the source of the image file).

<img src="imagename.filetype">

Where it says "imagename", you would put the image's name and location. If your image is in a folder, then you must specify which folder it's in relative to where the page calling the image is. If the image is in folder "red" which is in folder "blue", and the image is titled "dog.gif", the link would appear like this:

<a href="/blue/red/dog.gif">

Not too difficult, right?

OK. The ".extension" part of that code is where you you include the file's extension. It will most likely be a ".gif" or a ".jpg", but it could be something else, depending on the graphics program used to make it and the type of image it is. Other possibilities are .png and .bmp.

The Default Image Thing

The default image box appears when your HTML calls an image that your browser cannot find. In most cases that means that you screwed the HTML up. Check and double-check to see if you could replace the broken image icon with your actual image.

Image Border

You can add a border to the image tag if you want to. The border is a characteristic, or attribute, of the image tag. Check it out:

<img src="imagename.imagetype" border="4" width="100" height="100">

That code would create a border four pixels thick surrounding an image. The image below of two puppies and David Hasselhoff has a border of four pixels.

Image Width & Height

Including the height and width of an image is a very good idea if you're serious about how good your web pages look. Let's assume that you are using an image that says "mail me" and it's some stupid picture of an envelope you found on the Internet. Now let's also assume that the image comes up "broken", which means that for whatever reason the image won't display (you probably coded it wrong, idiot). In that case it would appear the default size of a broken image, which is probably not the size of the actual image. Not only do you now have an ugly default broken image box, but it's a different size than your image would have been and now the layout of your page might be thrown off. Here is an example of a broken image with no width and height applied to it:

Here is an example of a broken image with a specified height of 100 pixels and a width of 100 pixels:

See the difference? While it might be bigger and therefore somewhat uglier it doesn't set off the layout or any text in it's area. Which is a good thing.

The width and height tags are included inside the brackets with the rest of the image tag. Here it is for all to see:

<img src="imagename.extension" width="###" height="###">

The best way to find out the width and height of an image is to use a program like Photoshop or Paint Shop Pro. Just check out image's properties and see what the dimensions are.

Thumbnails

Slacker thumbnails are images warped by using the width and height tags. That's all they are. If you have an image that is big and takes up lots of space, then make a smaller version by scaling it down so the visitor can click on it if they wish to see the full-sized version.

Actually, let me just come clean for a second. The real way to make thumbnails is to load a smaller image onto the server and have that link to a full-scale version. If you just use one file and use the image tag to alter the size, you aren't speeding anything up for anyone. But if you make a small-scale version of the picture and have that version link to a large version, then you are actually saving the visitor some time. That way, the smaller image will load faster and people being subjected to viewing several thumbnails at once won't have to wait a long time just to see mini-pictures. Only if they want to view the full-scale, bigger file image would they click on the link. So, a thumbnail is a scaled-down copy of a fulls-size image.

Image Alternate Text

Unlike Internet Explorer, Firefox will simply not show an image which isn't found. Instead Forefox will show the alt text outright.

The ALT tag is used so that broken images still serve a little bit of a purpose and to add a text desctiption to images. It creates a text box when a mouse pointer goes over an image. This will work even if the image is not broken, and if the image is broken for whatever reason at least the visitor will have an idea of what should have been there because the ALT often serves as a good hint. Here is an example of an image with alternate text followed by a broken image with alternate text:

Click Here to Email me

As you can see the second image, the broken one, is being stretched horizontally by the alt text and it is naturally too big vertically. The functioning image is perfect in that you can read the alt text by scrolling over it and it doesn't offset any layout. And here is the code used for those two images:

<img src="envelope.gif" alt="Click Here to Email me"> + <img src="imagename.filetype" alt="Click Here to Email me">

HTML tags do not work in the alt boxes, so don't get any smart ideas.

You can use a TITLE tag to attach these boxes to text links, also. Look:

Yahoo

That link to YAHOO! had a TITLE tag included like this:

<a href="http://www.yahoo.com">Yahoo</a>

Image Alignment

By including the ALIGN element in the IMG tag you can align your pictures the left, right, or center of the document. As an example let's take a look at this picture which is aligned to the right. That's the logo for Mozilla's Firefox browser.

That was done like this:

<img src="imagename.filetype" align="right">

Ever so simple. The different ways to align your images include: center, left, texttop (aligning it to the top of the text), top, middle, absmiddle (absolute middle), bottom, and absbottom (absolute bottom) commands.

Now is as good a time as any to offer you some advice on what browser you should use. You might very well be using Microsoft Internet Explorer. If you are, then you should switch to Firefox and you should download the web developer extension (an add-on to Firefox which lets you view web pages with special features which web page developers find useful). There are three main reasons that you should browse with Firefox:

It is safer than IE
It features plug-ins and extensions that IE doesn't (like built-in Google search)
I say so

So, without further ado you should download Mozilla Firefox by clicking on this button below.

Image Maps

Image maps are images that have "hotspots". Each of these hotspots has a different link related to them. So, by clicking on different areas of the image you go to different places. Sounds simple, right? Well, It's not.

Let's use this HTML as an example:

<map name="yukyuk">
<area shape="rect" alt="YAHOO!" coords="5,5,46,90"
href="http://www.yahoo.com">
<area shape="circle" alt="Download.com" coords="88,37,26"
href="http://www.download.com">
<area shape="polygon" alt="Google" 
coords="67,70,141,57,52,100,67,71,67,71,69,71,71,69,
71,65,59,69,71,70" href="http://www.google.com">
<area shape="default" nohref>
</map>

A full lesson on image maps is coming soon.