Images

There are three image file formats that are suitable for the web (suitable meaning the formats are supported by all major browsers and HTML editors):

GIF, which is generally used for images that started life on a computer, like graphics created in computer graphics programs. The GIF format is a highly-extended format, allowing for transparent backgrounds (making it appear the image is sitting on the page). The GIF format also allows for "frames" within a single image file, allowing for animation.
JPG, which is generally used for images that started life in the "real world", like photographs.
PNG, which is a newer graphics format meant to eventually replace GIF...we'll see!

Geek Girl Taking Your Picture Regardless of the image file format, you do not literally insert images into an HTML file...remember, HTML is a text file, not a graphics file. Rather, you use the HTML IMG element to reference those images. When the browser reads the HTML file and sees an IMG element, it returns to the Internet to download the image file specified by the URL. The browser then displays the image at the location of the IMG element.

<IMG src="URL" alt="alternate_text" align="align_value" border="pixels">

        src = URL of the .GIF, .JPG, or .PNG file (required)
        alt = text to display if image doesn't (required)
        align = "left" or "center" or "right" (optional)
        border = number of pixels to create a border or "frame" around the image

To see how this works, let's take the example of the geek girl up and to the right -- that's it, smile! :-) . The name of the graphics file is "geeky-girl-camera.gif", stored in a sub-directory named "images". To include this image file into your HTML file, you'd specify:

Now, a word about the alt attribute. First, it is required by HTML! And it has several purposes, the most significant of which is that the text for the alt attribute is what displays in the browser while the image is loading, or if the image doesn't load (for example, the user can set an option to prevent downloading of images).

Second, browsers display the text from the alt attribute when you hold your cursor over an image. The alt tag is a great way to provide some additional information or assistance for images. Hold the cursor over one of the navigation buttons on this page...see what happens?

Finally, the alt tag is used by machines that "read" web pages, such as machines for the blind. So, you can see it is particularly important to use text that reflects the nature of the graphic, particularly if it is an image that is used for navigation!

Copyright © 2001 Michael J. Doyle
All Rights Reserved.

Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder

See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses

Email Mike Doyle