MCCSC HTML Details

Full Page for Printing

<BODY attributes>
-- Backgrounds and Colors for BG, text and links

When one opens the View / Sourcecode toolbar option in a browser, one of the first HTML document tags you notice is the opening <BODY> . Unmodified by any commands or attributes, <BODY> defaults to the browser's choices -- usually black text on a gray background, blue links, purple visited links, and red active links.

Text is type produced by HTML tags, either headings, paragraphs, or lists.
Background is that area of the Web page upon which all the text and images reside.
Links are the highlighted text or images which indicate a "chooseable/clickable" HyperLink to another location.
Visited links are those HyperLinks which have been used by the viewer at some time in the past; the active link is the HyperLink which is currently being accessed (usually, an active link is differentiated for only a few seconds during the connection).

However, <BODY attributes> can be used to send "rendering hints" to the receiving browser. Once again, the Web designer must remember that ultimate control resides in the browser, not in the HTML document. For example, the browser user can specify colors for the background and text, while accepting the defaults for links. Or the user could specify only a background color, accepting all other defaults. Imagine the viewer specifying a blue background: all the black text snaps out. . .but all the HyperLinks disappear (they are the default blue on the blue background)! The browser user has made a mistake, which can be corrected quickly in the toolbar. However, if the Web designer sends "odd" rendering hints, the user could miss text or links and not even be aware of them.

A Conservative Approach: So what is the Web designer to do? As stunning as multiple colors may seem in theory, in practice, a "default" set of <BODY attributes> should always render successfully. But that's not exciting! Okay! Probably the best middle ground for a Web designer is to remember that gray might be the background displayed by the receiving browser -- no matter what the <BODY attributes> sent by the HTML document -- to choose text and link colors that will render well against gray, and to choose a background that "fades" out from gray, rather than contrasts starkly with it.

The RGB Hex Triplet Color Chart

If this chart proves to be useful, drop Doug Jacobsen an e-mail message at jacobson@phoenix.net and say "Thanks."

Examine the "conservative" color chart, what "colors" fade out from gray? White? Light blue? Yellow? Light Green? The "light" colors.

On the other hand, which of the colors -- other than black -- would stand out as text on the gray background? The dark ones? Red, purple, blue, maroon, dark gray (Careful! How "dark" is the browser gray?) , navy, green. These could be used as text or links.

By the way, if you see many exact copies of the same solid color, your monitor is probably displaying this chart in 16-color format. On a different monitor, each of the 256 colors would be differentiated by a process called "dithering" in which darker or lighter dots are added in patterns to the solid color to create more hues and color values.

Next to each color swatch on the chart are six characters.

Take a look at a larger copy of the chart -- so that the characters are visible.

Computer programmers might recognize each character as a hexa-decimal number from 0-15 (0, 1. . .8, 9, A, B, C, D, E, F), but hardly anyone else would know that! Just for information, each pair of characters, from the left, represents how much red is in the swatch, then how much green, then how much blue -- R G B. So, "FF0000" is all red, no green, no blue; "00FF00" is no red, all green, no blue; "0000FF" no red, no green, all blue.

That number -- called a hex triplet -- is the "argument" in the following tag construction:

<BODY attribute="#argument">

<BODY attributes>

By inserting an appropriate hex triplet into the following opening <BODY> tag structures, the Web designer can send color rendering hints along with the HTML document:

<BODY bgcolor="#______" > background color

<BODY text="#______"> text color

<BODY link="#______"> initial HyperLink color

<BODY vlink="#______"> visited HyperLink color

<BODY alink="#______"> active (temporary) HyperLink color

The opening <BODY> tag may include a single attribute, as above, or any combination of attributes, as follows:

<BODY bgcolor="#FFFFFF" text="#000000" link="#009900" vlink="#00CC00" alink="#FF0000" >

In the above, the background is white, text is black, links are dark green, visited links are light green, and the active link is red.

One More <BODY attribute>: <BODY background="__">

A .gif image may be substituted for the background color. The syntax is as follows:

<BODY background="filename.format">

The same care for color needs to be taken with an image, with the additional concern that the lines within the image may conflict with readability of text elements. The image is usualy small (one or two inches square) which the browser "tiles," or displays one right after the other in continuous rows to fill the screen. These images need to be designed to "flow together" side-by-side and bottom-to-top.

Part II of MCCSC: Designing Web Pages, Weaving Web Wonders, includes sections on capturing GIF images, creating and improving images with a "paint" or "photo" application, scanning and adapting photographic and line art images, as well as discussion of the possibilities and limitations of the wide color palette options available to the Web page designer.

Back to...TOP Back to...Designing Web Pages

Images

The glamour of the Web is images. Millions of colors dancing across browser windows. Hundreds of colors organized into photographic or line art representations of fantasy and reality. Dozens of primary colors splashing and highlighting drab grays and whites into life. Colors...images...excitement!

<IMG attribute> is an empty tag, filled with attributes. "Empty," in that it is not paired with a slash tag; <IMG attribute> is not a container. "Filled," in the sense that everything about the image that the browser needs to know -- the name and location of the image file, size and alignment hints, and alternate information for text-only browsers -- is included in the tag as commands or attributes.

The simplest image concept is <IMG SRC="file.format">, where SRC= is the source attribute for the image, and "file.format" is the attribute argument with the name of the image file, usually saved in GIF -- CompuServe's Graphic Image File -- format.

This tag. . .

<IMG SRC="images/oldkodak.gif" ALT="Camera">

. . .placed at this point in the HTML code. . .
Camera

. . . produces an image of an antique Kodak range finder camera in the display.

An important aside: The actual file containing the image must be stored in the specified location -- "images/ is the directory in which the file oldkodak.gif is located on the Web server. Otherwise, the browser will insert an "error image" like this:

Another important aside: The alternate text, ALT="Camera", attribute is displayed in place of the graphic as [Camera] by text-only browsers, thus describing what a graphical browser is displaying, and providing text to be "sounded" by voice-capable text readers. Web designers using images need to become proficient at describing, succinctly, in ALT= attributes just what graphical browsers are "seeing." Absent an ALT= attribute, a text-only browser peppers the display with [IMAGE] defaults wherever an <IMG> tag is encountered.

On such a text-only browser, the above text and image tag would display as:

          . . .placed at this point. . .

          [Camera]...produces an image...

rather than . . .

          . . .placed at this point. . .

          [IMAGE]...produces an image...

which does not describe the "image" to the text reader.

GIF_Image_Files This also illustrates the difficulty with using graphical images to produce specific text effects -- that is, w designing a image which contains special text fonts and colors to convey information to the viewer. Such information is lost to the text-only browser, unless the ALT= attribute contains all the information included in the graphic -- i.e. [GIF_Image_Files]

Effects of ALIGN= attributes:

Notice that the line -- . . .produces an image of an antique Kodak range finder camera in the display. . . . -- follows immediately from the bottom of the Camera image. The default ALIGN= attribute is "bottom."

ALIGN="top": This code and text (a "cutline" in typographic terms) . . .

<IMG SRC="images/oldtypew.gif" ALT="Old_Typewriter" ALIGN="top">
. . . puts the cutline at the top of the image of the antique typewriter.

. . . puts the cutline at the top of the image of the antique typewriter.

ALIGN="middle": This code and cutline. . .

<IMG SRC="images/tablemic.gif" ALT="Table_Mike" ALIGN="middle">
. . . puts the cutline in the middle of the image of the table microphone.

. . . puts the cutline in the middle of the image of the table microphone.

 : Using no ALIGN= attribute (defaulting to "bottom") and placing a line break after the <IMG> tag moves the text below the image as follows:

<IMG SRC="images/oldclock.gif" ALT="Old_Clock" > 
. . . puts the text on the line following the image of the antique clock.

. . . puts the text on the line following the image of the antique clock.

Putting It All Together:

Each and all of these <IMG> tags can be placed within a paragraph. Putting the Camera at this point <IMG SRC="images/oldkodak.gif" ALT="Camera"> and then inserting the image of the old typewriter (with its accompanying attribute), <IMG SRC="images/oldtypew.gif" ALT="Old_Typewriter" ALIGN="top">, and closing out with the table microphone <IMG SRC="images/tablemic.gif" ALT="Table_Mike" ALIGN="middle"> produces these effects in a paragraph.

What a design disaster!

However, paying close attention to the effect each ALIGN attribute will have on the accompanying text, <IMG> tags can be placed effectively within a paragraph. Opening the paragraph with the table microphone and using a new attribute, ALIGN="right", putting the bottom-aligned Camera at the opening of the paragaraph, and inserting the image of the old typewriter (with its accompanying attribute), at the end of the paragraph, creates a tight element.

The HTML code for the above paragraph follows:

<IMG SRC="images/tablemic.gif" ALT="Table_Mike" ALIGN="right">
<IMG SRC="images/oldkodak.gif" ALT="Camera">
[. . . the contents of the paragraph. . .]
<IMG SRC="images/oldtypew.gif" ALT="GIF_Images" ALIGN="top">

The full contingency of ALIGN= attributes, then, is "top," "middle," and "bottom" vertically, and "left" and "right" horizontally.

Other Attributes: The Web designer is not limited to the size of the image as created or stored. This juke box image is stored at 71 pixels high by 64 pixels wide . The requested image defaults to this size. By coding the tags with a height and a width attribute, and by ar ranging the text as follows, the size can be changed and the design improved:

<IMG SRC="images/old-juke.gif" HEIGHT="150" WIDTH="135" ALIGN="right">
[...bold text...]
<IMG SRC="images/old-juke.gif" ALIGN="left">
[...text of paragraph...]

The SRC= attribute in both tags is the same image file -- "images/old-juke.gif." The difference between the two tags is in the HEIGHT= and WIDTH= attributes.

In addition, the <IMG> tag can be made "clickable" as part of an anchor. When used in this structure, a BORDER= attribute can be added to the tag, tying the image to the text of the link:

<A HREF="details.html#TOP"><IMG ALIGN="bottom" SRC="images/backred.gif" BORDER="1"> Back to the Top</A>

Back to the Top Notice the color surrounding the arrow-image-button in this tool-bar structure. It will change as the link becomes active or visited.

More on Images

This discussion of the <IMG> tag and some of its attributes has suggested design restrictions and possibilities to the Web page developer. As is demonstrated in Lynda Weinman's book <designing web graphics>, from New Riders, the exact rendering produced by the alignment and size attributes lies with the viewer's browser. Where possible, test <IMG> tag structures on a variety of browsers, especially a text-only client, before locking in the final page design.

Part III of MCCSC: Designing Web Pages, Weaving Web Wonders, will include sections on capturing GIF images, creating and improving images with a "paint" or "photo" application, scanning and adapting photographic and line art images, as well as discussion of the possibilities and limitations of the wide color palette options available to the Web page designer.

For a conceptual overview of these issues, refer to Part I of MCCSC: Designing Web Pages, Images and Transparent Images and Interlacing.