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> . . .
<h6> . . .
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 or physical style is bolding, underlining and italicizing. Each is
accomplished as follows:
<b> . . .
- Bold font
<i> . . .
<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
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
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.
Lisa Had a Little Lamb
<h1> Lisa Had a Little Lamb
<h2> Verse #1: Lisa and Her Lamb
</b> had a little
</i> its fleece was white as snow; and everywhere that
</b> went the
was sure to go.
<h2> Verse #2: Her Lamb Goes to School!
It followed her to school one day,
which was against the rule;
it made the children laugh and play
to see a
</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
More Advanced Reference Material
İRJ Witte & Associates,
Inc. 2701 Lemoore Road, Alameda, California 94501
Phone: (510) 337-1567 Fax (510) 217-3505
January 06, 2003.