Images Part 1

Topics on this page:

1. The <img> tag
2. The src attribute
3. Why doesn't my image show up?
4. The alt attribute
5. The border attribute

The <img> tag

The <img> tag is used to display an image on your page. The <img> tag has these attributes:

The src attribute

The src attribute is used to specify the URL of an image. This attribute is required - it tells the browser where to find the image that you want to display.

A URL can be an absolute URL or a relative URL.

Here is an example of an absolute URL: src="http://wolves.dreamhost.com/web/htmlcls/Pie.jpg". You'll generally want to use absolute URLs only when referring to images that aren't located within your own site.

Here is an example of a relative URL: src="Pie.jpg". This specifies an image that's located in the same directory as the HTML file that's referencing it. You can also refer to images that are in other directories on your site. src="images/Pie.jpg" refers to an image that's located in a directory named "images" that's immediately below the directory that contains the HTML file. src="../Pie.jpg" refers to an image that's located in the directory immediately above the directory that contains the HTML file.

Whenever possible, use relative URLs rather than absolute URLs. There are a couple of reasons for this:

• A relative URL is shorter and saves typing.
• You can keep a copy of your web pages and images on your hard drive using the same directory structure as you use on your web site, and the URLs will work on both without any changes.
• You'll have an easier time of it if you move your site to another host.

Why doesn't my image show up?

If you're having problems with an image not showing up on your page, the browser probably couldn't find it. Here's a checklist of things to check:

1. Did you remember to upload the image?
2. Did you put it in the proper directory? If you have src="xyz.gif", xyz.gif needs to be in the same directory as your HTML file. If you have src="images/xyz.gif", xyz.gif needs to be in a subdirectory named images, and this subdirectory must be a subdirectory of the one that contains the HTML file.
3. Is the name correct? Remember to check case sensitivity. Some FTP programs may change the case when it uploads the file.
4. Is the image type supported? All recent browsers support .gif and .jpg images and many support .png. IE 4+ also supposrts some additional types such as .bmp. You should avoid using these since other browsers don't support them.
5. Did you upload the image in binary format? Uploading in ascii may cause the file to become unusable.

The alt attribute

Use the alt attribute to assign a short description to the image.

• In all browsers, the alt text is displayed in place of the image until the image finishes downloading.
• In all browsers, the alt text remains displayed if the image cannot be found or if the visitor is surfing with images disabled.
• In IE 3+ and Netscape 4+ on the PC, the alt text is displayed in a little popup when the mouse hovers over the image. The Mac versions may not display the alt text in a popup.

The HTML standard defines alt as a REQUIRED attribute of <img>. You may have some images for which you don't want to have any alt text (eg., spacer gifs or perhaps images used for horizontal rules). For these, use alt="". Don't put any spaces between the two quotes.

The border attribute

If you use an image as a link, the browsers normally put a blue border around the image. This is kinda ugly. You can get rid of it with border="0".

border can also be used with non-zero values to put borders around images regardless of whether the image is a link or not. But the browsers treat this in different ways and are buggy. So I suggest that you avoid using border in this way.