BRYCE ON WEB PAGE DESIGN
by Tim Bryce
M. Bryce & Associates (MBA)
Palm Harbor, FL, USA



TABLE OF CONTENTS


    INTRODUCTION

    Many people ask, "Should we build a web page?" The answer is an unequivocal, YES!   Web pages can greatly assist a company or non-profit organization in terms of communicating with:

    • Its customers, both current and potential.

    • The surrounding community (it is a handy public relations tool).

    • The media, for research and promotional purposes.

    • Its own personnel or membership.

    The following tutorial on Web Page Design is excerpted from MBA's (M. Bryce & Associates; Palm Harbor, FL) corporate web page on "Internet Services":

      Unlike printed media, the Internet offers no practical limitations in terms of what can be presented. Consequently, the user's first inclination is to try and put too much into their web page (we call this the "War & Peace" phenomenon). Before embarking on a web page design, it is important to establish a roadmap in the form of a simple Table of Contents. This will ultimately dictate the scope of the project and provide the structure for web design.

      The next common pitfall by new users is to try and develop a web page that is overly sophisticated. True, things like music and animation are impressive eye-catchers, but often there is a price to pay for their use. For example, since a web page is essentially a collection of files that must pass over communications lines, the speed by which a web page is displayed is based on how fast these files can be transmitted over the lines. If the files are large, then it will take time (and a person's patience) to display the web page. Although text files travel rapidly over communications lines, certain graphics files (as well as animation and audio files) do not. In other words, the most sophisticated web page may prove to be ineffective if the user has to wait an inordinate amount of time in order for it to load in a web browser. Bottom-line: the web designer must ultimately ask, "Is it worth it?" MBA recommends keeping your first web page simple and to the point (the KISS principle). By following basic design guidelines, you can build an effective web page quickly.

      DO'S AND DON'TS

      The following is a basic set of guidelines to be observed during web page planning and design:

      • Devise a standard web layout for consistency and ease of use. This includes selecting suitable fonts and sizes that are easy to read; a color scheme (consider corporate colors as well as contrast between background and foreground colors); use of corporate logos and trademarks; and basic positioning layout (e.g., a "frames" based web page versus a single standard page). Inconsistent design layouts tend to confuse the reader and present a disjointed picture of your company.

      • Follow standard design layouts that are commonly used on the web. It is not always a good idea to pioneer a radically new web layout. Your intention should be to simplify how your web page should be read. A radical new approach to web design may be visually appealing and "state-of-the-art" but is it "user friendly?"

      • Building a web page is similar in nature to designing a form; keep it clean and organized, not cluttered and unstructured. Your objective is to make it readable and usable.

      • Know your intended audience and speak in their language, avoid technical jargon if possible (unless you take the time to define it). Make it legible and intelligible. Also remember that 73% of all web surfers have a high school degree or higher. The fact they are reading your web page means they are somewhat computer proficient and intelligent.

      • Always do what is practical and works, not what is overly glamourous or sophisticated. BUILD WEB PAGES THAT WORK!

    Like a newsletter or sales brochure, you want to make your web page an important communications and public relations tool for you. It is important that you create a dynamic web page that is kept up-to-date. A dull and static web page (one that is rarely updated) may be visited only once and never again. A dynamic web page will draw your customers, members, friends, and guests back for more information time and again.

    So, what should your web page include? First, you must consider the person who is going to maintain it and their capabilities. You must be careful not to tax their time or talent. Keep it simple at first, then evolve it over time. For Masons, I suggest your read my paper on Publicity & Public Relations for the type of things you should include in a Lodge's web page.

  

    HTML BASICS

    The purpose of the remainder of this paper is to provide an explanation on how to write HTML "Hyper Text Markup Language," a tag language used to develop web pages. As such, consider this your personal reference guide for writing HTML. It is intended as a primer on HTML for novices and a reference for experts, but does not represent an all-encompassing source of information on HTML (see the Reference section for additional sources of information).

    An HTML file (.HTM or .HTML) is essentially nothing more than a text file with special tags to manipulate the graphics and text shown in a web browser. There are two ways of developing an HTML file: using a common text editor (the preferred choice of the author), or to use a web authoring tool; for example, most of today's word processors provide the means to convert a document into HTML; there are also programs specifically designed to visially create a document and convert it to HTML.

    This paper will focus on the HTML tags themselves and not on web authoring tools. You can either print this web page accordingly, or view and print the HTML code used to produce it. To view the code, use Netscape's "Page Source" (under "View") or Internet Explorer's "Source" (under "View"). The HTML tags provide workable solutions for you to modify and use.

    Simply put, HTML tags consist of a left angle bracket (<), (a "less than" symbol to mathematicians), followed by name of the tag and closed by a right angular bracket (>). Tags are usually paired, e.g. <h1> and </h1>. The ending tag looks just like the starting tag except a slash (/) precedes the text within the brackets. In the example, <h1> tells the Web browser to start formatting a level-one heading; </h1> tells the browser that the heading is complete. The primary exception to the pairing rule is the <p> tag. There is no such ending tag as </p>.

    HTML is normally not case sensitive, it will accept both upper and lower case tag entries. However, some obscure web browsers still have problems reading upper case letters (particularly in the UNIX world) so we tend to use lower case throughout this tutorial. You may also wish to use lower case tag entries yourself.

  

    SETUP

    First things first; an HTML file must begin with the HTML tag itself:

    <html>

    And the last tag of the file must be:

    </html>

    The HEADing tag normally follows the HTML tag and is used to specify the heading of the web page: <head> </head>

    The TITLE tag is associated with the HEAD tag and expresses the name of the web page (at the very top of the web browser); for example:

<head><title>Palm Harbor Main Street</title></head>

    BODY tags normally follow the HTML and HEAD tags, and are expressed as: <body> </body> (normally going just before the </html> tag). The <body> tag is used to specify the default colors and fonts used in the body of the web page, along with background color or image. A typical example of a BODY tag is:

    <body bgcolor="#0000AA" text="#FFFF00" link="EEE000" vlink="#FF0000">

    In this example, "bgcolor" specifies the background color of the web page; in this case, it is blue (more on colors later). "Text" specifies the color of normal text; in this case, yellow. "Link" specifies the color of a web link; in this case, bright yellow. "Vlink" specifies the color of a selected link; in this case, red.

    Each color has a unique six digit identifier which is assigned according to industry standards. Basic colors include:

  
Black rgb=#000000
Blue rgb=#0000FF
Blue, Dark rgb=#0000AA
Bronze rgb=#8C7853
Brown rgb=#BB0000
Brown rgb=#A62A2A
Brown, Dark rgb=#5C4033
Cyan rgb=#00FFFF
Gold, Bright rgb=#D9D919
Green rgb=#00FF00
Grey rgb=#C0C0C0
Magenta rgb=#FF00FF
Red rgb=#FF0000
Red, Bright rgb=#EE0000
Red, Dark rgb=#AA0000
White (as used here) rgb=#FFFFFF
Yellow rgb=#FFFF00
Yellow, Brightrgb=#EEE000
  

    BACKGROUND

    Before we leave the BODY tag completely, there is one variable worth mentioning, the BACKGROUND tag which supersedes the BGCOLOR tag and permits the use of a graphic (such as a JPG or GIF file) instead of a color backdrop. For example, the following BODY tag with BACKGROUND JPG file (palmlog1.jpg) results in the background picture:

  
<body background="palmlog1.jpg" text="#000000" width=480 link="#00FFFF" vlink="#00FF00">

 
PALM HARBOR MAIN STREET
 


    FONT

    As we have seen, the BODY tag is used to establish the default standard for text formatting. However, there will be instances where it is to override font styles. To this end, there is the FONT tag which can be used to adjust size, color, and style. To illustrate:

  
<font size=+1>Text</font>
=
PLUS 1 EXAMPLE
<font size=+2>Text</font>
=
PLUS 2 EXAMPLE
<font size=-1>Text</font>
=
MINUS 1 EXAMPLE
<font size=-2>Text</font>
=
MINUS 2 EXAMPLE
<font color="#00FFFF">CYAN EXAMPLE</font>
=
CYAN EXAMPLE
<font color="#00FF00">GREEN EXAMPLE</font>
=
GREEN EXAMPLE
<font color="#FF00FF">MAGENTA EXAMPLE</font>
=
MAGENTA EXAMPLE
<font color="#FF0000">RED EXAMPLE</font>
=
RED EXAMPLE
<font color="#000000">WHITE EXAMPLE</font>
=
BLACK EXAMPLE
<font face="arial">ARIAL EXAMPLE</font>
=
ARIAL EXAMPLE
<font face="times">TIMES ROMAN EXAMPLE</font>
=
TIMES ROMAN EXAMPLE
<font face="courier">COURIER EXAMPLE</font>
=
COURIER EXAMPLE
<font face="helvetica">HELVETICA EXAMPLE</font>
=
HELVETICA EXAMPLE
<font face="garamond">GARAMOND EXAMPLE</font>
=
GARAMOND EXAMPLE
<font face="sans-serif">SANS SERIF EXAMPLE</font>
=
SANS SERIF EXAMPLE

<font face="arial" size=+2 color="00FFF">CHANGE VARIABLES</font>
=
CHANGE VARIABLES


    BACKGROUND SOUND

    Adding background sound to a web page is a nice touch. Such audio typically requires a MIDI file (.MID) and MIDI file player which is standard on most computers. Consequently, the BGSOUND tag typically follows the BODY tag towards the front of the HTML file and is expressed as:

<bgsound src="sound.mid" loop="infinite">

    The LOOP statement will cause the MIDI file to play over and over continuously. If you want the file to play only once, omit the LOOP statement.
  

    INCLUDING IMAGES

    In addition to text, graphics and photos are frequently used in a web page. JPEG (.JPG) and GIF (.GIF) files are commonly used due to their efficiency in size. Bitmaps (.BMP) and TIFF (.TIF) files are not used because they are large and cumbersome for traveling over the Internet. A typical example of an IMAGE tag is:

<img src="palmlog1.jpg" align="middle" alt="Greetings from Palm Harbor">

    Resulting in:

Greetings from Palm Harbor

    In this example:

    • "img src=" - specifies the file to be used.

    • "align=" - specifies the location of the file in the web page; e.g., "left", "right" or "middle". NOTE: "middle" is the default.

    • "alt=" - provides the means to associate text with an image and is viewed simply by placing the mouse on the image (optional feature).

    Sometimes it becomes necessary to adjust the height and width of an image. Fortunately, this is made easy by "height" and "width" parameters on the image tag. To illustrate, let's use the same logo above but change its height and width:

    <img src="palmlog1.jpg" height=95 width=102 align="middle" alt="Greetings from Palm Harbor">

      RESULTS IN:

    Greetings from Palm Harbor

    ANIMATED GIF FILES

    An interesting technique for animating graphics has emerged in the form of an "Animated GIF" file. Essentailly, one animated GIF file includes several images that is played back sequentially much like a motion picture. For example:

Sample Animated GIF file

    You can either create your own animated GIF file using a GIF Construction Tool which can be commonly found on the Internet or you can download ready-made GIF files off of the Internet. GIF files are commonly used on the Internet but as a source for free files, try:

    3D Animated Flags - world and USA

    Roger's Animated GIF Files

    Free GIF's and Animation

    Museum of Web Art - MOWA

    Tim's set of Animated GIF files - requires PKUNZIP to unload the file.

    Tim's Masonic Logos - Masonic JPG and GIF files.

    One last word of warning about animated GIF files: as attractive as these files may be, try to use them sparingly. Animated GIF files tend to be larger in size than plain GIF files and JPG files. Consequently, they take longer to load in a web page.

  

    COMMON TAGS

    Now that we have established the basics, let's take a look at the tags commonly used in a web page.

  
<p> Paragraph (no </p> tag is required).
Inserts a blank line between text.
<p align="justify"> sets the alignment;
("left" and "right" are also acceptable entries.)
<br> Line BReak (no </br> tag is required)
Simpler than the paragraph tag; it forces the text directly following the tag on to the next line at the left margin without the addition of any white space.
<pre>
</pre>
PREformatted text (very useful for presenting
text "as is") (such as this).
<xmp>
</xmp>
Example; similar to the <pre> tag. Used to express examples.
<b>
</b>
Bold (text); sample: Your name
<i>
</i>
Italic (text); sample: Your name
<b><i>
</i></b>
Combining the Bold and Italic tags; sample: Your name
<u>
</u>
Underline text
<em>
</em>
Emphasize; sample: Another way to stress your point!!
<li> List Item (no </li> tag required). Normally used in relation to the Ordered List tag (<ol>) or the Unordered List tag (<ul>), see below.
<ol>
</ol>
Ordered List; sample Ordered List using the List Item tag (<li>):


<ol>
<li>First do this.
<li>Then do this.
<li>Then do that.
</ol>

RESULTS IN:

  1. First do this.
  2. Then do this.
  3. Then do that.
<ul>
</ul>
Unordered List; sample Unordered List using the List Item tag (<li>):


<ul>
<li>First do this.
<li>Then do this.
<li>Then do that.
</ul>

RESULTS IN:

  • First do this.
  • Then do this.
  • Then do that.
<center>
</center>
CENTER (text or graphics); sample:
Your name
<hr> Horizontal Rule (no </hr> tag required). For example, the line immediately below this text was drawn with the <hr> tag.

 

<table>
</table>
TABLE
<th> Table Header (to label the columns)
<td> Table Data (data to be placed inside a column/row coordinate.
<tr> Table Row (the end of a row)


    ANCHORS (ESTABLISHING LINKS)

    The ANCHOR tag is used in HTML to establish links to other Internet sites; e.g., Web sites, FTP sites, Newsgroups, E-mail, etc. The anchor tag is simply expressed as <a> </a> with its accompanying Hypertext REFerence (HREF) attribute. Let's look at some examples:

    A Web Link (HTTP; Hyper Text Teleprocessing Protocol)

<a href="http://www.phmainstreet.com/">Palm Harbor Main Street</a>

RESULTS IN:

Palm Harbor Main Street


    An FTP Link (File Transfer Protocol)

<a href="ftp://hobbes.nmsu.edu/">Hobbes</a>

RESULTS IN:

Hobbes


    A Newsgroup Link (NNTP; Network News Transport Protocol)

<a href="news:comp.os.os2.announce">OS/2 Announcements</a>

RESULTS IN:

OS/2 Announcements


    E-Mail (POP; Post Office Protocol)

<a href="mailto:johndoe@aol.com">John Doe</a>

RESULTS IN:

John Doe

    Even better, you can automatically fill in the "Subject" line of an e-mail message using the following tag:
<a href="mailto:johndoe@aol.com?subject=Web Inquiry">John Doe</a>

RESULTS IN:

John Doe
With the Subject line as: "Web Inquiry" (try clicking on "John Doe" above).


    As should be obvious, just about anything can be placed between the <a> </a> tags, both text and graphics. To illustrate, here is how we use an IMAGE tag to link to a web site:

<a href="http://www.phmainstreet.com/"><img src="palmlog1.jpg" align="middle" alt="Click on image to go to Palm Harbor Main Street"></a>

RESULTS IN:

Click on image to go to Palm Harbor Main Street


    An anchor is not restricted in use to just Internet sites, it can be used to associate images (to enlarge a "thumbnailed" photo) or to associate an audio file or multimedia file with an object. Let's look at a couple of examples:

<a href="palmlogo.jpg"><img src="palmlog1.jpg" align=middle alt="Click on photo to enlarge. Click Back to return."></a>

RESULTS IN:

Click on photo to enlarge.  Click Back to return.


<a href="timbryce.wav">Click HERE for audio file.</a>

RESULTS IN:

Click HERE for audio file.


    ACCESSING SUB-SECTIONS

    The anchor tag is also a convenient means to jump around in a single document. The Table of Contents section at the beginning of this document provides an excellent example. Because of the length of this document, it was necessary to break it up into smaller sections. In order to facilitate a quick reference for the reader, the Table of Contents was added to allow the reader to jump to a particular section in the document instead of scrolling.

    To illustrate, each section in the table of contents is labled such as:

    <a href="htmldoc.htm#intro">INTRODUCTION</a>

    And, as such appears as:

    INTRODUCTION

    Notice the use of the pound sign (#) to indicate an extension to the file "htmldoc.htm". The "#intro" extension is used to point to a NAME tag in the document. For example, the "Introduction" section of this document is coded as:

    <a name="intro"><b>INTRODUCTION</b></a>

  

    FORMS

    A form is a technique for collecting data, e.g., to make an inquiry, order a product or service, etc. The FORM tag <form> </form> can be placed anywhere in the body of an HTML file and is expressed as:

    <form method=post action="mailto:youremail@anywhere.com">

    In this example, "method" and "action" instructs the computer to post (send) the data to an e-mail address (a common use of the FORM technique). Another example is:

    <form method=post action="http://www.phmain.com/test.cfm">

    This example sends the data to a .CFM (ColdFusion) file for processing. It can also be processed by other such technigues, such as CGI scripts.

    Following the FORM tag <form>, the user can use different techniques for collecting data:

  

TYPETAGHOW USED
Field Entry<input name="field">To type data into a specific field.
Check Boxes<input type="checkbox" name="1" value="identifier">To select multiple choices.
Radio Buttons<input type="radio" name="1" value="identifier">To make one selection from multiple options.
Selection List<select name="identifier">Similar to Radio Buttons; to make one selection from multiple options. Handy for long list of options.
Text Area<textarea name="identifier" rows=10 cols=64>Excellent for expressing general comments.
Push Button<input type="submit" value="SEND">To request immediate action.


SAMPLE FORM
(using the techniques mentioned above; try it!)

Press Send to transmit, press Clear to blank the fields.


    SPECIAL TAGS

    During the course of writing a web page, there inevitably will be occasions when the user will need to express special symbols. Here is a basic list of such symbols and how to code them:

  

&amp;
=
& ampersand
&cent;
=
¢ Cent symbol
&yen;
=
¥ Japanese Yen sign
&pound;
=
£ English Pound (Sterling)
&copy;
=
© Copyright notation
&#153;
=
™ Trademark (TM)
&reg;
=
® Registered trademark
&#174;
=
® Registered trademark
&middot;
=
· Center Dot
&frac14;
=
¼ Fraction 1/4
&frac12;
=
½ Fraction 1/2
&frac34;
=
¾ Fraction 3/4
&iquest;
=
¿ Inverted question mark
&lt;
=
< Less than symbol
&gt;
=
> Greater than symbol
&#201;
=
É (accented; Large E)
&#233;
=
é (accented; small e)
&Aring;
=
Å (A ring)
&oslash;
=
ø (O slash)
&ouml;
=
ö (O double-dot)
&aelig;
=
æ (combines AE)
&252;
=
ü (European)
&deg;
=
° Degree
&247;
=
÷ Division sign
&126;
=
~ Tilde
&nbsp;
=
Space Filler (blank)

For a more complete list of codes, see The HTML Document Character Set.

<blink>HEY, LOOK AT ME! </blink>

RESULTS IN:

HEY, LOOK AT ME!

    META TAGS

    Another technique for hiding text, yet conveying important information is the META tag <meta> (there is no </meta> tag). This is primarily used to simplify the process of registering a web page with search engines by embedding special <meta> comments in an HTML file (in the HEAD section <head> </head>). META tags are statements hidden from public view yet are automatically read by search engines to update their data bases with certain entries describing a web page. For example:

    <head>
    
    <meta name="Title" content="Corporate Web Page http://www.corporate.com/">
    <meta name="Author" content="John Smith jonh@aol.net">
    <meta name="Subject" content="Coporate products and services">
    <meta name="Description" content="Located in Tampa, Florida.">
    <meta name="Keywords" content="CORPORATE FLORIDA TAMPA">
    <meta name="Generator" content="MS Front Page">
    <meta name="Language" content="English">
    <meta name="Expires" content="Thu, 04 Oct 2010 14:21:20 GMT">
    <meta name="Abstract" content="Describes our company's products and services.">
    <meta name="Copyright" content="2002">
    <meta name="Designer" content="Charlie Hustle charlie@aol.net">
    <meta name="Publisher" content="ABC Company">
    <meta name="Revisit-After" content="3 Days">
    <meta name="Distribution" content="Global">
    <meta name="Robots" content="All">

    Notice the company name and web address included in the first statement; keywords in the fifth line. All of these entries are used by search engines (although some are highly optional). To illustrate, keywords are words or phrases used by Web surfers to look-up a site in a search engine. For example, the search request may be: "CORPORATE, TAMPA, FLORIDA". From this, a web address would be displayed. Although you can give a search engine as many keywords as desired, typically 10 are used. Keywords should include: your business name, geographical location (city, state), products or services, trademarks, synonyms, and common misspellings.

    TRICK: Copy the "Keywords" meta tags five (5) times in your HTML. This will aid search engines in finding your web page (and push it up in the "hit" ratings, thereby displaying it as one of the first listings).

    Click HERE for a handy Meta Tag Generator.

    USING THE UL TAG FOR INDENTING

    A clever way to setup a basic indentation of text in a web page is the UNORDERED LIST <ul> </ul> tag as mentioned earlier. By simply putting the <ul> statement at the beginning of a section of text, the text is thereby indented evenly; to illustrate:


      The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

          The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

    Here is the code used to create the preceding example:

    <ul>
    The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the 
    lazy dog.  The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    <p>
    <ul>
    The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the 
    lazy dog.  The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    <p>
    <ul>
    The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the 
    lazy dog.  The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    </ul>
    </ul>
    </ul>
    

    Notice how the text is indented with the introduction of each <ul> comment. Also, observe how a </ul> tag must be used to close each level; three levels, three sets of </ul>.


    USING THE TARGET= TAG

    As we have discussed, the anchor tag is used to link to other web pages. However, there may be occasions where it is necessary to spawn a second web browser window; e.g., so readers do not lose their place in your web page. To do this, use the TARGET= attribute in the ANCHOR tag and have it point at your main web page. For example, INDEX.HTM is the principal file used here; as such, it becomes the target:

    <a href="http://www.phmainstreet.com/mba/" target="index">MBA's HOME PAGE</a>

    TRY IT: MBA's HOME PAGE

  

    JAVASCRIPT

    JavaScript is a special script language you can embed within an HTML file to perform specific tasks. Free JavaScript code is made available at JavaScript Source. One important note when using JavaScript, remember to include the following tags in your JavaScript:

    <!-- hide from older browsers
    <!-- ending hiding -->

    These tags are for the benefit of older browsers that do not support JavaScript.

    Two well-used examples of JavaScript is to show the time and a marquee to display special messages.

    SHOW TIME

    The following JavaScript code is used to indicate the last time a web page (HTML file) was updated:

    <script language="JavaScript">
    <!-- hide from older browsers
    document.write ("<center><small><b>Web page updated: " +
           document.lastModified + "</b></small></center>")
    <!-- ending hiding -->
    </script>
    

    RESULTS IN:

  
Configure your access code.

  
  





Web page produced by M. BRYCE & ASSOCIATES (MBA) of Palm Harbor.
Copyright © 1999- by M&JB. All rights reserved.