The World Wide Web (WWW)

The only medium that is more congenial than FTP and Archie for locating and distributing graphics files is the World Wide Web (WWW). For graphics files, the Web offers the same basic service as FTP archives. In fact, many sites that grant access to graphics file archives using an FTP server also grant access to the same archive using a Web server. In this case, you may browse directories and download graphics files using your Web browser much the same way you would using FTP.

The added beauty of the Web is its graphics capabilities. Web browsers allow you to view files as you download them. And with some extra work, the Web server maintainer can provide thumbnail images of each file embedded in the Web page, so you can see what the image looks like before you decide to download it.

Another wonderful feature available in Web browsers is the Web Search. You can perform a search across the Web on a key word or phrase to help you locate information. Performing a search using the key phrases "file format", "graphics file", or "file archive" will turn up hundreds of pieces of information, most of which will probably be of interest to you.

For a list of some of the Web sites of most interest to graphics programmers and others interested in graphics files, see "Internet Graphics Resources" later in this appendix.

The following sections present some Web basics and describe ways you can use the Web both to retrieve graphics files and to embed them in your own Web pages.

Web Basics

The World Wide Web is a set of software programs called Web clients and Web servers. Servers contain information stored on disk, which they make available on the Internet. Clients (commonly called Web browsers) connect to the servers using a special networking protocol and retrieve the server's information. The networking protocol used by Web clients and servers is called HyperText Transfer Protocol (HTTP). HTTP is a protocol that does the following:

Each time you click a new item on a Web page, your Web browser opens a connection to the specified Web server, makes a request for a Web resource (such as an image file), receives the resource (you hope!) from the Web server, and renders, displays, or plays the file on your local workstation.

The data that is delivered to your Web browser across the HTTP link is a MIME file. This file is a wrapper containing all of the data belonging to the requested resource.

A Web browser will immediately begin displaying the resource information as it is received. The information stored first in the MIME file is a textual description of the resource data. This description is known as the Web page and is stored using a format description language known as HyperText Markup Language (HTML). HTML is a standardized language developed specifically for applications-level communications between Web clients and servers. While HTTP negotiates the transfer of data between client and server, it does not care what that data actually is. HTML is the actual hypertext data being transferred between the clients and the servers.

HTML contains the hypertext structure and format of the Web page and the links to other Web resources. HTML is, however, only a framework built from text. Graphics, sound, video, and other non-textual data are not actually part of the HTML text. They are instead separate files that are referenced as MIME attachments. When the attachments are graphics data, that data is stored and transported using graphics file formats.

Graphics on the Web

For most of its history, the Internet has been a character-based communications channel. But in 1993, the National Center for Supercomputing Applications (NCSA) released Mosaic for X (v0.10) and changed the face of the Internet forever. Mosaic is a Web browser that is not only easy to use, but also supports the display of images embedded in the text. Prior to the release of Mosaic, Web browsers were character-based, able to display hypertext links only as blue or underlined words. Graphics data could be downloaded as files by a text-only Web browser but not displayed in a useful way.

Mosaic was the first graphical Web browser. Like character-based browsers, it was a piece of communications software, capable of interpreting and displaying HTML information. But Mosaic was built as an application under the graphical user interface (GUI) of MIT's X Window System. Mosaic presented an easy-to-use menu and a scrollable and resizeable window in which to display the retrieved text (the Web page), and it supported inline graphics. Now there are a number of other Web browsers, and Netscape Navigator at this point is the most popular. All graphics data on the Web is packaged using standard graphics file formats--the same ones in use throughout the rest of the computer industry. The three formats supported by all Web browsers today are GIF, JPEG, and XBM:

GIF is the format used for most Web graphics. GIF was created by CompuServe specifically as a serial graphics data transmission format, exactly what is used by the Web. GIF uses an efficient, if legally encumbered, method of data compression that results in reasonably small files. (For information about these legal encumbrances, see "Legal Issues" below and also the discussion in the section called "LZW Legal Issues" in Chapter 9, Data Compression).

GIF images are always displayed as inline graphics. That is, GIF images appear embedded in the text of the Web page itself. JPEG images, however, are displayed as external images in a separate window. An extension added to HTML 2.0 allows JPEG images to be displayed as inline images as well. This capability has been added to many Web browsers and it is expected to be a standard feature in HTML 3.0.

Graphics images may be an active part of your Web page, serving as the selectable items in a menu, or even as an entire menu itself. Other images may be the actual data you are retrieving, such as images from a database or an image file archive. And graphics images may only serve as pretty wallpaper-- something to please the eye rather than to download or actively interact with.

Embedding Graphics Files Using HTML

Only a single line of HTML code is required to embed an inline image in the source code of a Web page. This is accomplished using the <IMG> tag in the HTML language. Here is an example of an IMG tag that displays an inline image stored in a file called logo.gif :

<IMG SRC="graphics/logo.gif">

The image stored in logo.gif will appear wherever this statement appears in the HTML text. You can set certain attributes associated with the IMG tag to control how the image is displayed--for example:

<IMG SRC="graphics/logo.gif" ALIGN="TOP" WIDTH="150" HEIGHT="75">

Looking at this statement from left to right we see the following:

In the above example, the file logo.gif resides on the same server as the Web page source. However, a graphic used in a Web page need not reside on the same Web server as the page that references it. For example, if the logo.gif file were on another Web site we could reference it as follows:

<IMG SRC="http://www.ora.com/graphics/logo.gif" ALT="Welcome!">

This example references an image file located on a machine with the named address www.ora.com. When this HTML statement is executed, an HTTP link is opened to the specified server, and the image resource is requested, transferred, and displayed.

This example also contains the ALT attribute, which specifies a string of text to display if the Web client cannot display graphics images (such as the text-based Lynx Web browser). Without the ALT attribute, the image would be represented by the default string "[IMAGE]". In the above example, the image stored in logo.gif would instead be represented by the text "Welcome!".

External images are referenced using the anchor <A> tag, as follows:

<A HREF="iaido.jpg">Fast draw and cut</A>

This example creates the underlined and highlighted line of text "Fast draw and cut" on the Web page. When you click on this line, the image file is retrieved from the Web server by your browser. This image may then be viewed or saved to disk as a file.

We can replace the text with a reference to an inline image. Now we have a thumbnail image that, if clicked on, will download the image:

<A HREF="iaido.jpg"><IMG SRC="iaido-thumbnail.gif"></A>

Of course, we can have both an inline image and text together:

<A HREF="iaido.jpg"><IMG SRC="iaido-thumbnail.gif">Fast draw and cut</A>

So far, we've shown only examples of linking to static images. You can view or save such images, but you don't really interact with them. The most common type of interactive graphics that you will find on a Web page are called clickable images.

Clickable graphics allow users to select a region of a graphics image just as they would select a push button or a menu item. This process is described as clickable because the selection is made using a point-and-click device, such as a mouse or another pointing device.

To make a graphics image clickable, you need to construct a pixel coordinate map of the image. This click map specifies the clickable regions of the image in pixel coordinates. Clickable regions may be described as circles, rectangles, polygons, or single points. Each clickable region is also assigned a URL (Uniform Resource Locator) to reference when that region is selected.

Once the map has been created and is in place, you need to add two tags to your HTML document that reference the image and its map:

<A HREF="/bin/cgi/maps/mainmenu.map">
<IMG SRC="/graphics/mainmenu.gif" ISMAP>
</A>

These HTML statements associate the map and the graphics file and display the graphics. The user is then presented with a graphics image to be used as a point-and-click menu. But what about clients who access the Web site using non-graphical browsers? How can they access this menu? The simple answer is "They can't." But you can display a text menu that both graphical and non-graphical Web browsers can use:

<A HREF="/bin/cgi/maps/mainmenu.map">
<IMG SRC="/graphics/mainmenu.gif" ISMAP>
</A>
<P>
<A HREF="back.html">Back</A>|
<A HREF="home.html">Home</A>|
<A HREF="search.html">Search</A>

These additional statements will display a three-item menu under the graphic that will be visible and clickable by both graphical and non-graphical Web browsers. These statements are not physically attached to the IMG tag. They are placed to appear just after the image, so the eye naturally associates them with the menu image.

If you have ever wondered what the HTML code for a particular Web page looks like, you can select your Web browser's View/Source menu item and see for yourself. You can also save the text of any Web page by using the browser's File/Save As command. These are very useful tools for anyone who is learning HTML.

Web Browser Helper Applications

All Web browsers have the ability to display HTML text, inline GIF images, and external XBM and JPEG images. (Many browsers also support inline JPEG images.) In fact, a browser will display or play back any type of data that it is configured to recognize. Because many of the resources on the Web are made of data such as audio, video, and PostScript, it is therefore important to know how to configure your Web browser to recognize as many types of data as possible.

A Web browser may be initially configured in such a way that it does not display or play back any unrecognized information that it receives. You will, however, want to configure your browser to ask you what you want to do with any unrecognized data. That way, you will at least have the option of saving the data to a file. You should also have the option of having the data sent to an external program that is capable of displaying it or playing it back. Such external programs are called helper applications.

When you configure a browser to use a helper application, you are creating an association between an external application and a type of data. Whenever the browser receives data of a recognized type, it automatically launches the associated helper application to display or play back the data. This transparent operation allows uninterrupted viewing of any HTML document that contains links to many different types of data.

The browser identifies all of the data it receives by the data's MIME type. Remember that all data received by your Web browser is in the form of a MIME mail message. Each section of data in the message has a tag called a MIME type, which describes the type of data stored in the message. The Web browser reads the MIME message and compares the MIME type tag in each section of data with a list of associated helper applications in a file. If the MIME type association is found, the data is sent to the associated helper application.

The MIME type of a file is assigned to the message by the Web server to which your client has connected. If you are accessing local files, or files via FTP, your browser will attempt to determine the data type from the file's extension. The number of data types supported by a Web server can be very extensive. For example, Table A-1 lists the MIME types supported by the Netscape client for X Window:

Table A-1: Netscape MIME Types (for X Windows)

MIME Type/Subtype

Extension(s)

Description

application/fractals

fif

Fractal Image Format

application/mac-binhex40

hqx

Macintosh BinHex Archive

application/octet-stream

exe bin

Binary Executable

application/postscript

ai eps ps

PostScript Program

application/rtf

rtf

Rich Text Format

application/x-cpio

cpio

UNIX CPIO Archive

application/x-csh

csh

C Shell Program

application/x-dvi

dvi

TeX DVI Data

application/x-gtar

gtar

GNU Tape Archive

application/x-latex

latex

LaTeX Document

application/x-sh

sh

Bourne Shell Program

application/x-shar

shar

UNIX Shell Archive

application/x-stuffit

sit

Macintosh Archive

application/x-tar

tar

UNIX Tape Archive

application/x-tcl

tcl

TCL Program

application/x-tex

tex

TeX Document

application/x-texinfo

texi texinfo

GNU TeXinfo Document

application/x-troff

t tr roff

TROFF Document

application/x-troff-me

me

TROFF Document

application/x-troff-ms

ms

TROFF Document

application/x-troff-man

man

UNIX Manual Page

application/x-zip-compressed

zip

Zip Compressed Data

audio/basic

au snd

ULAW Audio Data

audio/x-aiff

aif aiff aifc

AIFF Audio

audio/x-wav

wav

WAV Audio

encoding/x-compress

Z

Compressed Data

encoding/x-gzip

gz

GNU Zip Compressed Data

image/gif

gif

CompuServe Image Format

image/ief

ief

IEF Image

image/jpeg

jpeg jpg jpe

JPEG Image

image/tiff

tiff tif

TIFF Image

image/x-cmu-raster

ras

CMU Raster Image

image/x-portable-anymap

pnm

PBM Image

image/x-portable-bitmap

pbm

PBM Image

image/x-portable-graymap

pgm

PGM Image

image/x-portable-pixmap

ppm

PPM Image

image/x-rgb

rgb

RGB Image

image/x-xbitmap

xbm

X Bitmap

image/x-xpixmap

xpm

X Pixmap

image/x-xwindowdump

xwd

X Window Dump Image

text/html

html htm

Hypertext Markup Language

text/plain

txt text

Plain Text

video/mpeg

mpeg mpg mpe

MPEG Video

video/quicktime

qt mov

Quicktime Video

video/x-msvideo

avi

Microsoft Video

video/x-sgi-movie

movie

SGI Video

Most books on HTTP and the World Wide Web contain extensive information on helper applications. A great deal of information is also available on the Web itself on this subject. (Perform a Web search on the key phrase "helper applications" and see for yourself.) We advise you to take a look at a Web page containing links to software archives that collect helper applications, such as:

http://home.mcom.com/assist/helper_apps/

Tips for Including Graphics on Web Pages

Here are some tips for using graphics on Web pages:

Here are some additional tips for increasing the performance of Web browsers:

Legal Issues

Under U.S. copyright law, and in other nations through the authority of the Berne Convention, all graphics and images are implicitly copyrighted upon creation. This means that the graphics images you see on a Web page are not freely available, unless explicitly permitted by the owners of the graphics files. Remember this the next time you fire up your screen capture application to get a sample of the wallpaper or the logo on somebody else's Web page. (See the section called "Trademarks, Patents, and Copyrights" in Chapter 8, Working With Graphics Files, for additional information.)

Note also that the LZW compression algorithm used to create all GIF files currently requires a licensing fee for its use. See the section called "LZW Legal Issues" in Chapter 9, for more details.



Copyright © 1996, 1994 O'Reilly & Associates, Inc. All Rights Reserved.