Vermont Educational Telecommunications Consortium

Adding Images to Your Web Pages

The web abounds with images and adding them to your page simply requires the use of the image (IMG) tag. You can either have a copy of the image in your web directory or know the URL of any image on the web!

You can also provide other information about the image like how it should be aligned on the web page or what text should appear in place of the image when viewed through a text-only browser.

The basic tag is:
<IMG src=filename or URL>
where filename is the name of the image that is stored in your directory, or URL is the complete web address of the image.

How to Get an Image's URL

You can find images a number of ways: browsing the web, looking through an image collection, or using your favorite search site. For example, if you try the AltaVista search site you can search for image: flowe rs and find any site that has an image named flowers.

Once you have found the image, you can save a copy of it or create a link to it. How do you decide which to do? Look around at the site where you have found the image. Does the owner state that the image is copyright and so should not be copied? Or does t he owner, as in the case of many large image collections, ask that you copy the image and not link to it? Remember that when you link to an image you are making work for the server that houses that image. Of course, when you copy an image you may be makin g an unnecessary duplication. For example, if you would like to use some of the standard bullets or buttons on your page the chances are good that they already exist on the server you are using. Making a copy is simply a waste of space. Linking to an exis ting image makes more sense.

To save a copy of an image, point to the image with your mouse and click the right mouse button (in Windows) or hold the mouse button down (in Macintosh). A pop-up menu will appear. Choose "Save this image" and save it to your disk in the usual fashion. Y ou may need to move it from your disk to your web account (see Using WS_FTP for Windows or Using Fetch for Macintosh). Be sure to move it as a binary file! Include the image anywhere on your page using the image tag described above.

To link to an image, point to the image with your mouse and click the right mouse button (in Windows) or hold the mouse button down (in Macintosh). A pop-up menu will appear. Choose "Save this image location." Place the image tag in your web file and inst ead of typing the image name, Paste the location of the image you just clicked on.

Other Image Tag Features

Many people browse the web with text-only browsers or with images turned off. Often the browser will display the word "image" where you have place your image. To provide some information for these browsers, use the ALT feature in the image tag. For exampl e, to let someone know that your image is a logo you would use:
<IMG SRC=logo.gif ALT="Image of Our Logo">

Another feature of the image tag allows you to control how text will be aligned with the image. The ALIGN feature can control where the image is placed on the page, or how the text will be aligned next to it. Here are some examples:

<IMG SRC=spacbak.gif ALIGN=left> Note that this text will wrap around alongside the image. The Top, middle, and bottom features do not allow text to wrap next to an image.

<IMG SRC=spacbak.gif ALIGN=right> Note that this text will wrap around alongside the image. The Top, middle, and bottom features do not allow text to wrap next to an image.

Creating Your Own Images

Images can be acquired for use on the web in a number of ways. If you have a drawing or painting program you can create your own. If you have a scanner, you can scan images from photogrpahs or other print sources. PhotoCD is also an easy way to get images to the web. Other possibilities are digital cameras and video cameras. Any image that can be created or captured and stored as a digital file, as long as it is saved in GIF or JPEG format, can be used for the web.

Combining the Image Tag with Links

Want to link a small image to a larger image? Or some text to an image? Or an image to another web page? All variations are possible on the web. Remember that the anchor (<A>) tag is used to create links. The format is: anchor--where you will go whe n you click--something to click on--end anchor, like this:

<a href=http://www.uvm.edu> Click here to go to UVM's page</a>

In the above example, clicking on the words "Click here to go to UVM's page" will take you to the UVM page.

Images tags can be included in a similar way. Here are some examples:

Clicking on the words "Picture here" would lead to the image "flowers.gif":
<A HREF=flowers.gif> Picture here</A>

Clicking on the image "stars.gif" would lead to the UVM page:
<A HREFf=http://www.uvm.edu> <IMG SRC=stars.gif> </a>

Clicking on the image "stars.gif" would lead to the image "galaxy.gif":
<A HREFf=galaxy.gif> <IMG SRC=stars.gif> </a>

Go to the beginning of
the Web Tutorials

© Vermont Educational Telecommunications Consortium, Inc.
E-mail: webmaster@vetc.vsc.edu

Updated by: Hope Greenberg
July 10, 1996.