Introduction | Adapting Content | Making a Page | Finishing Up 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 web pages:

• To make a web page simply lay out your page as you would in a normal printed document, formatting fonts and inserting graphics and hyperlinks to other pages where you want them.

• When you are finished, use the "Save As" option under File on the top toolbar.

• When the "Save As" dialog box pops up, type in a file name, choose "Save as Type," and HTML.

• Your saved HTML file is then ready to be uploaded on the college's web server (the computer where your web pages will actually be located and made available through the Internet).

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 campus network.

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:

• Programs such as Microsoft Word and Corel WordPerfect were meant primarily to produce printed documents. Your ability to control the appearance of your web page will be somewhat limited. A stand alone HTML editor such as FrontPage 98 gives you more control over your web page, although at a considerable monetary cost.

• Word processors can make nice web pages, but they also have a tendency to "break" already functioning web pages. When opening previously saved web page files, word processors sometimes insert extra, unwanted HTML code in your documents. Once you've created your web page files and saved them, you should always make a copy of the files before you open them again. That way, if your word processor destroys the web page you've spent several hours creating, you can always get it back.

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:

<FONT>

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:

</FONT>

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 tag:

<HTML>

The very last thing on your web page should be this tag:

</HTML>

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> tag.

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:

<HTML>

<HEAD>

<TITLE>Put the title of the page here</TITLE>

</HEAD>

<BODY>

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.

</BODY>

</HTML>

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.

• If you are using a word processor to create your file, click on "Web View" or "View with Browser."

• A second method is to open your browser from the Start menu. When the browser comes up, click file, then open. Click browse, then My Computer. Choose the drive (usually a:\ for a floppy disk, c:\ for the hard drive). Click up or down through the folders (subdirectories) until you find the file you are looking for. Click on it and then click "Open."

• Another method is to open Windows Explorer (NOT Internet Explorer) under programs on your start menu. Browse through the folders (subdirectories) until you find your file. Double click on the file and your browser will open.

• A final method is to open the Start menu, click documents and click on the name of your document.