The World-Wide Web has had a profound effect on how people communicate. The web is a powerful publishing environment, interactive tool for information exchange, reference library, advertising medium, archiving system, and entertainment source. Publishing has never been easier, cheaper, or more powerful. It is well within the range of anyone who can use a word processor to create effective web documents using Hypertext Markup Language (HTML), the coding system on which most web communication is based. The purpose of this guide is to help you get create simple HTML-encoded documents. This is only a basic introduction to a markup system that has many refinements. A variety of detailed reference sources are available (a few are cited at the end of this guide).

How the Web Works

The Internet is a global network of many different types of computers all talking the same language. This network-of-networks is the infrastructure on which a variety of applications coexist. One of the fastest growing of these applications is the World-Wide Web, a document-distribution environment which is based on two basic principles. The first is that a user at one location on the Internet, using a common set of rules of exchange, can send a document request to a remote computer, which responds by delivering the requested document directly to the originating computer, where it can be displayed, and optionally printed or saved to disk. The second is that all the documents exchanged in this way are constructed using the same formatting language (HTML), which minimizes the problem of software/document incompatibility. Web communication involves two types of computers:

• The server, usually a large multi-user machine, is designed to store HTML-encoded documents, receive requests from remote computers, and deliver the documents that are requested.

• The client is a smaller computer, usually a personal computer sitting on someone's desktop, that uses "browser" software to send requests to servers and to process and display the documents that are returned to the client from the server.

Clients and servers communicate over the Internet using a naming and addressing system, not unlike a telephone or postal system, that makes it possible to uniquely identify a document from all the documents stored on all the servers in the world.

Creating HTML Documents

An HTML document is essentially a simple text file to which have been added specific codes, or "tags." The HTML tags imbedded in the document tell the browser (which receives the document over the Internet) how to process the file for display. The tags encode features of the document similar to the way word processors insert codes that control the appearance of the document, except that, unlike word-processor codes, HTML tags are plain-text alphabetic codes that can be displayed and edited in almost any editor. Another important feature of HTML codes is that they are not platform-specific. Browsers running on radically different computers all recognize the same basic set of tags, and treat them in more or less the same way. The paragraphs below describe how to produce and publish a simple HTML-encoded document.

Step 1: Create the Document

You can create a valid HTML document using any editor or word processor, as long as you save the file, not it its native word-processing format, but as a plain-text or "ascii" file (this is available as a save option in any word processor). If you were to save your document, for example, as a Microsoft Word file, even if the HTML tagging were correct, the added MS Word formatting information would make the file unreadable to browsers. In addition, HTML files should be saved with the extension .html or .htm, so that the browser will recognize them as HTML documents.

It is possible to create HTML documents on a variety of editors:

• Plain text editor. Simple text editors such as the DOS program Edit and the Windows program Notepad are perfectly serviceable tools for creating simple HTML documents. Since with these editors you have to insert the tags by hand, it is necessary that you have a working knowledge of HTML encoding, but this method is fast, clean, and nearly foolproof. This approach is most appropriate for the simpler HTML documents. Plain-text editors can become a burden to use as you begin to implement more complex HTML tags.

• HTML text editors. There are available, as freeware, shareware and commercial products, enhanced editors programs specifically designed for creating HTML documents. These programs are basic text editors at heart, and you still need to know HTML tagging to use them, but they contain various features that make the process easier.

• WYSIWYG HTML editors. These programs are a step above plain HTML editors, in the sense that they give you the option of handling text as it appears rather than in its plan tagged form, much as you would in a word processor. "WYSIWYG" stands for "what you see is what you get," which means that text can be displayed as it will appear in the browser, not merely as tagged text. These programs are faster than plain text editors and are particularly useful if you want to use some of the fancier features of HTML. A serviceable HTML editor is Composer, which comes as part of the Mozilla Suite,or you can install a freestanding version of Composer called N-Vu. Graphical editors are also included with comprehensive web publishing systems such as Microsoft FrontPage and Dreamweaver.

• Standard Word Processors used as HTML editors (not recommended). Many modern word processors, such as Microsoft Word and WordPerfect, give you the option of saving a document as an HTML file (you will usually find it listed as a "save as" option). This makes it possible to create a document as you normally would, and then automatically generate a tagged HTML version for publishing on the web. This sounds like a great idea, but it doesn't always work as well as it might. The problem is that the user has very little control over which tags will be inserted, and in many cases the resulting encoding is messy and difficult to edit, creating documents that are overly complex and hard to revise. A compromise is to use the word processor for the first pass, and then go through and clean up the document by editing the tags directly.

Step 2: Test the document

Particularly if you are creating your HTML document using a plain text editor, you will need to periodically view the document through a browser to make sure the tags are doing what you intend for them to do. Fortunately, even with plain text editors it is possible to accomplish this without going to the trouble of moving your file onto the server. If your computer has one of the standard web browsers such as Netscape Navigator or Microsoft Internet Explorer, you can use it to display HTML-encoded files stored on the local on the desktop. In Netscape, for example, use File - Open Page - Choose File, and select the file from the local directory display. In Windows, you can run the editor and the browser at the same time, each in its own window, and switch back and forth between the programs to monitor your progress.

Step 3: Load the document on the server

You can't publish your HTML documents from your personal desktop computer. To make your documents available over the web, you will need to move them onto a suitable web server. All students, faculty, and staff at Aurora University have access to AU's web server for this purpose. Staff in the Information Technology Services office can upload your web documents onto the server so that they become accessible over the web, or alternatively can show you how to store your HTML files in your own personal storage area. For details on AU's various forms of web support, consult the Web Publishing Policy on the web at http://www.aurora.edu/is/webpolicy.htm, or contact the ITS offices.

A Basic HTML Document

HTML documents are highly structured. Many of the elements are optional, but there are several structural features which, according to the HTML standard, must be present. Here is an example of a basic HTML document in its entirety:

<html>
<head>
<title>A Basic HTML Document</title>
</head>
<body>
This is a really simple web document.
</body>
</html>

This is perfectly legal HTML document, which would be displayed in a web browser as follows (less the box):

This is a really simple web document.

We'll analyze this program line-by-line in a moment, but first, a few notes on HTML tags:

• HTML tags are always placed inside angle brackets (the "less than" and "greater than" symbols), which are standard keyboard characters. Browsers know that anything inside these brackets should be interpreted as an instruction, not displayed as normal text.

• Most (but not all) tags have an opening and closing component, with some sort of text in between. Closing tags are often identical to the opening tag, with one exception: they begin with a slash ("/"). Browsers interpret the opening tag as an instruction to implement the feature encoded by the tag, and to continue displaying that feature until it is "switched off" by the closing tag.

• The text inside tags can be in either upper or lower case. Some web editors use upper case because it makes the tags easier to distinguish from regular text, but the choice is yours.

Here is a line-by-line analysis of the syntax from the example page above.

Lines 1 & 8. The entire document is enclosed in the <html>…</html> tag pair. This identifies the file to the browser as an HTML-encoded document.

Lines 2-4. Within the HTML document, there are two main sections. The first section, enclosed in the <head>…</head> tag set, is the header section and contains information that is used by the browser but is not actually displayed as part of the document.

Line 3. The one essential component of the header section is the title, tagged as <title>…</title>. The term "title" is somewhat misleading, because the text between these tags is not displayed as the title in the document, but appears in the top margin of the window that is used to display the document, and is also used in other ways by the browser. This title should be concise and descriptive.

Lines 5-7. The second required section is enclosed in the tags <body>…</body>. This section contains the text and images that are actually displayed by the browser.

 

A Simple HTML Toolkit

A large number of HTML tags are available, some quite complex, and more are being added as the HTML standard is further defined. Also, many simple tags can take additional attributes, optional parameters that change the way they work. These are usually included inside the opening tag and take the form of a name and a value connected by an equals sign.  A surprisingly large percentage of basic documents, however, can be created with just a small set of basic tags. Here is a listing of some of these tags and what they do:

Setting up Hyperlinks

As any regular user of the web can tell you, one of the most powerful features of the web is its support for "hyperlinks" that point from one document to another. The two documents may be sitting in the same directory on the same computer, or they may be on computers ten thousand miles away from each other -- as long as the link contains the correct address for the target file, the browser can locate it and deliver it to you when you click on the reference. You do not have to "own" the document that you link to. But because you don't control the remote document, its owner may rename, relocate, or delete that document at any time without warning, rendering your link useless. The tag used to create such a link is a bit more complex, but well worth learning because hyperlinking is the heart and soul of the web. Here, for example, is a link that retrieves the Aurora University home page:

<a href="http://www.aurora.edu/">Aurora University Home Page</a>

Note that the tag has three components:

1. The entire link is enclosed in the "anchor" tag pair <a>…</a>.
2. The opening anchor tag contains a parameter naming this particular anchor type as a "hypertext reference," or href, and assigns it (using an equals sign) the URL for the target page, in this case "http://www.aurora.edu/". The quotation marks are required.
3. In between the opening and closing tag is the link text, in this case "Aurora University Home Page," which the browser will ordinarily display in blue underlined characters. When the user clicks on this highlighted text with the mouse, the browser extracts the URL and uses it to locate, retrieve, and display the referenced page.

Learning More about HTML

This document is not designed to be any more than a basic introduction to the tags that you will normally use in developing text-oriented pages. As you become more confident in your abilities, you may wish to learn to execute more sophisticated HTML functions. Here is a brief summary of areas for further study.

• Images. Graphical images in a variety of formats (including simple graphical elements such as buttons and decorative borders, charts and graphs, bitmapped renderings of text, and photographs) can be inserted in an HTML document through the use of the <img> tag. The file containing the graphical element is not incorporated into the source document, but is loaded on the server as a separate file, and displayed at the appropriate location when the page is delivered to the recipient.

• Tables. The <table> tag set makes it possible to organize text in ways that would not otherwise be possible. Applications include spreadsheet-style displays of numbers, text organized in columns, and pages with areas of whitespace in the right and left margins.

• Font control. The <font> tag, combined with a variety of parameters, can be used to manipulate the size, color, and typeface of text.

• Forms. Most web information moves only one direction, as documents are delivered from the server to the client. But using various interactive form structures, it is possible to create two-way communication tools, in which the client-side user can fill out online forms and return that information to the server for further processing.

One of the best ways to learn to use tags is to look at what others have done. When you are browsing the web and see a page you like, use the View Page Source option to display the actual tags used to create the document. For more detailed study, a large number of books about HTML, ranging from basic introductions to technical manuals for experienced programmers, are currently available. An excellent sources for information on the creation of web documents is actually the web itself. Here are the URLs of some useful tutorials and HTML guides:

The Beginners Guide to HTML (http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html). A useful and readable tutorial, produced at NCSA, birthplace of Mosaic, the first graphical web browser.

The Bare Bones Guide to HTML (http://werbach.com/barebones/). Kevin Werbach's introduction to web publishing, including a quick reference to all the HTML tags and the syntax for using them.

Introduction to HTML (http://www.cwru.edu/help/introHTML/toc.html). A summary of terms, concepts, and information on using HTML tags. Produced at Case Western Reserve University.

Web Monkey (http://hotwired.lycos.com/webmonkey). A commercial site containing a wide variety of aids for both beginning and experienced HTML editors.

Web Style Guide (http://www.webstyleguide.com). An excellent guide for creating good looking and effective web pages.