Referencing Images

• Adding images to your page is as easy as adding links to it. In fact, the HTML code for it is very similar.

  Unlike the anchor tag, however, your document is not replaced by the referenced image. Instead, the web server retrieves the image and actually sets it "within" the HTML document in which the reference occurs and displays them both together.

• Specifically, you will use the <IMG> tag to load images into your HTML document.

• Like the anchor tag, you never really use the IMG tag without any attributes. Instead, you will use one of several attributes.

• The attribute you will most often use, however, is the SRC attribute that specifies the location of an image that you would like incorporated into your HTML document.

• Thus, the following code would retrieve the image named "ballred.gif", that is located at "www.eff.org" in the "Icons" directory and would insert it into the HTML document.

<IMG SRC    = "http://www.eff.org/Icons/ballred.gif"
     HEIGHT = n
     WIDTH  = n
     ALT    = alternate text
     BORDER = 0
     >

• One final note about referencing images. It is very possible that someone will be viewing your page in a non-graphical way. Perhaps they are blind. Perhaps they have turned off image loading to speed up their browsing (since images take a long time to load up). Or perhaps they are using a non-graphical web browser like LYNX.

• Whatever the case, it is considered good form to always include a value for the ALT attribute in the IMG tag. The ALT attribute specifies some text that will be displayed if the image cannot be and looks like the following:

<IMG SRC    = "http://www.eff.org/Icons/ballred.gif"
     ALT    = "alternate text"
     HEIGHT = n
     WIDTH  = n
     BORDER = 0
     >	

• The IMG tag has several other attributes that we will discuss in the next few pages, but that we will include in the following table here:

Images
Introduction to Web Design | Table of Contents
Exercise Six