Module 6 - Page 08 - Document Appearance

Document Appearance

Each web browser (whether Internet Explorer or Netscape Communicator) has preferences which may be set by the user to control default appearance for HTML pages. The original default browser preferences (preferences preset by the manufacturer) used to be somewhat consistent cross-browser and cross-platform, but this consistency has begun to decay in recent years. Generally, however, default browser appearance settings are as follows:

Light Gray page background color (or White)
Black text
Blue Link color
Purple Visited Link color
Red Active Link color (the color the link turns while being clicked)
Links are underlined

Proportional Font: Times or Times New Roman, 12pt.
Monospace Font: Courier or Courier New, 10pt.

If no appearance information is set in the code for an HTML page, the browser default preferences will apply to that HTML page.

As I mentioned earlier, web browser default settings have begun to deviate from the traditional standards stated above. Some browsers are attempting to correct for differences between Mac and PC font-sizes automatically, which was supposed to make our lives easier, but instead made creating consistent-looking, cross-platform, backward-compatible, general-purpose, professional-quality HTML pages WITHOUT CSS almost impossible.

Because of changes to the web browsers, and because users can change their web browser default settings to suit their every whim anyway, it is more important than ever to learn to control HTML tag appearance using CSS if you want to achieve true consistency of HTML appearance. We will discuss CSS, in brief, in a later module.

What is the difference between the Proportional and Monospace Fonts?

Proportional fonts, such as Times, Times New Roman, Arial, and Helvetica, use different sized spaces for the width of each letter. An "i", for instance, isn't as wide as an "M", and a space character may be of several different sizes. Proportional fonts are used for laying out most ordinary body text, whether for publishing on the Web or for print purposes. Most text within the BODY of an HTML document is laid out using the browser's default proportional font.

Monospace fonts, such as Courier and Courier New, have characters which are all identical in width. A space character is as wide as an "M", which is as wide as an "i"; all characters in a monospace font are the same width. This characteristic of monospace fonts makes them ideal for use in programming, where all code is written in text-only documents with no formatting, where space-character indenting is common. Web browsers use the default monospace font setting to display text which lies within the CODE, TT, or PRE tags (among others).

The default font SIZES for an HTML page are particularly tricky. Macintosh and Windows PC machines will display 12 point text in a browser window at different sizes (PC fonts display substantially larger in a web browser window than Macintosh fonts, even if both platforms are using the exact same font). It is impossible to create HTML pages which display with identical font sizes cross-platform without the use of CSS. Without CSS, in fact, it is impossible to be certain of the font size under any circumstances, since users may reset browser default font sizes at will.

When designing pages for the Web, you will do so with default browser fonts in mind, but your designs must be flexible.

By the end of this class, you will have received a basic introduction to Cascading Style Sheet technology (CSS). When working professionally, however, you are likely to encounter older HTML means for controlling document appearance, using tags and attributes which have been deprecated (retired). We'll talk about CSS in a later module; we'll talk about these deprecated tags and attributes now.

Tag: BODY
Attribute: BGCOLOR
Value: any named color or hexadecimal color code
Description: Use BGCOLOR to set the background color for an HTML page.
Example: <body bgcolor="#FFFFFF">

Tag: BODY
Attribute: BACKGROUND
Value: a URL (relative or absolute) for a GIF or JPEG file
Description: Sets the background image for an entire HTML page. This image will tile (repeat horizontally and vertically to fill the entire browser window), so make certain that your image is appropriate for tiling. Background images should not be more than 10K in file size; some browsers will not display foreground content until the entire background image has been downloaded.
Example: <body background="./graphics/bgrdLeaves.gif">

Here is an image which tiles cleanly:

Here is this background tile used in an HTML page.

Tag: BODY
Attribute: TEXT
Value: any named color or hexadecimal color code
Description: Use TEXT to set the primary text color for an HTML page.
Example: <body text="#000000">

Tag: BODY
Attribute: LINK
Value: any named color or hexadecimal color code
Description: use LINK to set the color for unvisited hyper-links.
Example: <body link="#0000FF">

Tag: BODY
Attribute: VLINK
Value: any named color or hexadecimal color code
Description: use VLINK to set the color for visited hyper-links.
Example: <body vlink="#FF00FF">

Tag: BODY
Attribute: ALINK
Value: any named color or hexadecimal color code
Description: use ALINK to set the color for active hyper-links (links currently being clicked on)
Example: <body alink="#FF0000">

Example HTML page using all of these properties:

<html>
<head>
<title>Silly Demo Page</title>
</head>
<body bgcolor="#FFFFFF" background="./graphics/bgrdLeaves.gif"
text="#000000" link="#0000FF" vlink="#FF00FF" alink="#FF0000">
<p>Some content... Here's a <a href="#">hyper-reference</a>.</p>
</body>
</html>

Click here to see this page in action.

Note: You may set both the BGCOLOR and the BACKGROUND attributes for the BODY tag; as the background image is loading, the foreground content will be displayed on a background the color of BGCOLOR.

Remember: all of the above attributes have been replaced by CSS properties. They are still legal to use, however.

Before CSS, there was the FONT tag, which allowed HTML programmers to set a font's color, size, and face (the FACE attribute sets the name of the font that you wish to use). The FONT tag should NOT be used; it has been completely replaced with CSS. However, it is important that you understand the FONT tag well enough to review older work.

Tag: FONT (always closes)
Attribute: COLOR
Value: any named color or hexadecimal color code
Description: Use the COLOR attribute of the FONT tag to set the color of text which appears between the opening and closing FONT tags.

Example:

<font color="#FFFF00">Howdy There.</font>

Tag: FONT
Attribute: SIZE
Value: integers from 1-8; 1 is smallest, 8 is largest. May also indicate relative sizes by using + and - signs before integers, i.e. "+1", or "-2". The default font size is always 3; therefore, if you say size="+1", it usually means that your font size is 4. Font sizes 1-8 are in relation to the web browsers' default proportional font, which is usually Times 12pt; whatever size is set as the browser's default proportional font, however, will count as size="3".
Description: Set the relative size of text inside a FONT tag using the SIZE attribute. This is not a very accurate means of setting font size, but it was all that was available prior to the advent of CSS. If you're designing on the PC, remember never to use size="1", as that is usually unreadable on the Macintosh.

Example:

<font size="5">Larger Text</font>

Tag: FONT
Attribute: FACE
Value: Font names. Multiple font names may be used, separated by commas. Always end with one of the five default font names: serif, sans-serif, monospace, cursive, or fantasy.
Description: Allows you to set a different font than the browser defaults, assuming that the user has that font loaded into their system. Always use standard system fonts for PC and Macintosh. The first choice font should come first, then the second and third choice fonts. Remember: PCs and Macs have different sets of base fonts, so use at least one PC font name and one Mac font name.

Example:

<font face="Arial, Helvetica, sans-serif">Text</font>

Note: Pages destined for printing should NOT use the FONT tag with the FACE attribute. Each time the FONT tag appears on a page with the FACE attribute, some web browsers download a copy of that font to the printer, whether or not it has already been downloaded. Thus, if you state "Verdana" as your chosen font 15 times on the page, the web browser will load "Verdana" fifteen times into the printer; this will cause some printers to crash.

More than one attribute may be set for the FONT tag, of course.

Example:

<font face="Courier, Courier New, monospace" size="5" color="#660000">
Blah Blah Blah.
</font>

Again, don't use FONT tags in combination with CSS; they are not designed for use together.

You may experiment with the FONT tag, if you wish. However, don't get in the habit of using it; CSS is a far superior alternative. Even with CSS's bugs and inconsistencies, CSS does everything the FONT tag does, and more, with greater precision and reliability.

Main Menu