Now comes the fun part! You have a general idea what you want to accomplish with your site, and how you want this to happen. Start thinking about the details of how it will look. This is the most creative part of web design, so let the juices flow!

Colors

As an HTML designer, you have control over a wide range of the colors on your pages. Specifically, you can control:

• Background color of each page.
• Color of the regular text on each page -- that is, text that is not part of a hyperlink.
• Text that is part of a hyperlink that has not yet been visited by the browser.
• Text that is part of a hyperlink that has been previously visited.
• Text that is part of a hyperlink that is currently "active" (being loaded or displayed, perhaps in a separate browser window or frame).
• Background color of each cell in a table.
• Color of particular sections of regular text, such as this one.

Your color selections for links (unvisited, visited, and active) are global to the entire page. This limits the way you can use color elsewhere. For example, suppose you choose to have unvisited links be blue, as is the case on this page. If you also choose to make a table with a blue background, that means that any links inside that table will be invisible! Often the way around this is to use table coloring only as a highlight, on cells that will never contain links and therefore where you can change the text color. Here's an example:

Name	Rank	Serial Number
Smith, John Q.	Sergeant	1233400234
Jones, Sally M.	Lieutenant	2340009823

Notice how the white text on blue background is quite visible and easy to read. But if "Serial Number" (for instance) had to be a link, it would have been blue regardless of anything else you tried to do.

We'll learn how to do tables later on. For now, it is the color choices that we are illustrating.

Background Textures

A tasteful background texture, such as a nice parchment or metallic sheen, can add a touch of elegance to a page, or can make it stand out from others, or can express your artistic creativity. A poorly-chosen background texture, however magnificent in its own right as graphic art, can make your page absolutely unreadable! The best way to see the contrast between good and bad is simply to visit a lot of web sites.

Remember that some people's computers may be very limited in the color depth (number of simultaneous colors on the screen) that they can display. That nice, smoothly-faded wave effect that subtly enhances your web page may look like a jagged, sharp-edged geometric tile pattern on someone else's screen. You can generally assume that most people can handle 256 colors today, but this is not 100% guaranteed. Some are still limited to 16 colors. Try your page out at 256 colors, to see if it's at least readable even if it's not perfectly clear.

You'll have to decide on a compromise between beautiful background textures and compatibility with older equipment. This will depend largely on your audience and the purpose of your site. Some demographic groups are more likely than others to be running the latest equipment. For example, if your site is devoted to hints and tips for the latest arcade-style games, it's a safe bet that visitors will have leading-edge video on their machines, so perhaps you don't need to support 256-color displays at all and can target 65,000-color (16-bit) display depth. If your site is aimed at a very broad audience, though (as is true of most search engines, weather sites, and news media sites), then you had better plan for some visitors to have old computers.

By the way, many browsers offer the ability to turn off background textures, and many computer users do this because they find the textures distracting. So be sure to choose a background color that is close to the main color of your background texture. That way, your site will be readable whether or not the user has enabled textures in the browser.

Fonts and Typefaces

Let's be clear on the terms: A typeface is a particular style of the type, determining its overall look and psychological qualities. The typeface has nothing to do with the size of the type, but rather with its artistic design. A font is a particular typeface, drawn on a screen or printed on paper at a particular size.

Now, which of these do web designers control? Both, and neither!

You can use the <font>...</font> tag set to request a particular typeface or font from the browser (as in, "<font face=Arial>Some Text Here</font>"). But if the user's computer does not have that typeface, or cannot scale it to the requested size, or perhaps if the user has simply told the browser to always use his or her preferred choice of typefaces and ignore yours --- in any of these cases, the displayed typeface and font will not be what you requested. Keep this in mind as you design and test your pages. By all means, use different typefaces to add interest to your site, but try to select typefaces that your guests are likely to have available. Definitely test your pages using a computer that does not have the desired typeface installed, so you can see what happens. Generally, things will still be all right albeit not as pretty -- but don't take this for granted.

By the way, a common remedy for this problem is to use fancy fonts only for key parts of the site, such as in a title banner (also called a masthead) or in navigational aids (see below). If you choose this route, then you can use a graphics program on your computer to render the fancy fonts as graphic images with transparent backgrounds. These are now just like any other picture or icon, and can be drawn on any computer that has a graphical display. The browser will no longer need the typeface to render the text on screen, because you have pre-rendered it for them.

You cannot control absolute size of text. Most browsers have preferences that allow the user to choose "large fonts" down to "small fonts" and generally a few choices in between. What you can control, at least on a graphical browser, is the size of each text element relative to the rest of the page. So without knowing how large the regular text is on the page you now see, I can tell you with some certainty that this text is somewhat larger and this text is larger still. Nearly every browser supports this relative sizing, with text sizes from 1 through 6 inclusive. The numbers don't reallly mean anything, but larger numbers imply larger font sizes. Specific examples will be given in the description of the <font> tag later.

Navigational Aids

Navigational aids are not the same as menus. A navigational aid typically is a link, or set of links, that appear on every page in your site. On a complex site, these may vary from site section to section, but the point is consistency. An example of navigational aids are the previous page, table of contents, and next page links at the bottom of every page in this tutorial.

Menus, Indices, and Tables of Contents

Most sites will have somewhere a kind of "master list of topics," or menu. There are thousands of ways to organize such a thing, putting it all on one page, splitting across multiple pages, and so forth. You can use graphical icons, buttons, or plain text. Many sites will use rendered text images (see above under "Typefaces and Fonts") for navigational aids.

The need for more than one type of menu (such as a main menu and a separate site index) is largely dependent on the size and complexity of your site. For getting started, a simple menu on the home page is often best. You can always add more later.

Heading Levels

Like an outline of an article, book, or essay, HTML allows you to specify multiple heading levels. The top-level heading is one, and the smallest section heading is six. Your site will look more consistent if you establish and follow a common practice of how heading levels are used. Some designers always use heading one only for the main heading of each page, then use heading two (or other levels, as appropriate) for subtopics within a page. Others choose not to have a main page heading at all, relying instead on the browser's display of the <title>...</title> text elsewhere on the screen. These designers can use heading one within the page, multiple times.

Personally I prefer the first approach, with only one level-one heading per page. I find that level-one headings are too large to look right within the text of the page on most systems. This is merely personal preference, though, and the other approach is not necessarily wrong.

Page Layout

Seldom is any aspect of design more abused and misused than page layout. Beginning web authors tend to fall into one of two extreme categories when it comes to placing things on the pages. Some will take an extremely simplistic approach, with everything done in a linear way down the page. This is a very good approach in some ways because it almost guarantees compatibility with any imaginable browser or computer type. But it is visually uninteresting in many cases. On the other hand, a very complex, busy, page layout can add interest to the page but can also be very confusing to visitors. It may appear cluttered and give a claustrophibic feeling. Furthermore, the more complex the page layout the more likely it is to be incompatible with certain types of computers or browsers.

Above all else, remember that HTML is a content markup language, not a page layout tool. Web design is not desktop publishing, and your page will be drawn diffferently on one person's screen than another's. You cannot control this, and the more you try the more likely it is that your page will simply not be usable on some people's computers.

To the extent possible, intentionally allow the browser to make decisions about page layout. For example, the page your are now viewing has very little in the way of content placement control. It may be less exciting than others, but it will work in almost any browser, including those that do not support graphics, and it will work on any realistic screen size. Furthermore, a simple design like this adapts well to the user's selection of font sizes (yes, they can change that in the browser, too!) and the shape -- tall and narrow or short and wide -- of the browser window.

When sizing elements on the page, think in relative terms and not absolutes. For example, the three-column table used previously to illustrate color can be specified in HTML as either a fixed size (some number of pixels wide) or as a percentage of the total page width. By using the percentage instead of the fixed size, you allow the browser to resize the table in order to adapt to different screen conditions or window size.

In general, today's browsers are very, very smart about laying out the pages in an intelligent way. Stylize your pages as you wish, to break up long text sections and call attention to important parts of your content, but try to let the browser remain free to do its job. The result will be a site that works much better on a wide variety of computers.