and a body element:

Within the head element you place title elements and a title which will be displayed in the browser's title line and which will serve as your document's bookmark should anyone ever want to return to your home page. For example:

Other HTML elements are valid within the head element, but their use is beyond the scope of this introduction.

What We Have So Far

Consider the elements in bold to be the standard HTML boilerplate. You'll be including these statments in all of your documents.

Formatting the Body of the Document

We'll use the nursery rhyme Mary Had a Little Lamb as our reference document. We'll do two verses and, as you'll see, take some liberties with the rhyme. My apologies to Mother Goose.

If you follow the construction of this simple home page you'll be creating your own masterpiece in no time!

and all those in between. Some browsers allow the user to set the size and font of the individual header elements, so as an author, you don't necessarily have complete control over the appearance of your document.

Text Emphasis

Text emphasis or physical style is bolding, underlining and italicizing. Each is accomplished as follows:

If the text "Underline" above is not underlined your browser doesn't do underlining. Not all browsers do.

The Paragraph Mark, the Line Break and Horizontal Rule

You can input the text of your document any way you please. You can run out the text in long lines or put some words on a line by themselves (which you'll find yourself doing at times). The browser will take care to properly format each paragraph to fit the display. You need only tell it when the paragraph ends, or where you might like a line break within the paragraph.

This brings us to the last three HTML elements you need for this introduction to home page construction. The paragraph separator, the line break and the horizontal rule:

The horizontal rule draws a horizontal line the width of the browser window and is used to set off separate sections of your document. These three elements are used singly. That is, HTML doesn't define a closing element for them.

Next we'll look at adding an image to our demo page and a reference to an outside information source. Then, with all the elements defined we'll construct the final home page.

Images For Your Home Page

Images dress up your document. In general, any GIF file you care to use can be included on your home page. The only recommendation I would make is to neither include too many images nor make them too large. Loading images slows things down, especially in the older versions of Mosaic. You need to walk a fine line between making the page attractive and annoying your user. People get bored if they have to wait to long. They get mad if the wait isn't worth it!

To include a graphic use the following HTML:

where path/file.gif is the fully qualified file name of the GIF you want to include. For example, we'd like a "picture" of Lisa on our home page. Lisa's picture is in a file called lisa.gif which we have in our home directory. The HTML we'll use to include this picture is:

Wherever we place this bit of HTML we'll have a picture of Lisa.

Referencing Other Documents in Your Home Page

The last bit of HTML magic we'll learn is how to link to other sites on the World Wide Web. This is where the real power of the Web shows through. You can increase the interest and value of your home page by pulling in resources from all over the world. Don't be shy, use what's out there on your home page. There's no need to reinvent the wheel if what you want to show your users already exists elsewhere. Just link to it!

These links are referred to as URLs or Uniform Resource Locators. They're like file names, except that they can point to documents on any machine anywhere on the Internet and they can point to things other than just documents. For example, the mailto URL connects a hotspot (one of those blue highlights) on your home page to the email system making it exceedingly easy for users to send you email. We're going to keep it simple and just learn how URLs can be used to link in other documents.

Suppose you want to include a reference to a document called greatdoc.html on your home page. You know this document exists on a Web server called www.greatsite.com in the directory /pub/docs. To reference this document use the following URL:

If all you did was place this URL in your document it would be totally invisible to someone browsing your home page. Not very useful. You need to do one more thing. You need to associate some text with the URL that the user can interact with. The text you couple with the URL is called a hotspot. It will stand out on your page as blue (often underlined) text. You do the association by using the following HTML:

This associates the text My Hotspot with the URL. The text will appear blue, a color the browser uses to denote a hotspot.

The URL we used above is a fully qualified HTTP (Hyper Text Transport Protocol) reference. Sometimes you can use a partial or relative HTTP reference. For example, if another document you want to use exists on this same server, in the same directory you can access it by simply using the document name as shown here:

This is It. Your First Home Page!

Don't let the seeming mess below bother you. At first it looks intimidating. On closer inspection you should actually find it quite straightforward.

We've titled the home page, titled the rhyme with a header of size 1, selected a header size of two for the verse headings, wrote Lisa in bold and lamb in italics. The first verse is input without regard to the way lines were layed out in the original rhyme. In the second verse we break the lines as Mother Goose intended. Following the rhyme, and separated from it by a horizontal rule, is a line that contains a "picture" of Lisa and a reference to one of her favorite sites on the World Wide Web.

Take a look at our home page.

You can use the browser's copy function to lift the code from this page and paste it into Notepad. Then you can save the file and use it as a starting point for your own creation. Happy authoring!

If you're new to the Web and HTML documents, the links below should be of interest.

HTML Reference Material

More Advanced Reference Material