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.
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.
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.
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.htm">Back</A>| <A HREF="home.htm">Home</A>| <A HREF="search.htm">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.
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:
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/
Here are some tips for using graphics on Web pages:
Here are some additional tips for increasing the performance of Web browsers:
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.
