Writing HTML | About | FAQ | Alumni | Tags | Index | previous | next |

7. Graphics Graphics à la "the Web"

Sending text over the Internet is just old fashioned e-mail. People have been doing it for decades! When you can include Pictures, your message can be much more informative! Is the going rate still 1000 words per picture?

Objectives

After this lesson, you will be able to:

Lesson

Lean back and relax! This lesson is mostly an introduction to graphics for the World Wide Web. But we'll have you do a little activity below.

The Web's Graphic Format

There are numerous file formats for computer graphics. PICT. GIF. TIFF. It sounds like cryptic poetry. Then there is EPS, BMP, PCX, JPEG...

The way a web browser displays graphics is HTML format indicates the location of a graphic file in a single format that can be interpreted by different types of computers. For example, when the information in that format is received by your Macintosh computer, the web browser knows to display it as a picture format for Macintosh. However, when that same information is received by your Windows browser, it is displayed as a Windows graphic.

In technical jargon, we would say that this picture format is platform independent. HTML itself is platform independent, since plain text characters can be understood by any computer.

The standard format that can display within a web page is GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color.

The other file format used on the web is JPEG (named after the Joint Photographic Engineering Group that designed this format). According to HTML 2.0 standards JPEG images are not displayed in the page but are displayed in a separate window, using an external "helper" application. While several browsers support in the page JPEG graphics, it is not yet standard. JPEG compression is very effective for photographic images; sometimes the file size can be decreased by a factor of 10 (i.e. a 1500 kb file reduced to 150 kb).

For more information about these file formats, see OTIS' page on Graphics File Compression

Several graphics programs have built in features to save files as GIF format. If not, listed below are several shareware programs/utilities for performing the conversion. You can look for them using the Virtual Software Library

Graphics Applications...

Macintosh

Windows

Some Points to Consider When Using Graphics

For this tutorial, you do not have to use one of these graphics programs. We will show you how to save a copy of any image that you can see on a web page.

However, as you begin to develop your own web pages, you should become familiar with creating pictures in either GIF or JPEG format. If your web pages include graphics, consider the following suggestions:

You may design a beautiful web page, loaded with large pictures, that may load nicely from your computer, but may be excruciatingly slow by a viewer using a slow modem over a busy network.

Saving and Including Pictures in Your web page

For the next lesson you will first need to download a copy of a GIF image of an erupting volcano (watch out for that hot lava!).

Follow these steps to save and include a snazzy picture that will be used to attract interest for the first part of your web page:

  1. Go to the web browser window containing this page.
  2. If you are unfamiliar with saving graphics files to your hard drive, first see the instructions for saving images from a web page
  3. The picture below is a reduced copy of the image. Click on it once to display/download the GIF file to your computer.

    hot hot hot lava

  4. Save it in the same directory as your HTML text file as a file named lava.gif

Check Your Work

Check to see that the file, "lava.gif", is saved in the same directory/folder as your HTML text file, "Volc.htm". If it is not there, check to see if you accidentally saved it in another directory/folder. Then, move it to the correct location.

Review Topics

  1. What are the two graphic formats used for the World Wide Web?
  2. How can a graphic file display on different computers?
  3. What are some key points to consider when including graphics in web pages?
  4. How did you save the lava graphic for use in your WWW document?

Independent Practice

Surf the World Wide Web to browse the Internet for pictures. Try to download at least one image that might be useful for your page.

Coming Next....

Write the HTML to have the lava picture displayed in your document.

GO TO.... | Lesson Index | back: "Lists" | next: "Inline Images" |

Writing HTML Lesson 7: Graphics à la the Web
©1995 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut7.htm