Special Edition Using HTML 4

Previous chapterNext chapterContents


- 4 -
Creating Basic HTML Documents

by Robert Meegan and Mark R. Brown

Starting with the Basics

It is important to realize that an HTML document must be built on a very specific framework. This framework, in its simplest form, consists of three sets of matched container tags.

A tag is a simple markup element, and always takes the form <TAG>. A container is a pair of HTML tags of the form <TAG> </TAG>. You can think of the <TAG> element as turning something on, while the </TAG> turns that same thing off. For example, consider this line of HTML:

<I>This is in Italics.</I> But this isn't.

The first HTML tag, <I>, turns on italics. The second tag, </I>, turns them off. When displayed on-screen, this line of text would look like this: This is in Italics. But this isn't. The tags themselves don't appear on-screen. They just tell the browser program how to display the elements they contain.

The simplest possible HTML document is given in Listing 4.1. The entire document is enclosed in the <HTML></HTML> container tags. The first part of the document is encapsulated in the <HEAD></HEAD> container, which itself contains a <TITLE></TITLE> container. Finally, the body of the page is contained in a <BODY></BODY> container.

Listing 4.1  The Simplest HTML Document

<HTML>
<HEAD>
<TITLE>A Very Basic HTML Document</TITLE>
</HEAD>
<BODY>
This is where the text of the document would be.
</BODY>
</HTML>

The most fundamental of all the tags used to create an HTML document is, not surprisingly, the <HTML> tag. This tag should be the first item in your document and the corresponding end tag, </HTML>, should be the last. Together, these tags indicate that the material contained between them represents a single HTML document (refer to Listing 4.1). This is important because an HTML document is a plain text ASCII file. Without these tags, a browser or other program isn't able to identify the document format and interpret it correctly.


NOTE: While most of the recent browsers properly interpret a document that is not contained within the <HTML> start and </HTML> end tags, it is still very important to use them. Many of the new uses for HTML documents, such as e-mail and Usenet postings, do not necessarily involve browsers, and the other programs are more likely to interpret an ASCII document as plain text without the hint that the <HTML> tag provides.

The </HTML> end tag is just as important as the start tag. It is becoming possible to include HTML documents within e-mail messages and news postings. Without the </HTML>, the viewer does not know when to stop interpreting the text as HTML code.

The Document Heading

The document head container is not a required element, but a proper head can greatly increase the usefulness of a document. The purpose of the head is to provide information to the application that is interpreting the document. With the exception of the TITLE element, the elements within the head element are not seen by the reader of the document.

Elements within the head element do the following:

Listing 4.2 shows an example of an HTML document with a proper HEAD element.

Listing 4.2  A Fairly Detailed HEAD Element

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
<LINK HREF="mailto:rmeegan@ia.net" REV="made">
<BASE HREF="http://www.ia.net/~rmeegan/civil">
<ISINDEX PROMPT="Enter the desired name">
<META HTTP-EQUIV="EXPIRES" CONTENT="31 Dec 1997">
<META NAME="Last Modified" CONTENT="16 Dec 1996">
<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic,
 War Between the States">
<META NAME="Description" CONTENT="A listing of the general officers of the US
 Army in the Civil WAR">
</HEAD>
<BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN">
<BASEFONT SIZE=3 FONT="Georgia, Century Schoolbook, Times New Roman">
<H1><FONT COLOR="YELLOW">Union Generals of the American Civil War</FONT> </H1><BR>
This listing contains the names of the general officers of the Regular Army
  and of the Volunteer Army, as well as the date of their appointment to the
 rank.<BR><BR>
 The names are taken from<BR>
<CITE>
Statistical Record by Frederick Phisterer<BR>
Published 1883, New York<BR><BR>
</CITE>
In all cases only the full rank is given. Many officers had a <EM>brevet</EM>
 (or temporary) rank that was often one or two ranks higher than the full rank.
 Remember also, that it was possible for an officer to have rank in a state
 militia, the Volunteer Army, and the Regular Army; all at the same time. With
 brevet ranks taken into account, it was possible for an individual to have as
 many as six ranks simultaneously, depending upon who he was dealing with.
</BODY>
</HTML>

The HEAD element is opened by the start tag, <HEAD>. This tag normally should immediately follow the <HTML> start tag. The end tag, </HEAD>, is used to close the element. The rest of the head element tags are located within this container.

Naming Your Document

The TITLE element is the only required element of the heading. It is used to give your document a name. This title is generally displayed in the title bar of the browser. The TITLE should not be confused with the file name of the document; instead, it is a text string that is completely independent of the name and location of the file. This makes it highly useful, the file name is generally constrained by the operating system of the computer that the file is located on.

The TITLE element is delimited by a <TITLE> start tag and a </TITLE> end tag. The actual title is located between these tags. Do not enclose the title in quotation marks unless you want it to appear with the quotes. It is most common for the TITLE element to be all on one line.

The title text is a string of unlimited length that can include any text except for the few special characters that are restricted in HTML. In practice, it is a good idea to keep the length of the title fairly short so that it fits on the title bar. Another thought to keep in mind when making up a title is that many browsers use the title as the caption for the icon when the browser is minimized. Try to make the first few characters particularly meaningful.


NOTE: The TITLE is normally used as the default name when a user creates a bookmark or Favorites link to the document. To make this default as useful as possible, avoid having a title like Home Page or Index. Entries like this are nearly useless in a bookmark list.

Listing 4.3 is an example of a document TITLE. Figure 4.1 shows how Microsoft Internet Explorer uses the document TITLE as the title of the browser window.

Listing 4.3  An Example of the TITLE Element

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

FIG. 4.1
Titles provide your readers with a way to identify your documents.

Creating a Document Hierarchy

HTML documents often have a relationship with other documents. This relationship is most frequently in terms of a link to another document. Links to other documents can be relative or absolute (see Listing 4.4). Each of these links poses its own problems. Absolute links can be long, cumbersome, and prone to breakage when the child document is moved. Relative links are easier to type and update, but they break when the parent document is moved.

Listing 4.4  Absolute and Relative Links

<HTML>
<HEAD>
<TITLE>News Links</TITLE>
</HEAD>
<BODY>
<IMG SRC=/gifs/news.gif ALT="News">          <-- Relative Link -->
<UL>
<BR><A HREF=http://www.cnn.com>CNN Interactive</A>
<BR><A HREF=http://www.usatoday.com>USA Today</A>
</UL>
<P>
<IMG SRC=//www.ia.net/~rmeegan/gifs/mags.gif ALT="mags">   <-- Absolute Link -->
<UL>
<BR><A HREF=http://www.infoworld.com>Infoworld Magazine</A>
<BR><A HREF=http://www.zdnet.com>Ziff-Davis Publications</A>
</UL>
<P>
</BODY>
</HTML>

This might sound unlikely, but consider that a long document might be downloaded to a user's machine so that he might read it when offline. Any links, such as a bibliography, would be unusable when the local copy was viewed. If the user wanted to link to other documents or images, he would first need to reopen the first document on the computer where it normally resides.

Fortunately, the designers of HTML anticipated this problem and have added two elements, BASE and LINK, that can be placed in a document head to help keep a document relationship straight.


NOTE: If you're just learning HTML, you might want to skim through this section. It isn't necessary to use the BASE and LINK elements until you start developing complicated documents that require many pages.

The BASE Element  The BASE element is used to specify the full original URL of the document. This allows relative links to work, even if a document has been moved to another directory (or even to another machine!). In this way, a BASE element allows the viewing software to find a document link, even when directed from a parent in a different location. The BASE element has a single required attribute which provides the full URL of the document: HREF. Listing 4.5 provides an example of how the <BASE> tag is used.

Listing 4.5  Using the <BASE> Tag

<HTML>
<HEAD>
<TITLE>News Links</TITLE>
<BASE HREF="//www.ia.net/~rmeegan">
</HEAD>
<BODY>
<IMG SRC=/gifs/news.gif ALT="News">
<UL>
<BR><A HREF=http://www.cnn.com>CNN Interactive</A>
<BR><A HREF=http://www.usatoday.com>USA Today</A>
</UL>
<P>
<IMG SRC=/gifs/mags.gif ALT="mags">
<UL>
<BR><A HREF=http://www.infoworld.com>Infoworld Magazine</A>
<BR><A HREF=http://www.zdnet.com>Ziff-Davis Publications</A>
</UL>
<P>
</BODY>
</HTML>

Notice that the BASE element directs the viewer software where to look for the files. Even if a person has downloaded the file to his local machine, the little images for News and Mags can still be found, assuming that the reader's machine has access to the Internet.

The LINK Element  If the BASE element allows a browser to locate a document, there still exists the question of what the relationship between two documents might be. This becomes even more important as the complexity of your HTML document increases. To connect documents together logically, HTML includes the LINK element. The LINK element indicates the relationship between the document that contains the <LINK> tag and another document (or other object). It consists of an URL that points to the reference object and an attribute that serves as a description of the relationship. In other words, if a parent HTML document provided a link to the current child HTML document, the current document could provide a <LINK> tag back to the parent to indicate that relationship. A document can contain as many LINK elements as needed to describe all of the relationships. Table 4.1 lists all of the attributes and their functions.

Table 4.1  LINK Attributes and Their Functions

Attribute Function
HREF Points to the URL of the other document.
REL Defines the relationship between the current document and persons who have contributed to its existence.
REV Defines the relationship between another HTML document and the current document.
TYPE Specifies the type and parameters for a linked style sheet.

There are many different relationships possible, and the list is not well defined in the HTML specification. The most common REV relationship is "made", which provides a link for e-mailing a document's author, as shown in the following example:

<LINK HREF="mailto:nul@utexas.edu" REV="made">

This gives the URL for communicating with the document author. The URL in this instance is the instruction to open an e-mail message addressed to nul@utexas.edu. Sandia National Laboratories, which is on the forefront of HTML document publishing, also recommends the following REV relationships to individuals with a connection with an HTML document: "author", "editor", "publisher", and "owner".

Some examples of relationships to other HTML documents that can be indicated with the REL attribute are "bookmark", "copyright", "glossary", "help", "home", "index", and "toc".

There are also two relationships that are most commonly used in ordered documents: "next" and "previous". These are particularly useful relationships. Listing 4.6 shows the HEAD element for a document that is a chapter in an online manual.

Listing 4.6  Using the <LINK> Tag

<HTML>
<HEAD>
<TITLE>Using the Satellite Identification and Tracking System (SITS)</TITLE>
<LINK REV="made" HREF="mailto:rmeegan@ia.net">
<LINK REL="toc"  HREF="contents.htm">
<LINK REL="index"  HREF="index.htm">
<LINK REL="copyright"  HREF="copyright.htm">
<META NAME="Description" CONTENT="An on-line manual for the SITS">
</HEAD>
<BODY>
</BODY>
</HTML>

Customized Heading Information

Although it might seem that the elements that can be placed in a document heading already cover every imaginable possibility, the truth is that they barely begin to scratch the surface. Because the procedure for the development and approval of a new HTML specification is rather slow, the companies that produce browser software often create several releases in the time between specification versions. To provide additional functionality, one final element is provided for the heading.

The META element allows a document author to define information that is outside of HTML. This meta-information can be used by the browser software to perform activities that are not yet supported by the official HTML specification. As a rule, META elements are not needed for a basic HTML document, but you should keep these elements in mind as you gain experience and as your pages become more sophisticated.

Figure 4.2 is an example of how the META element can be used to have the browser perform an action.

Looking at the example, you can see the following line:

<META HTTP-EQUIV=refresh" CONTENT="60" URL="www.fdline.org/homepage.html">

This is interpreted by Netscape Navigator and Microsoft Internet Explorer as the instruction to wait 60 seconds and then load a new document. This kind of instruction is often used when a document is moved from one location to another. A small document can be left at the previous location to serve as an automatic pointer to the new location.

A similar command line

<META HTTP-EQUIV=refresh" CONTENT="60">

can be used to have the browser reload the page every 60 seconds. This is useful for a page that has frequently updated information, such as a stock price ticker.

FIG. 4.2
A browser can interpret commands in the META element to perform actions such as loading a new page automatically.


NOTE: Both of these techniques are known as client pull because the client, your browser, requests the new document from the server. These are advanced techniques, and you don't need to use them except in circumstances when data is changing or the page needs to be reloaded.

Finally, the most popular use of a META element at the present is to use the Keywords property. Many search engines preferentially use the words defined in this element to index the document. This can be used to provide additional keys to an index that might not actually appear in the document verbatim. Listing 4.7 shows how this works.

Listing 4.7  Using META Elements

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic,
 War Between the States">
<META NAME="Description" CONTENT="A listing of the general officers of the US
 Army in the Civil WAR">
</HEAD>
<BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN">
</BODY>
</HTML>

When designing a document that will be indexed by a search engine, it is also a good idea to use the Description property. Most indexes use this description for your page, if it is present. If no description is present, the index uses the first text available on the page, which can be confusing to some using the index.

For more on the topic of search engines, see Chapter 40, "Listing Your Web Site in the Search Tools."


NOTE: The Keywords and Description properties are good first choices when you start to use META elements. Both of them are easy to understand, and they add a lot of value to your documents.

The syntax for the META element includes the attributes shown in Table 4.2. Much like the relationships in the LINK element, the properties of the META element are not clearly defined in the current version of the HTML specification.

Table 4.2  META Attributes and Their Functions

Attribute Function
HTTP-EQUIV Defines the property for the element.
NAME Provides an additional description of the element. If this attribute is missing, it is assumed to be the same as HTTP-EQUIV.
URL Defines a target document for the property.
CONTENT Provides the response value for the property.

Other Heading Elements

There are two additional elements that can be found in the document heading. The first is the SCRIPT element and the second is the STYLE element. The former is used to add interactive control scripts to pages, while the latter adds various styles to page content.

The Document Body

Although the nature of the World Wide Web appears to be changing in the direction of increasing active content, most people who view your documents will still be interested in your text. This will be especially true for documents that are created for corporate intranets and for documents that serve as online manuals and texts. Because of this, whether you are converting existing documents or creating new ones, you will spend much of your time working in the body.

Starting with the Required Elements

Before you can fill in your document, you need to lay out a basic working framework. HTML documents must follow a defined pattern of elements if they are to be interpreted correctly. Rather than retype the elements that are used in every HTML document, it is a good idea for you to create a template to use for each of your pages so that you are less likely to leave out an important detail. At the end of this chapter, we build a template that you can use as a starter. Until then, we'll use the example presented in Listing 4.8.

Listing 4.8  A Basic HTML Document

<HTML>
<HEAD>
<TITLE>This is an example document</TITLE>
</HEAD>
<BODY>
Enter body text here.
</BODY>
</HTML>

This example begins with the <HTML> tag, which, as you have read, is necessary for every HTML document. Next is the <HEAD> tag, which opens up the heading part of the document. This contains the TITLE element. We've titled the document "This is an example document." The heading is closed with the </HEAD> tag. Finally, the <BODY> element follows. This is where you place the bulk of the material in your document. Remember to close the body element with the </BODY> tag and finish the page with the </HTML> tag.

Because HTML is a markup language, the body of your document is turned on with the start tag, <BODY>. Everything that follows this tag is interpreted according to a strict set of rules that tell the browser about the contents. The body element is closed with the end tag, </BODY>.


NOTE: Strictly speaking, it isn't absolutely necessary to use the <BODY> start and end tags; HTML allows you to skip a tag if it is obvious from the context. (In this case, <BODY> would be implied after the ending </HEAD> tag, and </BODY> would be implied before the ending </HMTL> tag or the end of the document.) However, it's still a good idea to use them. Some older browsers and other HTML programs can become confused without them and may not display the document correctly.

In the preceding basic document, the body text is a single line. In your document, you replace this line with the main text of your document. Unless you are using a special HTML editor, you must enter your text using a strict ASCII format. This limits you to a common set of characters that can be interpreted by computers throughout the world.


NOTE: Most browsers consider all nonblank white space (tabs, end-of-line characters, and so on) as a single blank. Multiple white spaces are normally condensed to a single blank.

Attributes of the BODY Element

The BODY element supports a large number of attributes. These are all important for determining the general appearance of your document. Table 4.3 lists these attributes and their functions for your convenience, but we cover each of them in more detail.

Table 4.3  BODY Attributes and Their Functions

Attribute Function
ALINK Defines the color of an active link.
BACKGROUND Points to the URL of an image to use for the document background.
BGCOLOR Defines the color of the document background.
BGPROPERTIES If this is set to FIXED, the background image does not scroll.
LEFTMARGIN Sets the width of the left margin in pixels.
LINK Defines the color of an unvisited link.
TEXT Defines the color of the text.
TOPMARGIN Sets the width of the top margin in pixels.
VLINK Defines the color of an already visited link.

Coloring Your Documents

The first small step toward creating a document is to define the colors that will be used for the various text components. If you do not specify any colors, the default colors are used. These are normally set by the reader on her viewer.

Cascading Style Sheets, which are discussed in Chapter 17, "Applying Cascading Style Sheets," are the latest and greatest way to adjust a page's colors and other styles. However, there are easy-to-use <BODY> tag attributes that can also give you elementary control over the colors of your page elements.


NOTE: Because you have no way of knowing which colors have been selected as defaults by the reader, it is considered good HTML practice to set all of the colors, if you set any. This way, the same color isn't used for more than one component.

There is no simple rule that can be used to define a well-balanced palette, but remember that your readers must actually read your document. Try to maintain a high contrast between the text and the background and don't make the color differences too subtle.

Color Definitions  Colors are defined in HTML using a hexadecimal coding system. The system is based upon the three components--Red, Green, and Blue--which leads to the common name of RGB. Each of the components is assigned a hexadecimal value between 00 and FF (0 and 255 in decimal numbers). These three values are then concatenated into a single value that is preceded by a pound sign (#). An example of such a value is #800080, which is purple. Because few people can visualize colors based solely on a hexadecimal value, HTML defines 16 standard color names, which are listed along with their hexadecimal values, in Table 4.4. Yahoo! maintains an extensive list of Web sites which feature color table information at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/Color_Information/.

Table 4.4  Standard Colors and Their Values

Color Value
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFFF

You can use either these color names or their values when defining colors for HTML document elements. For example, the following lines are equivalent:

<BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="WHITE">

The Body Color Attributes  The BGCOLOR attribute is used for the document background color. If your document has a background image, the BGCOLOR should be as close the primary color of the image as possible. This allows readers who may not be downloading images to see your text clearly. Many authors make this common mistake, which is particularly bad if the background image is primarily black and the text color that you selected was white. In this case, the reader of your document is greeted by the sight of what is apparently a blank page! For example, if you are using a background graphic that is mostly black, you should also add the BGCOLOR="black" attribute to your page's <BODY> tag.

The TEXT attribute is the color used for the text in the document. Because most of your text appears in this color, it should be chosen to provide the reader with sufficient contrast. If you have elected to set the font, be aware that fonts with fine detail are often easier to read when they are dark against a bright background.

The LINK attribute is used by the browser for links that have not yet been followed. This color should be obviously different from the TEXT color, so that readers can identify links.

The VLINK attribute is used to identify links that have already been visited. A common choice for VLINK is to use a darker version of the LINK color.

The ALINK attribute marks links that are currently active. This is a relatively recent development and is normally used for documents that have multiple frames. Quite frankly, choose your other colors first; the reader is least likely to see this color than any of the others. See Chapter 12, "Framing Your Web Site," for more information about frames.

Having seen all of the things that can be colored in an HTML document, you might wonder if the results justify the effort. If you are creating a static document--such as a manual or a textbook--you might be best off to let the reader set the colors that she wishes to use. On the other hand, if your document is a high-energy page with a lot of graphics, then it is certainly worth the time to find the right blend of colors.

Filling in the Background

One popular way to dress up an HTML document is to add a background image. A background image is a graphics file that is visible under the document text. Using a background can help provide continuity to a document, or it can also serve to differentiate the various pages.

Most background images are small and are tiled across the viewer window like wallpaper. Images of textures are particularly popular for this purpose; bricks, marble, and cloth are often seen on HTML documents. Most of these serve only to fill in the blank space on the document, though. More interesting documents have a background that fits the theme of the page. Figure 4.3 shows an example of an astronomy page that uses a pattern of stars as the wallpaper.

Other types of wallpaper that can make a document look good include a corporate logo or other image. These should be very subdued, almost monochrome, so as not to interfere with the foreground text or distract from your document's message. One way to accomplish this is to emboss an existing image using a graphics program. Chapter 22, "Graphics," discusses some of the tools available for creating these images. Figure 4.4 is an example of how this can be used.

FIG. 4.3
Using a background image that fits your document is a nice, professional touch.

FIG. 4.4
A company logo, embossed into a monochrome background, can give continuity to a collection of documents.

A background can also be created to watermark a document. This type of background can be used for an official seal or for a text message such as Draft or Confidential.

Background images look good, but they won't be seen by someone who's turned off the automatic loading of images. Remember the advice in the BGCOLOR section and set the background color to match the primary color of the image, so that your page is readable even if the reader doesn't get to see the background.


NOTE: The BGPROPERTIES attribute is unique to Microsoft Internet Explorer. The only acceptable value for this attribute is FIXED. If BGPROPERTIES=FIXED, the background image does not scroll with the text. This is a nice effect with a wallpaper background and is useful if you've created a watermark background.

Commenting Your HTML Documents

It is possible to add comments to your HTML document that aren't seen by a reader. The syntax for this is to begin your comment with the <!-- tag and to end it with the --> tag. Anything located between the two tags is not displayed in the browser. This is a convenient way to leave notes for yourself or others. For example, you can enter a comment when new material is added to a document that shows the date of the new addition.


CAUTION: Don't assume your comments can't be seen by your readers. Most browsers allow the source of your document to be viewed directly, including any comments that you have added.

On the other hand, don't try to use comments to "comment out" any HTML elements in production documents. Some browsers interpret any > as the end of the comment. In any case, the chances of an older browser becoming confused are pretty good, resulting in the rest of your document being badly scrambled. If you are going to use comments to cut out HTML elements while you are testing the document, you should remove them in the final release.

The Address Element

One of the most important elements for your documents is the ADDRESS element. This is where you identify yourself as the author of the document and (optionally) let people know how they can get in touch with you. Any copyright information for the material in the page can be placed here as well. The address element is normally placed at either the top or bottom of a document.

The ADDRESS element consists of text enclosed by an <ADDRESS> start tag and an </ADDRESS> end tag. The text within an ADDRESS element is normally displayed in italics.

Listing 4.9 is an example of one such address element, and Figure 4.5 shows how it looks.

Listing 4.9  Using the ADDRESS Element

<HTML>
<HEAD>
<TITLE>Amateur Astronomy on the World Wide Web</TITLE>
<META NAME="Keywords" CONTENT="Astronomy, Telescope, Stargazing">
<META NAME="Description" CONTENT="Amateur Astronomy resources available on the Web">
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW" >
</HEAD>
<BODY>
<FONT SIZE=3 FACE="Verdana, Arial, Helvetica">
<BR>
<H1>Amateur Astronomy on the World Wide Web</H1>
<HR>
<H2>Magazines</H2>
<OL>
<LI><A HREF=http://www.astronomy-mall.com/Astronomy-Mall/?190,54>The Astronomy Mall</A> - A place to find many amateur astronomy companies.
<LI><A HREF=http://www.skypub.com>Sky On-line</A> - Publishers of <I>Sky and Telescope</I> and <I>CCD</I> magazines.
</OL>
<HR>
<ADDRESS>
Created by Robert Meegan<BR>
Last Modified on 16 Dec 1996
</ADDRESS>
</BODY>
</HTML>


NOTE: A very important addition to the address is to indicate the date you created the document and the date of the last revision. This helps people determine if they have already seen the most up-to-date version of the document.

FIG. 4.5
The ADDRESS element is used to identify the author or maintainer of the document.

Creating a Document Template

Now, let's build a basic document template that you can use with your documents. This template allows you to start converting some of your existing documents to HTML. In the following chapters, you will see how to expand upon this template.

Let's begin with the required tags: <HTML>, <HEAD>, </HEAD>, <BODY>, </BODY>, and </HTML>. You also need to include the TITLE element, as this is a required element in HTML. Finally, put in a dummy line of text to remind yourself where to put the text. This gives you Listing 4.10.

Listing 4.10  A First Pass at a Basic Document Template

<HTML>
<HEAD>
<TITLE> A Basic Document Template </TITLE>
<HEAD>
<BODY>
Put the body text in here.
</BODY>
</HTML>

This would certainly suffice for a basic document, but you can do a lot better without much effort. First, let's add a simple gray textured background to the document, which changes the <BODY> tag to:

<BODY BACKGROUND="greybg.jpg">

Earlier in the chapter you read that if you add a background image to a document, you should set the colors so that the reader can see your text. First, set the BGCOLOR attribute to GRAY. This is the closest match to the background. We'll also set the TEXT to BLACK, and LINK, ALINK, and VLINK to BLUE, GREEN, and RED, respectively. These additions change the <BODY> tag to

<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",
 LINK="BLUE", ALINK="GREEN", VLINK="RED">

You should have an ADDRESS element for the document, so add the following:

<ADDRESS>Created by Robert Meegan<BR>
Created on 16 December 1996</ADDRESS>

Of course, you'll want to put your own name in the ADDRESS.

When all of these are added to the first pass of the template, you get Listing 4.11.

Listing 4.11  Your Final Basic Document Template

<HTML>
<HEAD>
<TITLE> A Basic Document Template </TITLE>
<HEAD>
<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",
 LINK="BLUE", ALINK="GREEN", VLINK="RED">
Put the body text in here.
<ADDRESS>Created by Robert Meegan<BR>
Created on 16 December 1996</ADDRESS>
</BODY>
</HTML>

The results of this template can be seen in Figure 4.6.

FIG. 4.6
The results of the basic document template opened in Netscape Navigator.

As you learn more about HTML, your template will grow and become more sophisticated. Until then, this simple document should prove to be sufficient for most purposes.


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.