Design Considerations | Common Elements | HTML Reference | Color Table
The easiest way to design a web page is to use an
HTML-enabled word processor or an HTML editor. These options provide
WYSIWYG ("what you see is what you get") editing of
If you use Word 97 or Corel WordPerfect 8, the "Save
as HTML" option should already be available on your word
processor. WordPerfect 8 is available for free download over the
If you use and Microsoft Word 95 or Word 6 (Word
6 is also available over the campus network), there are plug-in
programs which allow you to "Save as HTML." These plug-in
programs, called "Internet Assistant for Word," are
also available as free downloads from the campus network or from
the Microsoft Web Site (www.microsoft.com).
There are two warnings about this easy option for
making a web page:
An alternative to using a word processor or HTML
editor to make your web page is hand code it. Professional web
page developers like this method because it gives them precise
control over the look of the page.
The disadvantage is that learning HTML code can seem
intimidating. If you have never seen HTML code, you should look
at some examples. Using your Internet browser, go to any web page.
In Netscape, click on View, then Document Source. Or, if you use
Microsoft's Internet Explorer, click on View, then Source. A window
will then pop up showing the HTML code for that page. You will
see some complex code which might discourage you from trying your
luck at hand coding.
However, HTML code is not nearly as complicated as
it looks. You can make surprisingly good-looking web pages by
just learning a few basics of HTML code.
You can create a web page using only a simple text
editor. Windows Notepad or WordPad (both in "Accessories"
under "Programs" on the Start Menu of Windows 95) are
good choices. Open up a new file, fill it with the content you
want to place on the web. When saving, chose "Save As,"
then "Plain Text" for type. Your file name must end
with the extension .htm
The nice visual effects you see in your Internet
browser are achieved by enclosing the content with HTML tags.
Each tag is a simple statement which begins with the "less
than" symbol < and ends
with the "greater than" symbol >.
Here's an example:
Tags usually come in pairs, an opening tag placed
at the point in your document where you want a certain visual
effect to begin on your web page and a closing tag, placed where
you want the visual effect to come to an end. The only difference
between the opening and closing tags is that the closing tag includes
a slash mark /. Here's an example:
Suppose you wanted to place a header at the top of
your page in large letters. Here's what the header would look
like in your text editor:
<FONT SIZE=6>THIS IS MY HEADER </FONT>
Here's a few basic tags that will get you going.
The Beginning and The Ending
The very first thing on your web page should be this
The very last thing on your web page should be this
Create a Header
Next, create a header section. The information placed
here will not show up in your browser window, but you can put
important information here for your browser to use. Begin your
header with the <HEAD>
tag, placed directly after the <HTML>
tag. Close the header with the </HEAD>
tag, placed directly before the <BODY>
tag (see below).
Add a Title
Next, include a title for your page. This will be
displayed not in your browser window, but in the colored bar at
the very top of your screen. Enclose your title with the <TITLE>
tag. Here is an example:
<TITLE>This is the title of my web page</TITLE>
Place your title right after the opening <HEAD>
Add the Main Body of Material to be Displayed in the Browser
After closing the header with the </HEAD>
tag, the next tag should be the <BODY>
tag. This defines the region where you are going to place the
content of your web page which will be seen in the browser window.
Place the closing </BODY>
tag just before the closing </HTML>
tag. In other words, the closing </BODY>
tag is the next to last thing in your web page.
Here is what the HTML tags look like all together:
<TITLE>Put the title of the page here</TITLE>
Place here everything you want to be seen in the window of a web browser. You can include text or graphics--anything you want displayed by the browser.
That's all there is to making a simple web page.
The code above would yield a simple web page, viewable by any
browser. You could hypothetically display your whole report this
way and post it on the Internet.
While your new page will be functional, it would
also be drab and unattractive. The page would be black text on
a gray background, with no formatting, pictures, or hyperlinks
to link your pages to others. You can improve the appearance of
your page by adding additional tags. You will find a list of additional
tags listed at the end of this document:
As you work on your web page, you can look your web
page in-progress by viewing it with the browser on your own computer.
There are several different ways to do this.
Dr. Harold D. Tallant, Department of History, Georgetown College
400 East College Street, Georgetown, KY 40324, (502) 863-8075