HTML Codes for Including Images on Web Pages

By Susan Brumbaugh, Co-Owner, Aphids Communications

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.

<img src="URL">

<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.