Images

Use a graphics editor to perform common tasks for manipulating an image,
and use the IMG tag to add the modified image to a Web page.


Graphics of all kinds are used extensively on the Web.
It isn't even uncommon to load a page that is made up of 100% graphics.
This makes it important to learn how to work with images.

First, Lets experiment with finding and adding a picture to your page!

Find a picture on the Web that you would like to use.
(Perhaps a picture of your favorite animal etc.)
Save the picture in the same folder as a file you are working on.
(Try clicking on the image with the right mouse button to save it.)
Be sure to use a simple name of less than eight letters.

To place images in a document, use the IMG tag, which should look like this:

<IMG SRC="file.gif">

For example, to insert the picture "file.gif"

Remember the picture must be in the same folder as the HTML file!!

You can also do some interesting things with the border attribute:
<IMG BORDER=5>

Now, practice viewing web with image viewing off.
HTML provides a mechanism to tell readers what they are missing on your pages.

The ALT attribute lets you specify text to be displayed instead of an image.
You should try to include alternate text for each image you use in your document,
which is a courtesy to your readers. Some browsers cannot display images,
while some users also turn off image loading even if their software can display images…
esp. if using a slow modem or have a slow connection.

For example:

<IMG SRC="UpArrow.gif" ALT="UP">

UpArrow.gif is the picture of an upward pointing arrow. With graphics capable viewers that have image loading turned on, you see the image, but otherwise you see the word up.

See Image Tag, Border and ALT Text Attributes Castro pp. 78-79 (alt. pp. 82, 83)

We will begin by using common graphics editors and tools found on the Web for free (or near free) These programs are particularly often useful for converting and resizing images.

Paint Shop Prohttp://www.jasc.com/ (Trial 60 Days)
Here are some tutorials for Paint Shop Pro
http://www.jasc.com/tutorials.html
http://mardiweb.com/web/

Graphic Converterhttp://www.lemkesoft.de/

See Image Tools Castro p. 306 (alt. p. 352)


Lesley ECOMP 6009   © 1999 Mary Hopper mehopper@world.comUpdated 12/01/99