Introduction to Hypermedia: Notes for Week 3

Stuart Moulthrop & Nancy Kaplan
University of Baltimore
School of Communications Design · 2000

Week 3: Color and Graphics

3.1 | ADDING COLOR TO WEB PAGES

You can specify colors for several HTML objects including the background for an entire page and the main body text. You can also assign colors to several aspects of the link cue: when it marks a link to a page not yet visited; when it marks a link to a previously visited page; and when it is currently active (i.e., while the mouse button is down over the cue).

There are several methods for specifying colors. Some of these belong to the earlier versions of HTML (3.2 and its precursors), while the more modern techniques involve Cascading Stylesheets, a component of HTML 4.0 ("Dynamic HTML"). At this writing, major browsers support all methods of color setting, though at least one (the container) has been deprecated by the W3C, marked for exclusion from future standards.

We'll cover stylesheet color management in Week 5. At this point we'll go over the older methods, most of which remain in very widespread use until browser support for stylesheets becomes universal.

3.1.1 · In the <BODY> Tag

With Navigator 1.1 (early 1995) Netscape introduced solid-color backgrounds for Web pages. This technique was later incorporated into the HTML 3.2 specification.

Background colors are set by adding a BGCOLOR attribute to the initial BODY tag (the first tag of the <BODY></BODY> container); for example, the BODY tag of this page contains the attribute BGCOLOR="#FFFFFF" which sets the page background to white. (More about that mysterious series of "F"s a little later on.)

In Netscape Navigator and Internet Explorer, page colors can be set by name (e.g., bgcolor="white"), though these names may not be recognized by all browsers. Here's a list of supported color names.

Though convenient, names are not the best way to set page colors; a better method is hexadecimal coding, discussed below.

A number of other attributes can also be added to BODY in order to set page colors:

BGCOLOR	Sets a solid background color for the entire page.
TEXT	Sets the color for all text in the page body, including heading and list elements but excluding horizontal rules.
LINK	Sets a color for text cues leading to pages that have not yet been visited.
VLINK	Sets a color for text cues leading to pages that have been visited.
ALINK	Sets the color text cues turn when the user clicks on them. Unless the user holds the mouse button down, this color disappears very quickly.

3.1.2 · BGCOLOR in the <TD> Tag (Tables)

In the 2.0 release of Internet Explorer (early 1996) Microsoft implemented custom background colors in the cells (<TD>) of HTML tables; see the notes for Week 4 for details.

Netscape incorporated this feature in Navigator 3.0; now both browsers allow BGCOLOR as an attribute for <TD> in tables, letting authors color table cell backgrounds individually.

3.1.3 · Applied to a short span of text

Before HTML 4.0, specifying that a short span of text be displayed in a particular color (or size) required using a  container with COLOR and SIZE attributes. HTML 4.0 accomplishes these effects through style rules. These rules can either be specified as values for a STYLE attribute in some tag (for example, ) or they can be spelled out as part of a stylesheet. (For a fuller treatment of Stylesheets, see Week 5.)

To change the color of the text in an entire paragraph to purple, write:

Markup	Output
`<P STYLE="COLOR: #CC0099"> This is some purple prose. </P>`	This is some purple prose.

To change the color of a single word or phrase, you can add a STYLE attribute to a  tag. In the example below, only the word "purple" is treated:

Markup	Output
`This is some <SPAN STYLE="COLOR: #CC0099">purple</SPAN> prose.`	This is some purple prose.

3.2 | THE MYSTERIES OF COLOR CODING

3.2.1 · Colors By Hexadecimal Code

The most precise and reliable way to specify colors for Web pages involves hexadecimal specification; colors are invoked as a trio of numerical settings for red, green, and blue (RGB). These numbers are written in the base 16 numbering system, which to the untrained eye looks like a strange hodgepodge of letters and numbers.

In other uses of an RGB system (for instance, in popular graphics programs), the values are usually given as regular, decimal numbers. I can specify a vivid RGB blue in Photoshop by plugging in 11 for red, 4 for green, and 232 for blue. But in HTML things are a bit different; actually, 8 bits different.

The HTML color scheme was devised for graphics systems that devote 24 bits of information to the color value of any given pixel. (This was the high end for graphics cards in the early 1990s.) RGB color implies three registers, each with 8 bits allotted to it (8+8+8=24). A bit is a binary element that may have one of two values, 1 or 0. Thus each of the three registers of the RGB color system can hold one of 2⁸ or 256 values, making the total number of available colors 256³ or 16,777,216 ("Millions of Colors").

Having both 2 and 8 among its factors, 16 is a convenient number for binary systems and particularly for 8-bit arrays. Machine-code programmers regularly work in hexadecimal, so it seemed natural enough to Tim Berners-Lee and friends to handle HTML color in this way.

Okay, it's weird. But just imagine how impressed your friends will be when you notice how well their 33CC99 wallpaper matches the 006600 carpets!

3.2.2 · The Joy of Hex

A few words about base-16 numbers: they differ from decimal (base-10) numbers in that they advance by sixteens instead of by tens; this means that in counting from "1" -- which is the same in any number system -- to "10" -- which is ten in decimal but sixteen (decimal) in hexadecimal -- things get a little strange.

To wit, you need six more numerals in base-16 to count from "1" to "10:"

Base 10
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16
Base 16
1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10

As we've observed, Web colors are based on 8-bit registers, meaning the maximum value for each of the three color elements (R-G-B) is 2⁸ or 256. But computer programmers always begin counting from zero (or as we like to say mnemonically: "All good programmers start with nothing"). Thus the range of register values actually runs from 0 to 255. 255 in hexadecimal is FF (15 sixteens plus 15 ones). Theoretically a Web color can be specificed by any triplet of values from 00-00-00, where R, G, and B are all kept flat, producing black, to FF-FF-FF, where all three settings are at full blast, producing white.

However, that's just the theory...

3.2.3 · 6x6x6, the Palette of the Beast

If you're not choosy, you can use many interesting values to invoke Web colors: A11EEE, 666999, BA0BAB.

In the early days of the Web, however, choosing one's colors thus poetically oten had unintended consequences. Though the browser would cheerfully pass along our selections, what showed up on users' screens was often something totally unexpected. This was because personal computers back in the dim days of the nineties often came with graphics cards that did not allot the full 24 bits to each pixel. They could not display all 16-million-plus colors, but only 65,536 (16-bit color) or horrible to contemplate, 256 (8-bit color).

When the browser encountered a color its graphics card could not display, it would either shift the color to the nearest supported value, or it would dither the color by creating a pattern of alternating pixels in a kind of techno-pointillisme derisively called "Web pox."

This could get very, very ugly.

To deal with this problem, Web designers learned to use a reduced subset of the full 24-bit palette. This was the set of Web-safe colors. Such colors were guaranteed to display without shifts or dithering on any computer with at least 8-bit color support. Behold, the Palette of the Beast:

216-Color Palette

Here's another view of the 216 kosher colors, this time in an exploded-cube arrangment:

exploding cube of SAFE colors

In theory 8-bit color produces 256 possiblities; but the Web-safe palette actually contains only 216 options. This is because Netscape and Microsoft, makers of the two most popular browser programs, reserve 40 colors for use only in interface elements such as window borders and icons.

Here's a complete catalog of Web-safe colors, with links to sample pages showing how they look against contrasting selections for text color.

In terms of hexadecimal coding, the 216 "Web-safe" colors all have this in common: their R-G-B elements are each set with one of the following six values:

Hexadecimal
00	33	66	99	CC	FF
Decimal
00	51	102	153	204	255

So of the following, only the codes in red represent Web-safe colors. The others are impostors:

FF0000

339966

CC33FF

000033

But now we come to a rather difficult question: Should we still bother with Web-safe colors in this ultra-sophisticated 21st Century?

3.2.4 · When "Safe" Colors Are Needed

Like most things having to do with the Web, the great color debate is largely a matter for personal judgement.

On the one hand: From a PC-centric point of view, Web-safe colors have outlived their usefulness. Desktop systems have dropped in price well below $1,000 and in almost all cases those systems incorporate graphics cards that support 24-bit color at some reasonable resolution.

On the other hand: Web publishers are turning increasingly toward platforms other than the traditional PC -- television set-top boxes, handheld digital assistants, even enhanced cellular phones. It may be some time before these devices can all handle 24-bit color.

What are some reasonable, general rules for Web color?

You should learn the Web-safe color scheme.

You may use non-safe colors if you are developing content for a sophisticated, well-defined market (graphic designers, digital artists) or for a specific intranet where all platforms can all handle 24-bit color.

For the next 2-3 years at least, stick with the safe palette for large-scale, general Web publications.

Don't worry about complex graphics such as photographs and digital artwork: these can probably survive quite a bit of dithering.

Do use Web-safe colors for backgrounds in pages and table cells, text, and large block letters in graphics

3.3 | BACKGROUND GRAPHICS

The infamous "Netscape enhancements" also gave authors the ability to build background patterns by filling the screen with multiple adjacent copies (or tiles) of a given image. This is very much like the digital "wallpaper" you can set up in Windows and MacOS.

Here is a (rather garish) sample page.

3.3.1· The BACKGROUND Attribute

To establish a tiled background, insert a BACKGROUND attribute into the initial BODY tag; the value of the attribute will be the electronic address (URL) of the desired image file. This may be either a fully-qualified URL or (more commonly and sensibly) a relative reference to a graphic within your own system. The graphic in question may be either in JPEG or GIF format (for more about these formats, see below).

More recent browsers even support animated GIFs for tiled backgrounds.

The University of Baltimore's Communications Design program maintains a sampler site with a large number of background images available for copying or downloading. Use at your own risk.

You may use both a BACKGROUND and a BGCOLOR attribute in your BODY tag.

3.3.2· A Good Idea at the Time?

Graphical backgrounds were meant to impart a "textured" look to Web pages... which they do... but it's notoriously difficult to read words against all but the most carefully designed textures. Intrusive or awkwardly tiled background graphics are a sure giveaway of amateur Web design. Lately the pros have been opting for conservative, solid-color backgrounds -- and while no one is eager to resurrect the "gunmetal gray" that was standard at the dawn of Web time, a large number of pages wear black or white these days.

3.3.3· Advanced Use of Background Images

Nonetheless, some people still use background graphics in their pages. Instead of crude wallpaper tiling, these designers use more advanced techniques. Here are two of the more common:

One large image as page template


Background image and page from Sean Cohen's Web site, ca. 1998.

As you can see in this example, some designers use a single large graphic to lay in a system of rules and borderlines to give visual structure to pages with standard formats. Particular page content is then laid on within a table structure (see Week 4) so that it aligns properly with elements of the background. The background image in this case is not meant to tile, so it is given dimensions large enough to fill the screen on one iteration: 1200 pixels in width and 1000 pixels in height.

Using a background strip to create a marginal column
This technique does use tiling, but only in the vertical dimension. The designer creates a graphic that is not very high (1-5 pixels) but is very wide (1200 pixels or more). When laid in as a tiling background, this image creates a column of distinct width and indefinite height (since the image will tile as many times as needed to match the extent of the page). Here's an example:

Background graphic for Communications Design Web site (border added) Page from Communications Design site (border added)

Content such as navigation buttons can be laid over this column. The color can be varied to indicate departments. Patterns or designs can be substituted for the simple solid block.

3.4 | IN-LINE GRAPHICS

Background graphics are close cousins to a more common form of Web image -- in-line graphics: these are images that appear only once at a given location, integrated into the flow of words and other page elements.

3.4.1· The <IMG> Tag

In-line graphics are controlled by a single tag: <IMG> or the "image tag." IMG is another of the rare solitary features in HTML: it occurs not as a container but always solo (there is no </IMG>).

The IMG tag in action

The tag that introduces the image contains several critical parts. (If you look at the source for this page, you'll see that this image tag has some other bits as well, but we'll defer them for the moment.) The four attributes discussed below -- SRC, WIDTH, HEIGHT, and ALT -- can be considered indispensable: all image tags must have them. We'll go on to discuss some other attributes which are technically optional, though they may be required in certain circumstances.

<IMG SRC="images/limulus.jpg" HEIGHT="122" WIDTH="106" ALT="Picture of a horseshoe crab">

SRC

SRC (for "source") holds the URL or relative file location for the image file. In this case the string "image/" indicates that the file in question resides in a subdirectory. The ".jpg" extension identifies this file as an image in Joint Photographic Expert Group or JPEG format (see the next section).

HEIGHT and WIDTH

These attributes fix the dimensions of the image. They can be altered proportionally to scale the image, though in practice you probably won't do this very often. Bitmap or raster images (JPG and GIF) become distorted or "pixelated" when scaled up, and though they'll look fine when scaled down, it makes more sense to scale down the source image since that will decrease the bit size of the graphic.

It's essential to specify WIDTH and HEIGHT attributes for your graphics. If these dimensions are given, current browsers will allot a blank rectangle for the image and continue laying out your page (i.e., displaying text) even if the image file has not been completely transferred from the server. The graphic then drops into its rectangle as it streams in. On a slow connection, this can make a very large difference to users.

ALT

ALT is short for "alternative." The value of this attribute is a string that is displayed or delivered in place of the image in the following cases:

The user has left the mouse over the image for a second or two;

The image has failed to load or is streaming in slowly;

The user has turned image loading off;

The user is blind or visually impaired and is having the Web page read aloud by a text-to-speech converter.

You must include a useful ALT string with every image. Make ALT text clear and descriptive.

3.4.2 · The ALIGN Attribute

The ALIGN attribute in the IMG tag sets the relationship of the image to the text stream in which it is located. In the earliest version of HTML there were three ways to align in-line graphics:

Top

Middle

Bottom

E/Street Button Netscape added two more possibilities in the first wave of "enhancements" that led up to HTML 3.2: ALIGN="LEFT" sets the graphic to the left of the text and causes text to flow around it, irrespective of breaks; as you see here. ALIGN="RIGHT" positions the graphic on the right. In both cases text flows around the aligned graphic, which proves very convenient for design effects like decorative capitals and call-outs.

3.4.3 · VSPACE, HSPACE

These attributes allow you to create a gutter, specified in pixels, between the image and what lies on either side of it, whether that be text or the page margin. These attributes are obviously useful in coordinating images with words.

If you look at the example in the previous section, which has HSPACE set to 20 pixels, you'll see that the same amount of space is left on both left and right. In the case of VSPACE, equal gutters are created at top and bottom. If you care about crisp alignment of elements (and in most cases, designers do), then this can be a serious problem.

Some designers prefer not to use HSPACE and VSPACE to control gutters: they simply insert along one edge of their images a strip of blank color that matches the page background color. This feature serves as the gutter. This solution has some drawbacks: you can't change the orientation of the image with respect to the text without editing the native graphics file; you can't re-use the same image on your page in two different orientations; and if you've created your images with white gutter strips assuming a white page background, you'll have to rebuild them should you change background color (unless you used GIF89a transparency; see below).

3.4.4 · The BORDER Attribute

You'll notice the thick black borders around the image at right. These were set by adding a BORDER attribute to the IMG tag. This attribute specifies a border size given in pixels.

If no BORDER attribute is set, then no border will appear if the image is treated simply as an in-line graphic. However, if the image is used as a link cue (see Section 3.7 below) then a visible border will appear even if none has been specified. If you want to suppress the border on a graphic link cue, you must include the attribute BORDER="0".

The color of the border is variable. If your image is not a link cue, then the border color is the same as the body text color set for your page (black by default). In the case of a graphical cue, the color will be the one assigned either to unvisited links (blue by default) or visited links (purple by default). The border will turn to the active link color when the user holds the mouse button down over the graphic.

3.4.5 · The NAME Attribute

The attribute NAME may be used in IMG tags. It is required if you want to use JavaScript to change the source assignment of the image, a technique required for roll-over effects (see Week 7). This attribute is not required if you are using images simply for display purposes or as link cues. For the moment you should register two facts about NAME:

NAME is not the same as ALT. The value of NAME is not displayed in any way.

NAME is a more or less arbitrary designation for a rectangular space on the screen, not for the image that occupies that rectangle. I may have a 300x200 rectangle showing an image of a puppy, but on rollover that image might change to a goldfish. An appropriate NAME value would be "pets," not "puppy"; but since nobody sees the NAME value, I could set it to "foo" or "zardoz" if I want.

3.4.6 · Formats for In-Line Graphics

If you've worked mainly in print up to now, the shift to Web graphics may be a bit disconcerting. To begin with, most of the image formats with which you're probably familiar -- TIFF, EPS, BMP -- aren't supported in the HTML specification. This is particularly true of vector formats (discussed below).

Also, all Web graphics display at 72 pixels (or "dots") per inch (72 dpi). If you have a massive, 300 dpi pre-print TIFF, you could indeed convert it to a massive, 300 dpi JPEG and try to feed it through the Internet. And it might look subtly better than the equivalent 72 dpi graphic... when all its bits finally arrive... nine years hence.

Mostly you will need to forget what you know about print graphics. The Web is different.

Without special plug-ins, most major Web browsers can only handle one type of digital image -- a bitmap or raster graphic which is essentially a table of numbers holding a value for each tiny color dot that makes up the image. Browsers generally support two bitmap formats:

Graphics Interchange Format (GIF): Introduced by Compuserve in 1987, this format is fairly crude but nearly universal. It's to Internet graphics what the carburetor was to the internal-combustion engine. (If your car is less than 10 years old, it probably doesn't have a carburetor. What does that suggest?); To be sure, GIF still has its uses. It's the only way to add transparency to Web images and the only format that allows animation without a plug-in.
Joint Photographic Expert Group Format (JPEG): Because it includes a powerful mechanism for excluding redundant information (i.e., "compression"), JPEG produces better file economy on large or complex images, and JPEGs often have better fidelity. Most important, JPEGs can use the full range of color available to your system; GIFs require a limited or "indexed" color palette. JPEG is the better choice for complex imagery and photography.; In the old days, JPEG images could not be used for some purposes (e.g., as background graphics) but that changed a long while ago. If your images don't need to have super-small file sizes, you can probably use JPEG exclusively for non-animated graphics.

The practical difference between GIF and JPEG images should be apparent in the following example, unless your system has very limited display capabilities:


JPEG	GIF

Being bitmaps, both images contain the same number of pixels; but the JPEG graphic (left) has a larger color palette than the GIF graphic (right). That's why the GIF seems so fuzzy: many of its pixels are not quite the right color: a direct result indexed color (in this case, the Web-safe palette). GIFs are perfectly fine for simpler graphics or line art, though; and in the case of small, simple graphics, GIF files are often smaller than JPEGs. The GIF file here is 38.7 kilobytes; the JPEG comes in at 58.4 -- about a 30% variation.

3.4.7 · GIF89a Transparency


No Transparency	Transparency

Photoshop has had the ability to save GIF files with transparency since version 4.0. Other major graphics programs do the same. At this writing, there's no built-in browser support for transparency in JPEG images.

3.4.8 · Vector Formats

Bitmaps are not the only way to encode digital images. Since those bright folks in Silicon Valley invented Postscript, it's been possible to control digital images in a much more powerful and flexible way -- not as mosaics of tiny dots, but as curves whose angles and dimensions are specified by elegant mathematical equations. Images defined in this way are called vector graphics.

Vector graphics have enormous advantages over bitmaps: they can usually be expressed with far fewer symbols (a few kilobytes as compared to a few hundred for a bitmap) and they can be flexibly scaled without loss of fidelity. But like our old friend the carburetor, bitmapped images just keep hanging on. They're crude, but there's basically one way to handle them and no one has much proprietary stake in the method anymore. Meanwhile several companies offer competing vector-graphics standards and none has yet emerged as the clear winner.

The most popular formats for vector graphics today include Encapsulated Postscript (EPS), Portable Document Format (PDF), and for vector-enabled media files, Macromedia Flash. All of these formats require a plug-in in order to be interpreted by major browsers. Only Flash has made really significant inroads (so much so that the Flash plug-in ships with both Netscape and Microsoft browsers these days). We're still a few years away from being able to use vector graphics as the standard for Web publishing, but the day should come eventually.

3.5 | ANIMATED GRAPHICS

An example of an animated GIF

Since the very early days (Netscape 1.1), Web browsers have been capable of displaying multiple image sequences combined into a single animated GIF file. This capacity for combination and playback is another part of the GIF89a standard, which was only a decade or so ahead of its time.

Animated GIFs require no special HTML mechanism -- they are marked up as if they were ordinary, static GIF files and they have the same file extension (.gif) as their more sedentary cousins.

Animated GIFs can be created easily enough within most major graphics programs (in Photoshop, for instance, by converting a series of layers into animation frames). A number of free or shareware programs can help you assemble animated GIFs from component images; for the Mac, we still like Yves Piguet's elegant GIFBuilder. Macromedia's Flash also exports animations in GIF89a format and it has become a major tool for creating this kind of content.

However, once you build an animation in Flash you can also save it in native Flash format as a vector-based movie. It can be hard to decide between Flash format and animated GIF. GIF is a bitmap format, hence it requires fairly large file sizes in comparison to native Flash. But Flash requires a plug-in and animated GIF does not. Often it's the more sophisticated features of Flash -- clickable interactivity and scripting capabilities -- that decide the issue.

To see how an animated graphic can be created out of simple components, see this anatomy of an animated GIF.

3.6 | USING GRAPHICS WISELY

3.6.1· Controlling Bitload

Perhaps the most common complaint about Web pages involves agonizingly slow load times -- the infamous World Wide Wait. Even today (!) these slowdowns are often caused by inappropriate use of graphics. Here are some rules of thumb to help you avoid overload:

No ordinary Web page should be larger than 150 kilobytes (150k) in total.
The images on your page should add up to 100k at most.
No single image should exceed 50k.

These allowances are very liberal by some standards. We know of many large-scale Web publishers who insist on much stricter numbers.

3.6.2· Single-Pixel Effects

In the current state of HTML it's very hard to change the color of a horizontal rule; and there's no such thing as a vertical rule of any color. Yet you'll often see the need for a solid line of color running either up or across your page. The simplest way to create such an element involves the smallest of possible graphics files -- a single dot or pixel of a certain color (preferably one of the Web-safe 216). Using the HEIGHT and WIDTH attributes of the IMG tag, you can scale this infinitesimal square (which is what all pixels are) to any size you like.

By varying one dimension more than the other, you can distort the original square dimensions of the native dot so that it becomes some sort of rectangle, i.e., a line of varying width. The red line at left was produced by distorting a 1-pixel image of the color #CC6600 so that it is 3 pixels wide and 420 high.

The single-pixel effect is not only quite versatile (there are plenty of other things one can do besides drawing lines) but also enormously efficient. Mono-dot graphics files are very small indeed -- often only a few hundred bytes (i.e., less than 1k) and since the file must only be loaded once, pages built with one-pixel effects work are very friendly to users with slow, dial-up connections.

3.6.3· Thumbnails

Suppose you have an image that just can't be reduced. Here's a sensible compromise -- put a thumbnail version of the image on your page, like this:

Click to view a larger version
(300x300 pixels, 60k)

Create a link from the thumbnail to a separate page containing the full-size graphic. Add a caption or other information indicating the dimensions of the larger image and (possibly) how big the file will be. In terms of the size limitations we proposed above, only the thumbnail graphic counts. Since you've warned users about the large size of the full-format graphic, you could plausibly argue (though your boss or client might not agree) that it is exempt from the 150k rule.

3.6.4· Image Slicing and Code Generators

Another strategy for increasing the efficiency of Web pages involves slicing one large image into several smaller components, which will load more quickly than the large, unsliced file. In the page markup, each component graphic has its own image tag and these tags are installed in the cells of an HTML table with certain special constraints. (We'll cover tables in Week 4.)

You can try to produce this technique by hand. With careful work and lots of trial-and-error, you can create a sliced table layout that looks indistinguishable from the original image... in Microsoft Internet Explorer. Viewed in just about any version of Netscape Navigator, however, a simple table layout with one cell for each slice of the image leaves maddening one-pixel gaps.

At this point many people turn to code-generating programs like Macromedia's Fireworks and Dreamweaver. These programs outfox Netscape's quirky layout engine by creating a table with a large number of extra cells. These cells are occupied by single-pixel "shim" graphics which force the image slices into the correct position. The result looks just fine, as you can see in this example.

But have a look at the markup for that example page and you'll see line after line of arcane, unreadable code which (trust us) won't make much sense to you even after you've figured out tables. Also, the automated slicing operation produces a plethora of files, including the shim graphic and a dummy HTML page, all of which you need to put into the right directories and carefully integrate with the rest of the page you may be building. Sorting out the pieces is not a simple task.

Fireworks and other automated image-slicers are sophisticated power tools. You should not rely on them -- in fact, we suggest you don't even use them -- until you've built a number of table-based pages by hand. Even then, you'll need to pay close attention to what your code generators are doing. These are tools aren't really meant for casual users.

3.6.5· Gamma Correction


If an image looks like this on the Macintosh...	It looks like this in Windows.

If you use a Macintosh to produce Web graphics, there's something you urgently need to know: unless you've adjusted the gamma curve on your display, then on most computers in the world, your work looks dark and muddy!

The gamma curve expresses the relationships among brightness and contrast for the red, green, and blue elements of your display. Because they are designed to work even with the cheapest video cards and monitors, Windows systems use a particularly crude gamma curve called television gamma -- the same that's used in old-fashioned, non-HD, analog TV.

Meanwhile, at least since they crossed into millions-of-color territory back in the late eighties, Macs have used a more refined gamma curve with considerably more gradation in mid-range tones. (Mac displays either come from Apple or are built to their specifications, so Apple can insist on higher standards.) Result: Mac screens almost always seem both brighter and softer than their anything seen through Mr. Gates' Windows.

So you have a better display than 95% of the world. Good for you -- unless you happen to be a graphic designer. Then the color choices you make on your bright, elegantly calibrated Mac screen may be totally imperceptible to anyone stuck with the Other Stuff. In some cases design elements can't be seen with the naked eye. Crucial lettering (a client's slogan, for instance) may disappear from view.

You don't need to give up your Mac. Simply go to the Monitors and Sound Control Panel and select the Colors option. Click the Calibrate button. This will bring up a series of dialogs (in Windows parlance, a "Wizard") that will help you create an alternative gamma setting for your Mac display. During this process you will be given the chance to change the current gamma setting. Select Televison gamma. The profile you establish in this procedure takes immediate effect on your computer, but you can switch back to your previous setting any time you like.

We strongly recommend that you set up a Windows-equivalent monitor profile for your Mac: we've seen many fine designs fail miserably because their creators didn't take account of the Dark Side.

3.7 | IMAGES AS LINK CUES

As we've just seen in the thumbnail example above, images on Web pages are rarely just decorative or illustrative. Like words, they too can be cues for departing and arrving links:

The markup for the above example looks like this:


	<A HREF="key_myst.htm"><IMG SRC="images/key.gif"></A>

Note that the IMG tag is contained within the anchor container, taking the place of the words in a vebal link. As we explained with respect to the BORDER attribute above, making a graphic into an active cue can cause a border to appear even if you have not specified a border width. In some cases you may want the border to be visible, either to signal that this graphic is indeed a cue, or to register information about whether the arrival page has been visited. If you don't want to invoke these features, set an attribute of BORDER="0" in the IMG tag.

3.8 | IMAGEMAPPING

Imagemapping is a special case in which a graphic becomes a cue for multiple links. Various regions of the graphic (often called "hot spots") are mapped to various arrival points. For example:

Aerial View of North Charles Street Neighborhood

This aerial view of midtown Baltimore supports links to six other pages (see the numbers); clicking on a numbered square activates a link.

In ancient times (pre-1996), imagemapping required a special program called a Common Gateway Interface Script (CGI) running on the same machine as the Web server. With Navigator 2.0, Netscape introduced client-side imagemapping, where all the instructions for handling hot spots are contained in the browser code and all the specifications for hot spots are given in the page markup. This feature is now universally supported.

Information for imagemapping is stored in a special container called MAP, ordinarily situated in the HEAD portion of the document. Within the MAP container, hot spots are described in a container called AREA. The following is a simplified version of the MAP container for the imagemap above:


		<MAP NAME="aerial_map">
		


		<AREA SHAPE="RECT" 
		COORDS="225,13,245,35" HREF="N_Charles/1500/25/penn_entry.html">
		

</AREA>


		<AREA 
		SHAPE="RECT" COORDS="199,41,217,59" HREF="N_Charles/1300/19/cr_entry.html">

</AREA>


		<AREA 
		SHAPE="RECT" COORDS="116,59,135,79" HREF="W_Preston/second/26/goc_entry.html">


</AREA>


		<AREA 
		SHAPE="RECT" COORDS="190,86,206,105" HREF="N_Charles/1200/18/hj_entry.html">


</AREA>


		<AREA 
		SHAPE="RECT" COORDS="0,115,17,137" HREF="W_Preston/200/01/sob_entry.html">


</AREA>


		<AREA 
		SHAPE="RECT" COORDS="206,192,227,211" HREF="E_Chase/first/01/belvedere_entry.html">

</AREA>


		</MAP>

Note that AREA is always an empty container: the crucial information occurs in the attributes of the initial AREA tag.

The SHAPE attribute in the AREA tag can also be set to CIRCLE, POINT, OVAL, or POLYGON (with corresponding changes in the coordinates specified). The POINT option in effect describes a circle within which a mouseclick activates the link. (If you omit the SHAPE attribute, the browser will assume "rect" by default.)

The connection between the MAP container and the IMG tag is made through an attribute called USEMAP; here is the IMG tag for the Baltimore imagemap shown above:


		<IMG SRC="images/aerial.gif"
		 USEMAP="#aerial_map">

Note the "#" in the USEMAP attribute, as in the construction you learned in Week 2 for the departure half of a doubly-anchored link. The same rules apply here about case sensitivity: the value of USEMAP must be letter-for-letter identical to the NAME attribute in the MAP container.

Though no ANCHOR container is present, you still need to include a BORDER="0" attribute if you wish to suppress the borderline around an imagemapped image. (In the example above we do not suppress the border.)

You can do all the same things with AREA that you can do with the anchor tag. The value assigned to the HREF attribute may be a MAILTO: or JAVASCRIPT: string, enabling e-mail and scripting links from imagemaps. Likewise you may add a TARGET attribute to an AREA tag, allowing control of windows and frames.

Like IMG tags, AREA tags must also contain an ALT or LONGDESC string; though in this case the alternative text should describe not the image as a whole but the hot spot or the link that it cues.

END OF NOTES FOR WEEK 3

Return to Top of Page