In this exercise you will be creating an image and then inserting it in the Web page you have created in exercises two through four.

In this exercise you'll perform a variety of tasks:

  1. First, you'll create an electronic image. You'll save this image as a .gif file (we'll talk about what that is in a moment).
  2. Next you'll use the file transfer utility of SSH to upload your image to UHUNIX.
  3. You'll use the change mode command to open your image for public viewing.
  4. Then you'll put an image tag in your HTML file.
  5. You'll view your work using a Web browser.
  6. Finally, you'll send the URL to your instructor to receive credit for your work.

Why Add a Graphic to a Web Page?

There are several reasons for including an image in a Web page. You can use an image to enhance the usability of the site, to impart information, or simply to add visual interest.

Enhancing the Usability of the Site

Button labeled search

Buttons are widely-recognized images and thus can be used as easy-to-see links.

Clickable image maps are used to facilitate retrieval of information about particular geographic areas. Click here to see a primitive example of an clickable image map. However, clickable image maps are problematic for persons who are blind, have low vision, or are using a text-only browser.

Imparting Information

Textual data is important in conveying information. However, as Tittel, Price, and Stewart pointed out in their work on Web graphics, words are not our original form of communication. Long before humans began to communicate using language they learned to process visual information about their environment. Thus our minds are capable of processing visual information rapidly. Images can be an effective tool in giving an overview of complex data.

Here, for example, is a graph illustrating the spread of the MS SQL Slammer computer worm. While we may not immediately understand all the nuances, we can readily see from the graph the peak time period of attacks upon computers around the world.

graph of port traffic during a worm attack

Adding Visual Interest

Image of two 
merging galaxies
"Eyes in the Sky" image of two merging galaxies courtesy NASA/JPL-Caltech

Images can also be used to add visual interest to a site in which the information is largely conveyed through text.

Backgrounds can be used to give color and texture to a site, with little extra downloading time. This is because an image specifically created for use as a background is often small—sometimes only 10 by 10 pixels in size--and this small image is then tiled across and down the screen to create the background. Thus the viewer only has to download one small file. Your browser generally tiles images rapidly, so users don't usually notice the process.


small tile of dark purple patterned 

Image tiled as background:

Welcome to the Hobbiton Library!

We hope you find what you need here.
We have lots of materials for hobbits of every age!

Using the same background for pages throughout your Web site can pull the site together visually. However, be careful about patterns. A busy pattern such as this one can make it difficult to read the text that's placed on top of it. Be sure to use a high contrast between the color of the background and the color of your text. A black font would be almost impossible to read against this dark pattern.

Images can also be used to divide the space on the page. Intersecting lines not only divide the space into a grid but also draw the eye to the point of intersection, suggesting that whatever is placed near the intersection is important information.

Types of Images

There are two broad categories of computer graphics: vector graphics and bitmap images, also called raster images.

Vector Graphics

small, clear happy 
face larger 
happy face with no distortation largest 
happy face still with no distortion

Vector graphics use mathematical objects called vectors to define the lines and curves in the image. Since representation of the image is done mathematically you can move, resize, or change the color of objects in a vector-based image without losing the quality of the graphic. Powerpoint and Adobe Illustrator use vectors to create graphics.

Vector graphics are good for drawing circles, lines, squares, and other geometric shapes. They are also good for making poster images as they can be enlarged without loss of image quality.

Bitmap or Raster Images

small clear image of a 
purple flower
larger blurry image 
of a purple flower

Bitmap images, also called raster images, use a grid (referred to as a raster) of small squares to represent a graphic. These small squares are called pixels. Each pixel is assigned a specific location and color value. A bitmap image contains a fixed number of pixels. If you enlarge it, it loses image quality. However, a bitmap image is better at representing subtle gradations of shades and color. Therefore bitmap images are the most commonly used electronic medium for photographs.

In general, an image used in a Web page must be created in or converted to a bitmap graphic.

Image selection

Web Resources

flaming text that reads

There are a wide variety of sites on the Web where you can create or download images for your Web portal. is a good site for creating buttons, banners, or backgrounds (animated or static). Some sites specialize in images for teachers. Others cater to a broader clientele.

Copyright Issues

Be careful about ownership. Unless a site specifically states that you can use their images, refrain from doing so. Putting an image on the Web is a form of publishing. Utilizing an image created by an individual or company without permission puts you in violation of copyright law. You also cannot download an image, alter it, then add it to your Web page. Copyright law assigns exclusive rights not only to reproduce the original work but also to prepare derivative works based upon the copyrighted work.

Some sites will allow you to use their images as long as you give credit to them on your Web or place a link on your page to their Web site. Be sure to read the agreement before utilizing their images. For example, the Jet Propulsion Laboratory Image Use Policy allows the use of JPL images but requires a user to "use a credit line in connection with images." The wording of the credit line is given in their policy.

In addition, please keep in mind that the University of Hawai'i does not allow commercial Web sites on any university computer.

Image creation

There are a variety of ways to create images for use in your Web portal:

Scan an existing photograph

If you have an existing photograph or drawing you can scan it to create a digital version. Just be sure to use a small photo and scan it at a low resolution. Although a low resolution can result in an image of low quality, higher resolutions result in larger file sizes. Your viewers may be attempting to view your site using a dial-up modem. The longer the download time the greater the likelihood that your viewer will stop the download midway through the process and move on to another site. A potential user of your site won't appreciate your high-quality image if she never sees it. 72 pixels per inch and a 40 by 40 pixel image size are tolerable. We'll talk about compression modes for images later.

If you really want your viewer to see a large, high-definition photograph, create two digital versions. First, create a small, low-resolution image to serve as an introductory image. Then provide a link to your second, larger, high-resolution image. Be sure the warn the viewer of the size of the file of the larger image in your link text.

Use a digital camera to create a digital photograph

Today many people own digital cameras. The image quality of such cameras is improving. Be careful not to overload the opening Web page with digital photos of you, your family, your cat, dog, parakeet, and the family hedgehog. This will extend the loading time of your Web page considerably. Better to let the viewer choose to view selected photographs by putting them on separate pages, with links from your main Web page. If you have access to Photoshop you can create postage-stamp-size images and use them as links to the larger graphics.

Create an image with drawing program

You can also create an image with a drawing program. In fact, we're going to use Powerpoint to create an image in this exercise.

Compression types

Regardless of the manner in which an image is created, it must be stored as either a GIF or JPEG file in order to be handled correctly by most browsers.

GIF files

GIF (some people pronounce it "jif") stands for Graphics Interchange Format. The format is properly referred to as CompuServe GIF. GIF is a compressed format, thus minimizing the time it will take to download an image. The GIF format is generally best for computer graphics with geometric shapes, line drawings, or pie charts. Notice that when we enlarge a GIF-format computer graphic the edges are sharp and clear.

JPEG files

JPEG stands for Joint Photographic Experts Group. As the name implies, this format is used for photographs or other continuous-tone images. JPEG uses a compression scheme that reduces the size of the file by discarding what it considers to be nonessential data for display of the image. The image is decompressed when displayed. Because the JPEG compression scheme actually discards data it is considered a "lossy" scheme--an image compressed then decompressed will not be the same as the original. Some programs will allow you to select the level of compression. Greater compression results in a smaller file but with greater loss of image quality. Notice that when we enlarge a section of a jpeg-formatted photographic image and examine the edge of a petal, there is a gradation of color rather than a sharp demarcation at the edge of an object. This is characteristic of the world we see. Thus JPEG images tend to look more "natural" than GIF images.


Some programs will allow you to produce "interlaced" GIFs. These are optimal for Web pages.

With a non-interlaced image, the image must completely load before the text appears and the browser must wait to receive all the image data before it can display the picture. This can be frustrating to the viewer, as there can be nothing to look at while waiting for the image to download.

An interlaced image does not need to completely load before the text appears. The image is saved, and later displayed, using successive passes in which additional data is added and the image gradually comes into focus. This gives the viewer something to look at as the image gradually becomes clearer. However, an interlaced GIF file is generally 4-5% larger than a non-interlaced GIF.

Animated GIFs

An animated GIF consists of several images packaged together in one file and displayed in sequence. The effect is like thumbing through a cartoon picture book. The brain supplies the missing intermediary images and thus interprets the sequential images as motion. Animated GIF files are necessarily larger than static GIF files because of the multiple images contained within.


Phase One: Create a GIF-format image using Powerpoint

In this exercise we'll create a GIF-format image. There are many programs that can do this. We'll use Powerpoint, since most personal computers have this program installed.

Step One: Create a New Blank Presentation

If Powerpoint is not running when you begin work on the exercise, start by opening Powerpoint.

Some versions of Powerpoint will automatically start a blank presentation when you run the software. If not, if you are working in Windows 7 click on the Microsoft Office Button image of the microsoft office 
button and click on New. (In older versions select New from the File menu.) Double-click on Blank Presentation.

Step Two: Select the "Title Only" layout for your slide

Click on the Home tab to bring up the Home menus.

image of the Slides box

In the Slides box, click on Layout (outlined in dark pink in the image above).

image of the layout pop-up window with
title only selected

Select the Title Only layout (see image above).

Step Three: Add background color

First, let's add some background color to your image.

image of the main menu with design highlighted

Click on the Design tab (see image above).

image of the Design menu with
background styles highlighted

Then from the Design menu click on Background Styles (see image above).

image of the background styles
pop-up window with Format Background highlighted

A pop-up window should appear. In this pop-up window click on Format Background (see image above).

image of the format background box with
the color button highlighted

On the Format Background pop-up window click on the Color button (see image above).

image of the color box with More Colors

At this point you could select from the small number of color options presented to you. However, you can get a much wider selection by clicking on More Colors (see image above).

image of colored hexagons

This should give you an extensive palette to choose from. Select a color by clicking on a colored hexagon. For this exercise a light background color would be best. Check to make sure that your transparency is set to 0% so that your rectangle will be visible on your slide. Click on OK.

Behind the Format Background pop-up window you should see the background of your image turn the color you have selected.

When you return to the Format Background menu click on Close.

The background of the slide should now be the color you selected.

Step Four: Add a title

image of Powerpoint slide with click to add
title highlighted

To add a title, click within the rectangle marked "Click to add title" and type "Fun with Geometry Resources" (you can give it a more inventive title if you choose).

image of Powerpoint slide 
with fun with geometry resources as title

Your slide should now look like the image above, but with your choice of backgrorund color.

Step Five: Draw a Rectangular Solid

Click on the Home tab.

image of the drawing menu

From the Drawing group click on the rectangle (shown inside the dark-pink box in the image above).

image of Powerpoint slide with blue rectangle

Place your mouse anywhere on the left side of your slide, press the left mouse button, and drag your mouse diagonally down and to the right. When you release your button you should have a rectangle like the one shown in the image above.

image of shape fill menu

Let's change the color of your rectangle. Click on your rectangle to select it. Click on Shape Fill to bring up the Shape Fill menu.

From the Shape Fill menu click on a color.

image of Powerpoint slide with purple

Your rectangle should now be filled with the color you selected.

image of part of drawing menu with shape
effects highlighted

Now let's give your rectangle some depth. Make sure your rectangle is still selected. From the Drawing menu select Shape Effects.

image of shape effects menu with a
three-dimensional box highlighted

From the Shape Effects menu select Preset. From the Preset menu click on the three-dimensional box shown in the picture below.

image of a Powerpoint slide with
three-dimensional purple box

Your rectangle should now look like the three-dimensional box in the menu.

Step Six: Draw a Sphere

image of drawing menu with circle

From the Drawing menu click on the rounded object (shown inside the dark-pink box in the image above).

image of Powerpoint slide with purple box
and blue circle

Move your mouse to an empty space on your slide. Holding down the shift button with one hand and holding down the left mouse button with your other hand slide your mouse diagonally down and to the right. This should draw a circle. (Holding down the shift button while drawing your figure keeps the object circular rather than oblong.)

image of gradient menu with arrow pointing to
More Gradients

Be sure that your circle is still selected. From the Drawing menu select Shape Fill. From the Shape Fill menu select Gradient. From the pop-up box that appears select More Gradients.

image of detailed fill menu with Radial
selected and an arrow to a circle with blue in center

From the More Gradients box select Gradient Fill. For type chose Radial. For direction choose the center box, which will form a gradient from the center. Pick any color you would like. For this effect to be visible you will need to pick a medium-dark shade. Change the transparence to about 53%. Click on the Close button.

From the Drawing menu select Shape Outline. From the pop-up box select Weight. Now select 1/4 pt. This is the thinest line.

image of Shadow menu

From the Drawing menu select Shape Effects. From the pop-up menu select Shadow. Select the center box in the top row under the word Outer, as shown in the image above.

image of colored circle with special effects

Close out the box. Your circle should now look like the circle in the image above but with your own color choice.

Step Seven: Draw a Shape of Your Choice

Add an additional shape to your image. You might choose, for example, to draw a polygon of greater than four sides. Fill your shape with a color of your choice. Add any effects you wish (other than animation, which will not work when saved in the next step.)

Step Eight: Save Your Image As a GIF file

When you've finished creating and arranging your objects, from the File menu select "Save."

You'll need to change the Save as type selection.

From the Save as type menu select GIF Graphics Interchange Format (*.gif)

Give your file a name. The more descriptive the better. Six months from now you'll want to be able to tell what's in the file from the file name. I would suggest fun_with_graphics.gif

Click on the Save button.

A dialog box will pop up asking if you want to export every slide in the presentation or only the current slide. Click on "Current slide only".

You are saving your image as a GIF file because the image consists primarily of geometric figures. Saving it as a GIF file should give your geometric figures cleaner edges than would saving your image as a JPEG file.

Phase Two: Upload Your File to UHUNIX

As before, establish a connection to your Internet Service Provider or use a computer with a permanent Internet connection such as those here at LIS.

Click on the SSH Secure File Transfer Client icon.

From the File menu choose Connect.

Enter as your destination.

Enter your UH userid for User Name.

Leave the port number at 22 and authentication method as password.

Then press the Connect button.

Enter your Password and click OK.

When the login process is complete in the right-hand window you should see the files and subdirectories already present in your UHUNIX personal directory. Double-click on public_html to move into that subdirectory.

In the left-hand window you should see files and folders that exist on your computer.

Double-click on the name of the directory in which you have stored your image file.

In the left-hand window use your mouse to click on the name of your image file (fun_with_graphics.gif), then drag it into the right-hand window.

When the upload is complete your image file should appear in the right-hand window. Check to see that this is so. If it is not listed, try the upload procedure again.

Phase Three: Open Your File for Public Viewing

In the right-hand window right-click (click on the right-hand button of your mouse) on the name of your image file.

From the pop-up menu that appears select Properties.

In the Permissions Mode box type 755.

Click on OK.

Disconnect from UHUNIX and close the SSH Secure File Transfer application.

Phase Four: Add an Image Tag to Your Test File

In order to add your image to your test Web page you will need to add an image tag.

Step One: Open Your File for Editing

As before, establish a connection to your Internet Service Provider or use a computer with a permanent Internet connection such as those here at LIS.

Using the SSH Secure Shell Client log onto just the way you did in Exercises Two, Three, and Four.

Once you've logged onto UHUNIX, change to your public_html directory by using the change directory (cd) command:

cd public_html

Open your test HTML file for editing using Pico by typing pico followed by your file name.

pico test_file.html

Step Two: Add an Image Tag

Place your cursor between the beginning and ending BODY tags.

Now type in the tag. Start with the beginning bracket, then type IMG. This stands for Image.

Follow this with a space. Then type the letters SRC, followed immediately by an equals sign. SRC stands for Source. Now, with no space following the equals sign, type the name of your file in quotation marks. Be careful to use the actual case of the letters in the file name. You'll find that some graphics programs automatically use upper-case letters for file extensions. Remember, UNIX is case sensitive. (By the way, I am not showing all your previous text and tags in the example below only to conserve space. You do not need to delete anything.)

donna's LIS 670 test file page

<IMG SRC="fun_with_graphics.gif">

Aloha, World! This is the test file of donna.
<H1>Humongous Header 1</H1>
<H2>Hugely Popular Header 2</H2>
<H3>Hardly a Header 3</H3>


Step Three: Insert an ALT attribute

An ALT tag provides a textual alternative to the image. This is essential for persons who are blind or have low vision and are using a screen reader. If your image conveys information, such as a site name or link description, be sure to include the same information in the ALT attribute.

Type ALT followed immediately by an equal sign, with no space in between. Then put your textual description of the image in quotation marks. Now insert your ending bracket.

Let's include a line-break tag so that the text following the image will appear on the next line.

donna's LIS 670 test file page

<IMG SRC="fun_with_graphics.gif" ALT="Graphic of solids entitled Fun with geometry resources">

Aloha, World! This is the test file of donna.
<H1>Humongous Header 1</H1>
<H2>Hugely Popular Header 2</H2>
<H3>Hardly a Header 3</H3>


Step Four: Save Your File and Exit Pico

First, save your file by holding down the Control key and typing a lower-case o.

Ctrl + o

When the system presents you with your file name press Enter to accept it.

To exit Pico hold down the Control key and press x.

Ctrl + x

Phase Five: View Your File

As before, use either Firefox, Netscape, or Internet Explorer. (When creating your Web files for your portal, be sure to view your portal using more than one browser to ensure that your web pages work with different browsers.)

Remember, the address is:[your UHUNIX userid]/test_file.html

For example, if your userid is jdoe then your address would be:

Phase Six: E-mail Your Instructor with the URL of Your Test File

Once you have completed all the previous steps in the exercise, send me an e-mail message with the full URL of your test file.

The full URL includes the protocol portion of the address (http://). So it would be like, substituting your user id for jdoe.

My e-mail address is:

This is the end of the instructions for Exercise 5. Good luck!