CREATING YOUR OWN WEBPAGE-- PART 1

John R. Barnes 6/03/2001 revised 6/27/2001
jrbarnes@iglou.com
http://members.iglou.com/jrbarnes/

Have you been thinking about creating a personal webpage, but putting it off because you don't know where to start? Or maybe you are hesitant to spend time and money on an authoring program that you might use only once? Read on, and learn how you can create webpages using standard software that comes with your computer!

You need just four items to create and put a webpage on the Internet:

  1. An editor that will output ASCII-- Notepad, WordPad, PE2, etc.
  2. An Internet browser-- Internet Explorer, Netscape Navigator, Netscape Communicator, etc.
  3. A file transfer (ftp) program-- ftp from the MS-DOS Window, etc.
  4. Information from your Internet Service Provider (ISP):

So, if you have Windows 95, Windows 98, or a later version of Windows, you already have all the software you'll need. You should find your ISP-specific information on their website. If not, an E-mail or phone call to your ISP's help desk will get it for you.

The basic process for creating a webpage is:

  1. Write your webpage in HyperText Markup Language (HTML).
  2. Save the file in ASCII with a .htm or .html extension (homepages will be default.html, default.htm, index.html, or index.htm)
  3. Open the file with your browser, and view/test it-- you do all this on your own computer, and can repeat steps 1-3 (just doing a refresh or reload from the browser) until you are satisfied.
  4. Ftp the webpage and any associated files to your ISP's server.
  5. Open the webpage using your URL-- view, test, and admire your handiwork.
  6. Share the URL with your friends and others!

The basic framework for any webpage is these few lines:
<HTML>
<HEAD>
  <TITLE>Title of Your Webpage</TITLE>
</HEAD>
<BODY>
  Contents of Your Webpage
</BODY>
</HTML>

A couple of comments before we jump into writing HTML. Many servers run Unix, so filenames may be case-sensitive. Create all files and enter all filenames in lowercase, using a-z and 0-9. Make your HTML easier to read by entering HTML commands and modifiers in uppercase, using A-Z and 0-9.

The contents of your webpage will be text mixed with HTML commands. Most HTML commands take the form <COMMAND>object</COMMAND> or <COMMAND MODIFIERS>object</COMMAND>

You may string HTML commands together like this: <COMMAND1>object1</COMMAND1> <COMMAND2>object2</COMMAND2>

Or you may embed HTML commands inside other HTML commands like this: <COMMAND1><COMMAND2>object1&2 </COMMAND2></COMMAND1>

It is very important to have <COMMAND> followed by the corresponding </COMMAND>. So I find it easiest to write HTML from the outside in:

  1. <COMMAND></COMMAND>
  2. <COMMAND MODIFIERS></COMMAND>
  3. <COMMAND MODIFIERS>object</COMMAND>

The contents of your webpage may be any desired mixture of:

Unless told otherwise, the browser will just concatenate text, ignoring tabs and multiple spaces. To end a line, put in a <BR> break command. To end a line and force a blank line for spacing, put in a <P> paragraph command. These commands do not have an object, so they do not require an ending </BR> or </P>.

You can emphasize text by making it a header. <H1>text</H1> makes the tallest, widest headers. <H2>text</H2> is a little smaller, going on down to <H6>text</H6> which is about the same size as regular text. Headers automatically put a blank line before the following text or images.

The two most-common types of lists are:

Unordered lists begin each entry with a bullet (circle, square, or disk depending on the depth of sublists). The basic HTML is:
<UL>
  <LI>first item
  <LI>second item
  ...
</UL>

Ordered lists begin each entry with a number. The basic HTML is:
<OL>
  <LI>first item
  <LI>second item
  ...
</OL>

You can embed a .gif (GIF89a format) or a .jpg image into your webpage with a <IMG SRC="url"> or <IMG SRC="url" ALT="description"> command. The URL can be just filename.extension if the .gif or .jpg file will be in the same directory as the webpage. .gif files are usually created with a paint program. .jpg files are usually scanned or downloaded from a digital camera. If you search the Internet for Clipart or "Clip Art", you can find large collections of images that you may use for free.

Links are one of the most powerful and useful features of HTML. To link to another webpage, use a <A HREF="url">description</A> command. To link to another spot within your own webpage, use a <A HREF="#anchor">description</A> command. The target of the link, or "anchor", is marked with a <A NAME="anchor">text/image</A> command.

Tables are an excellent way to organize large amounts of data. The HTML for tables, additional types of lists, and other options for making text stand out will be discussed in part 2 of this article.

Once you are satisfied with the webpage on your own computer, you need to ftp the webpage and any associated files to your ISP's server. Using ftp in the MS-DOS window:

  1. Connect to your ISP in the normal way.
  2. Open an MS-DOS window (Start > Programs > MS-DOS Prompt).
  3. Move to the directory with your webpage using a cd command.
  4. Start ftp with a ftp ISP's_server command (this starts you off in ASCII mode).
  5. Enter your account name and password.
  6. Check your location on the server with a pwd command.
  7. Move to another directory on the server, if needed, using the cd command.
  8. Upload your webpage using a put filename.extension command.
  9. If you also want to upload .gif or .jpg files, change to binary mode with a bin command.
  10. Upload the image files with put filename.extension commands.
  11. Verify that the filenames are all in lowercase with an ls, ll, or dir command. (6/27/2001)
  12. Correct any filenames, if needed, with ren oldfilename.extension newfilename.extension commands. (6/27/2001)
  13. Terminate the ftp session with a quit command.
  14. Start your browser, and go to your URL to view it in its full glory! NOTE: There may be a delay between uploading your files and being able to browse them, if your ISP has to transfer the files between servers. (6/27/2001)

Turn on your computer and try your own hand at creating a webpage! If I have piqued your curiosity, and you would like to read the next part, click on this link.