Your First Web Page:
A General Overview of How to Begin

by Valerie Elchuk
(Click above to read Val's bio)

This brief lesson will give you a guide to creating a website, even if you have no knowledge of HTML. First, I recommend using a simple WYSIWYG HTML editor (see definitions, left). Both Internet Explorer and Netscape (you'll want to download the most recent versions of both), come packaged with editors.

IE downloads with a program called FrontPage and Netscape has an editor integrated into it. In Netscape (version 4 and above), go to Communicator - Page Composer. If you've downloaded and installed the full version of Internet Explorer, you should be able to find FrontPage by going to Start - Programs - Internet Explorer.

Once you've found the editor, take some time to learn the program. Usually, most of the functions (copy, cut, paste, font choices, etc.) work very similarly to a word processor.

Don't worry about colors just yet. You'll need to learn the basic functions of design before you decide what you want your site to look like. Look at other series to see what they've done, but remember -- there is a fine line between emulating and imitating. Nobody likes a design thief!

While you're learning the functions of your HTML editor, be sure to practice using links and graphics. You'll want to put all your files in the same directory. This way, when you're ready to type in the link address or graphic source, you only have to type "file.htm" rather than "http://www.whatever.com/directory/subdir/file.htm."

(Note: this is only if you want a file within your site. If you're linking to someone else's website, you have to type in the whole thing.) Also, make very sure the link does not point to your hard drive -- you can recognize this error if your link starts with either "C:\" or "file:\\\C." Once it's uploaded you'd be the only person able to see the file.

In your test document, put some text in the body of the document--it doesn't matter what just now, but type several paragraphs. Learn how to make a few things bold and italics. Save the document.

Now you'll want to look at the code that's behind your document -- known as source code. To me, the best way to do this is to open the file in your browser. In Internet Explorer, hit CTRL-O, then browse for your file. Once it's open, go to View - Source. The HTML code looks complicated to someone just learning, but it's really rather simple. You should notice a few things:

<p>blah</p> surrounds your paragraphs
<b>blah</b> surrounds things that are bold
<i>blah</i> surrounds things that are italics

These should be easy enough to remember, and they are three of the most important codes. When you write your episodes and character profiles, you'll probably want to write them in a word processor so you can edit them more easily. You can pre-format them for HTML as you do using those simple codes.

Now, copy the entire HTML code into a word processor document. Save the file as a text document, but remember to type in a .htm or .html file extension. If you don't, it won't work. Also, use only one word in your file name. (If you use Word, I do not recommend using the HTML editor that comes with it.) Once you've saved the files here, you don't need FrontPage again until you're ready to fully design the site, so you can close it.

Delete the body text you typed in before, including any HTML code that was in it, but only the body text. Type in some new stuff using the HTML codes you've just learned. If you want to get tricky you can view the source codes of other sites on the internet to see how they've done things.

Try making some links and graphics by just typing the code. You can look at another site to see how it's done if you don't remember from the links and graphics you made. When you've got some new text in, go to File - Save As and save it as you did before (don't go to File - Save or you will overwrite your first file).

Then, view this new file in your browser as you did before. Does it look the same as the first, only with new text? If it looks exactly the same, you've done it right. Play with this for a while. You can learn a lot of HTML by looking at other source codes. Try to stick with simple sites at first. Many HTML editors put in a lot of unnecessary code and spacing that will just confuse the beginning designer. For example, some HTML editors like to add tabs to distinguish different cells in tables--these aren't necessary.

Although this essay mostly deals with WYSIWYG editors that hide the code from you, I definitely recommend that you try to learn the basic HTML commands. Some people say that learning HTML is obsolete, but it will make your life easier in the long run and make you a better designer.

It's very easy to rely on HTML editors, but you can't use them effectively unless you understand what they're doing--especially since most editors can't do everything HTML can. Many web service providers like Geocities offer their own drag-and-drop editors--do not use these! They produce pages that are rudimentary at best, and ugly and filled with errors at worst.

In further essays, we'll discuss coming up with a good design for your series; we'll also discuss how to find web space and put your files on it. There are some things to consider, and it's important not to rush into it. You'll be excited about your new series and wanting to show everyone, but you shouldn't show the world until you're ready to debut with a fully functional site. You've worked hard on the project--you want to leave a good first impression. Good luck!

About Valerie Elchuk:

Valerie Elchuk writes and produces the online series Victoria's Legacy and Liberty Creek. She lives in Victoria, British Columbia, and studies English and Professional Writing full-time at the University of Victoria. In addition, Valerie works with Third Space, a UVic feminist publication, and is increasingly involved in campus activism. She is spending the summer working as a reporter on her home town newspaper, the Record, and enjoying her first apartment.

Back to top of page.

Was this article helpful?

Extremely helpful Very helpful Somewhat helpful Not very helpful Not helpful at all View Results