Home Web Page Helps Launching Points Portfolio Feedback

Your Home
Using Forms
Counter & Date
Counter Options
Reducing SPAM

Creating Your Own Home on the Web

Preparing a Home for Your Home Page

Your home page needs a home. The specially formatted file -- which you must name index.html or index.htm (case is important, all lower case) -- must be placed in public_html, a sub-directory of your home directory. To create the public_html directory under your home directory, use a FTP program, log onto Provide Net (hostname: www.provide.net), and create the directory (i.e. mkdir public_html).

NOTE: Frontpage Users, The Frontpage Publish Wizard will automatically walk you through the necessary steps to publish. The host will be www.provide.net, the subdirectory is /your_login_id/public_html.

Your Home Page Address

You need to tell people where to find your home page. They need its URL or Web address. The Web address of a personal home page on Provide Net is:


For example, if your login ID is john, the Web address of your home page is:


This only works if your home page is named home.htm or index.htm. If you give it any other name, you then must append that name in the Web address. For example:


If you have problems or questions about any of the above instructions send a note to the WebMaster.

With the preliminaries out of the way, let's experiment by creating a demo home page.

A Demo Home Page

Writing a home page is not nearly as difficult as you might expect. If you're new to the process, then this section is for you. If you've been around the block a few times, then you might want to skip this section and just take a look at the references. They'll help to expand your HTML knowledge.

The home page we're about to do will be quite simple in content and presentation. The text should ring familiar. Simple or not, working through this demo will introduce you to the basics of home page construction.

At this stage of your HTML authoring career you'll need nothing more than a simple text editor to do very sophisticated things. Later, you might want to explore the shareware and commercial tools that are available to make the HTML authoring task easier.

An HTML document is composed of text and graphics -- the home page data -- and HTML elements telling the Web browser how to format, position and otherwise act on your data. Your Web pages should start and end with standard HTML boilerplate. It's a good idea to include these statements in all of your documents even though you'll find that many Web browsers do just fine without them.

Your document should start with:


and end with:


You'll find that many - not all - of the formatting elements are paired and surround the text they're to affect. The pair of opening and closing elements differ only slightly. Note above that the element that says "this is the end of the HTML document" has that extra "/" in it. Invariably the closing element differs from the opening element only by the slash. Don't forget it, or you'll get an unintended effect.

The document is, in turn, composed of a head element:


(Just a title)


and a body element:


(The body of your document)


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:

Mary Had A Little Lamb

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.



Mary Had a Little Lamb

Text of Nursery Rhyme


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!


A heading is used to title a section of your document. Heading sizes range from 1 to 6. The HTML heading elements surround the heading text. For example:

<h1> . . . </h1>

Largest Heading

<h6> . . . </h6>
Smallest Heading

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:

<b> . . . </b>
Bold font
<i> . . . </i>
<u> . . . </u>

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:

marks the end of a paragraph
starts a new line.
draws an engraved horizontal line.

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:

<img src="path/file.gif">

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:

<img src="$HOME/lisa.gif">

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:

<a href="URL"> My Hotspot </a>

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:

<a href="otherdoc.html"> Another Hotspot </a>


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.



Lisa Had a Little Lamb

<h1> Lisa Had a Little Lamb </h1>
<h2> Verse #1: Lisa and Her Lamb </h2>
<b> Lisa </b> had a little <i> lamb, </i> its fleece was white as snow; and everywhere that <b> Lisa </b> went the <i> lamb </i> was sure to go.
<h2> Verse #2: Her Lamb Goes to School! </h2>
It followed her to school one day,
which was against the rule;
it made the children laugh and play
to see a <i> lamb </i> at school.


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

A Beginner's Guide to HTML is the standard primer.
Ian Graham's HTML Documentation is a well written manual.
HTML Quick Reference Guide has a summary of HTML syntactical elements.
Style Guide for Online Hypertext gives do's and dont's on document style.
The Absolute Resource from Webbie to Webmaster Comprehensive Guide.

More Advanced Reference Material

Composing Good HTML more on style and errors to avoid.
W3C - World Wide Web Consortium Official standards-making organization.

Sign Your Donor Card -- Link to Change of Heart Newsletter
İRJ Witte & Associates, Inc. 2701 Lemoore Road, Alameda, California  94501
Phone: (510) 337-1567 Fax (510) 217-3505

Last Updated: January 06, 2003.