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:

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:

Click HERE for the complete list of color codes. For additional information, please see http://www.hypersolutions.org/rgb.html

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:

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:

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:

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:

Resulting in:

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:

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:

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.

PREformatted text (very useful for presenting
text "as is") (such as this).

<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>
<li>First do this.
<li>Then do this.
<li>Then do that.
</ul>

RESULTS IN:

• First do this.
• Then do this.
• Then do that.

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)

An FTP Link (File Transfer Protocol)

A Newsgroup Link (NNTP; Network News Transport Protocol)

E-Mail (POP; Post Office Protocol)

Even better, you can automatically fill in the "Subject" line of an e-mail message using the following tag:

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:

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:

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:

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:

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:

JAVA

The following is a list of some useful Java programs for inclusion in your web page. Most are derived from the Java Boutique:

• Java Boutique Top 100

  Navigational Bars

• First - very cool, with audio
• Second
• Third
• Fourth
• Fifth
• Sixth
• Seventh

  Graphic Efects

• Lake Applet
• Snow Applet
• Confetti Applet
• Orbiter
• Distorter
• Slideshow
• Bumpz
• Mfade

  Text Scrolling

• Dotz
• jsText - very cool
• Star Wars Scroller
• Advanced Typewriter Scroll
• LED Sign
• Pulse Text - medical orientation

  Password Protection

• Password Protect
• Secret Pass
• LoginPass

  Other Tools

• Seach to HTML - internal search engine
• J-Shop - sales cart
• jzChat - chat room
• Chatware - chat room
• AudioCentric - audio player
• Calculator
• Calculator

  Games

• Pac Man
• Slot Machine
• Asteroids
• Absolute - space shoot-em-up
• Jig Saw Puzzle
• Pool
• Ping Pong
• Cliffie