by Pat Mannix
published in the April 1998 microCHIP
Last month I described the use of the Forum, an interactive feature of the MHCUG Website at http://www.idsi.net/mhcug/. This month we will take a look behind the scenes, so to speak.
The only prerequisite to follow this article is having used a browser to view Web pages. If you have no knowledge of HTML (HyperText Markup Language), you may be pleasantly surprised to find that you understand the basics by the time we are through. Figure 1 is a screen shot of the display of the SIGs page on our Website. Figure 2 is the plain text file that is interpreted by the browser program (Netscape Communicator 4 in this case) and results in the presentation shown in figure 1.
First, let's review some of the design objectives to better understand the choices we made.
1. Accessible by most browsers, including text-mode browsers used by the visually impaired.
2. Ease of use (navigation)
3. Straightforward design for ease of maintenance
4. Pleasing design
5. Fast loading pages
This meant that we would not be using many of the latest features offered by Microsoft Internet Explorer 4 and Netscape Communicator 4. Graphics are kept to a minimum in order to achieve 1 and 5. Tables are used to help achieve 2 and 4, at the expense of some loss of objective 3. Frames are not used at all. Other choices will be mentioned as we look at the code.
Please note that line numbers were added to facilitate understanding. They do not exist in the HTML text file, and would render it unintelligible to a browser. Most HTML markup is inside <these symbols>. "Tags" in lines 1 and 65 open and close the HTML file, identifying it as HTML to the application opening the file. Most, but not all tags require a closing </tag>. It so happens that most browsers do not require the <HTML>, </HTML> tags as specified in the standard. In fact most browsers are somewhat forgiving of improper coding in general. However, they are not consistent. So it is always best to follow the standard. The paragraph tag <P> is a special case (line 14). No browser that I know of requires the closing </P>. I use it to be consistent with the standard.
The <TITLE> is always within the <HEAD> tags (lines 2 - 4). It is not displayed within the document; rather, the title appears in the top line of the browser and is used to identify a document in bookmarks or in search engine findings. Therefore it should be concise and meaningful.
The content displayed on screen is within the <BODY> tags. The body tag on line 5 has attributes which determine background, link, visited link, and active link colors. Colors are defined here by three pairs of hex numbers, (Red, Green, Blue). Black is 000000, white is FFFFFF, red is FF0000, green is 00FF00, and blue is 0000FF. All other available hues are expressed by combinations of the ranges from 00 to FF. Care should be taken to select colors which are within the browser pallet range. (Subject of another article!)
I chose link colors different from the browser defaults to better differentiate text from the blue background of the contents field. This conflicts with the objective of ease of use, in that most people expect a link to be BLUE. (See http://www.useit.com/alertbox/9605.html for Top Ten Mistakes in Web Design.) This is something which I plan to change by the time you read this.
Our Web pages all have a blue column containing the navigation links. The variable content is within the wide, white column. This is achieved by creating a two column table. The use of tables to create a multi-column layout is common. Many designers use more than two columns; with additional columns used to create "gutters" between columns. If you examine line 6, you see a table attribute, CELLPADDING="8". This creates 8 pixels of space around each of the cells that make up the two columns. The resulting 16 pixel gutter provides good separation between columns. The 8 pixel left and right margins also seem visually pleasing. Vertical spacing problems are held to a minimum by using only three rows on most pages, where the 16 pixel additional spacing is functional. Having only two columns makes page maintenance much easier.
Table rows are defined by the <TR> tags and columns by table data <TD> tags (lines 7 &8). The color of the left column is set by BGCOLOR="#99CCFF" (lines 8, 13, and 51). The first cell of the table (row 1, column 1) contains a graphic, a photo of the Mid-Hudson bridge by Tom Monturo, which is part of the Website logo (line 8). The <IMG SRC="..."> tag tells the browser to get the file mhbr.jpg from subdirectory images and display it 89 pixels high by 128 pixels wide. The browser can adjust image size, but it is best to have the graphic already at the desired size for best quality and speed. Having this graphic in place has an indirect benefit, it defines the minimum width of the entire column. Even though a cell width is defined, most browsers will allow it to collapse below that dimension if the window is sized below the total of the table width dimensions. The 128 pixel wide photo prevents the column from being displayed at less than 144 pixels (128 + 8 + 8, remember the cell padding!). The same technique is used in column 2 (line 10). Here the column width is constrained to 416 pixels (400 + 8 + 8). The ALT="..." attribute contains the text displayed when graphics display is turned off in the browser.
What is behind these choices for column width? The minimum display resolution for both PCs and MACs is 640 pixels wide by 480 pixels high. Allowing for a maximized browser window and its borders leaves something less than 600 pixels. Our pages are 560 pixels wide, which I understand accommodates Web TV (many sites use 600 pixels for overall width). If a window is sized below that dimension the horizontal scroll bar will display, providing a clue for the viewer to resize. By defining cell widths in this way, we control the presentation on various higher resolution displays. Our pages always display at 560 pixels maximum width, keeping the text line length within commonly accepted limits for readability.
The left (contents) column is called a "navigation" column because each page name is a link to that page. On line 14 you see how the link to the "News" page is established. The <A HREF= . . .> tag is called an Anchor and it contains the Hypertext REFerence URL (Uniform Resource Locator) or page address. The "http:" tells the browser to use HyperText Transfer Protocol. The <B>bold</B> tags simply tell the browser to make the text between bold. Better practice would be to place the <B> and </B> tags adjacent to the word "News." Something for a future update!
A detail that is often overlooked on other Web pages, is to inactivate the navigation link for the displayed page. Notice, on line 21, that there is no link defined for "SIGs." The reason is that we are viewing the "SIGs" page, with no need for an active link to itself! The text for "SIGs" is the default black, giving a visual clue to where we are within the MHCUG site. When visiting other sites, click on the navigation tool for the same page and see how often it is a "live" link which takes you right back to where you were.
The real page conten begins in column 2 of row 1 (line 24). This first paragraph is straightforward until line 26, where we find a special link tag, <A HREF="mailto:...">, which causes most browsers to start the default email application with the email address placed in the "To:" field.
A new formatting device, the Definition List, is introduced on line 28. The <DL> tag begins the list and </DL> ends it. The Definition Term <DT> is first, followed by one or more Definition Definition <DD> tags which most browsers display on a new line, indented from the <DT> line.
The line break <BR> tag (line 35) can be used to force a new line. The browser usually flows text to fill the line length available in a cell or window. This tag allows some control by the designer.
HTML was designed to be device independent. Our Web pages can be viewed on mainframe terminals, minicomputers, PCs, MACs, you name it! The various browsers on all these platforms each implement the output display differently. The user can modify the default font family, font size, color and other attributes. How can the Web page designer control how his/her product is displayed? The answer is, "not completely."
An example of font size control is seen on line 52. Here we tell the browser to make the text "one step" smaller than the default. The reduction in "point size" is controlled by the browser. My experience is that plus or minus one on font size is enough to be noticed, but not enough to disturb the user who has selected a most desirable default size for displayed text.
There is much more to learn about HTML. I hope this has piqued your interest. Search the Web; you will find a wealth of good material. There is really no need to buy a book. Use the "view page source" capability of your browser to see "how did they do that?" for pages that appeal to you. That's how most of us learned.
Next month, more about the MHCUG Website. Your feedback can help determine the specific topic.