COMM 181

Graphics Handout

This handout is designed to introduce you to the basic process of displaying images on your webpages, using the <IMG> tag. This tag acts sort of like a linking tag. It instructs the browser to locate a document and display its contents. In this case, the document is an image. On the internet, most images end with either .gif or .jpeg in their suffixes. What's the difference between .gif and .jpeg? Image type .gif generally is used for images with flat color (cartoons, for example). The suffix .jpeg is saved for more complicated images with rich gradients of color (photographs, for example). .gif images almost always take up less memory than .jpeg images.

Linking to an image requires a tag with the following attributes: <IMG SRC = "">

<IMG SRC> tells the browser, "look for an image at the following location and display it." The location of that image is a web address, placed within the quotation marks. Here's an example:

This tag displays the following graphic:

Note: there must be no spaces within the quotation marks, just the web address.

The address should provide the browser enough information to find the image. If you are displaying an image that is not in your public folder, provide the entire address (see example above). If, however, you are displaying an image in the same public folder as the html document, you need only place the name of the image (including suffix) in your tag. Example:

Other IMG attributes

Within the alligator jaws (or duck bills), you may add other attributes such as ALT, HEIGHT, and WIDTH. ALT is used to display text while the image is downloading, to provide users a sense of what they'll see. ALT is particularly useful for text-only browsers (such as those used by the visually impaired). HEIGHT and WIDTH can be placed in the IMG tag to tell the browser the dimensions of the image. These attributes are useful if you have many images along with your text on a page. There are some browsers that take so much effort processing those images that they won't display the text for several seconds or longer, forcing the user to wait for anything to appear on the screen. With the HEIGHT and WIDTH tags, the browser can calculate the approximate dimensions of the images and display the text first. Then, while the user reads the text, the browser works to display the images. Here's an example of a tag using all of these attributes:

By right clicking your mouse, you can save an image to your hard drive. Try it and see if you can place one of these icons on a test page.

[Syllabus] [Introduction] [Policies] [Assignments] [Reading] [Check your grades] [Frontpage]