Aphids Communications

HTML Codes for Including Images on Web Pages

By Susan Brumbaugh, Co-Owner, Aphids Communications


Main Index: Very Basic Help with Images


Once the image is in your web directory, you can use HTML tags to insert the image at a specific point in your document.

Most introductory HTML pages have that information. In particular, I'd recommend (these links take you directly to the discussion on images):

Chapter 7: Images
http://www.cwru.edu/help/introHTML/TCh7.html
Part of Introduction to HTML
4.14 IMG (In-line Images) Element
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/image.html
Part of Introduction to HTML (a different one)
Including external files
http://kcgl1.eng.ohio-state.edu/www/doc/htmladv.html#inc
Part of How to write HTML files
Extensions to HTML 2.0
http://www.netscape.com/assist/net_sites/html_extensions.html
This page from Netscape has a section on image tags that only some browsers can interpret. They are interesting and look nice on Netscape but may look very odd on other browsers.
The basic format is:
<img src="URL">
where URL is the location of the image you want to display. If the image, called image.gif is in the same directory as your web page, you can use a relative URL as in the following HTML code:
<img src="image.gif">
Note that if your web files and images reside on a server where the filenames are case sensitive (such as a unix server), you'll need to be sure you use uppercase and lowercase filenames appropriately. That means there's a difference between "IMAGE.GIF" and "image.gif". Filenames are usually (but not always) lowercase, so if you've typed the filename as all uppercase, and the image is not loading, that may be why.

If the image is in a subdirectory called, for example, images, use:

<img src="images/image.gif">

I always use an alt attribute with my image statements. That means that text browsers won't try to display the image. It also allows you to describe the image for text browers. Some graphical browsers like IE will display the text when you hover over the image with your mouse. Examples using the alt attribute:

<img src="URL" alt="">
<img src="URL" alt="Photo of my family">

There are many other options you can use with this tag. They are described very well in the above documents, so I won't repeat that information here.

More about specifying and modifying image size using HTML tags is available in the section on creating thumbnail images.


© 2004 by Aphids Communications, L.L.C., all rights reserved. Text, graphics, and HTML code are protected by US and International Copyright Laws, and may not be copied, reprinted, published, translated, hosted, or otherwise distributed by any means without explicit permission of the copyright owner. Aphids and Aphids Communications are trademarks of Aphids Communications, L.L.C.