5 Minute Web Page Builder

Welcome !! This is most useful to people who are new to building web sites. If you follow the instructions below, you will have a web site on your disk within about 5 minutes. This will be a generic site, however you will then be able to customize it by rearranging the code. Once you are satisfied, you can proceed to upload it to GeoCities or some other provider of space for web sites.

Before we start, you should have downloaded to your computer, Microsoft's Internet Explorer.

Netscape's Navigator with Composer works well too, however it would require extra explanation, and I wanted this to be a 5 minute web page. There are a number of HTML editors that are free and work well also, but they require time to figure out, and are not neccessary to get started. There are links below to Netscape Navigator and a couple of HTML editors that were recommended to me. (I don't use them myself)

Let's get to it!

You will need a floppy disk which I will assume is in your A: drive. Please print out these instructions before you click on any buttons. The buttons take you to other pages, so if you have forgotten what steps to take, and you did not print them out, you will need to use the back button on the browser menu to go back and re-read them.

When you click on the button you will be taken to a simple web page. If you follow these steps, you will have a copy of that web page on your floppy disk.

Please print these instructions before you proceed.

A) Below this paragraph there is a button that will take you to Terry's Page. When you are there, you will need to click on the View button on the browser menu. Then click the Source option. This will show you the code that generates the web page.

B) Now click on the File button on the browser menu. Then click on the Save As option. In the space provided for File Name, type the following: a:/index.html This changes the file name from terry to index.html which is the name required by web space providers for the main page. Press the Save button that should be just to the right of where the new file name was entered.

C) Get back to Terry's Page by minimizing the window containing the source code. Now it is time to copy the image files to the floppy disk. (You will eventually want different pictures on your page. This exersize will show you how it is done.) With the mouse on the picture of Terry, use your right mouse button and click on the picture. A menu should have appeared that says Save Picture As. Click on that choice. When the save box appears be sure that the image will be saved to the floppy disk. You should not have to change the name of the file. It should say "Terry" with a file type "jpg". If it doesn't, change it. Once all is in order, press the save button.

Go through the same procedure to save the Catmice image to your floppy as well. The only difference is that the file type for this image should be "gif".

Saving the background has a similar procedure. Put your mouse arrow on the background away from other text or pictures, click using your right mouse button, and choose the Save Background As menu option. Save the file to the floppy disk and change (if necessary) the file name to: Back and the file type should be gif .

Congratulations!!! You should now have Terry's page on your floppy disk. To find out, go to your browser and type a:/index.html

You should see the page as it was on the web. Now of course it is time to customize the page to your needs. If the page showed up as predicted, you should be able to click the view button on the browser menu, choose the source option, and start changing the code. I have made comments in the code and seperated sections so that you can tell which part of the code affects the portion of the page you are interested in. Simply copy portions of the code, and paste them where you would like. Then minimize the source code window, click the refresh button on the browser menu, and you should see what changes you have made. Delete anything you don't want, replace Terry.jpg with your own pictures and you should be in business.

Note: Image files should be either .jpg or .gif to work on simple web pages. This requires a special camera or a scanner, along with some software that saves files in .jpg or .gif format. There are many other image formats, however they simply don't work on web pages. A picture file named Terry.bmp cannot be changed to Terry.gif by simply replacing .bmp with .gif. The file is written in a different language and requires special software like Paint Shop Pro to change it.

Note: When uploading files to a web site space provider, the machines they use are very case sensitive (Capital letters vs small case letters). If you have a file named Catmice.gif but the source code of your page uses catmice.gif, it won't work once it is loaded to the web site space provider. Because this happens often, I recommend that you use small case for all file names at all times. (You may have noticed that I use large case on some files and small on others. This is because I didn't know any better when I first started and I have never taken the time to go through all of the file names and change them.

 

Click here to get Netscape Navigator

Web Page Resources

Geo Cities The best provider of free personal web site space on the web. You get 11 megs of free space however they put some advertising on your pages.

Basic HTML Reference Guide This is the basic HTML page from Project Cool. Very well done, and easy to understand.

The Midi Farm This site has listings of other web sites that contain free music files (something.mid). Add some life to your site by adding some sound!

HTML Text Colors Samples Where you can get some idea of the different colors that can be used on your web pages along with their codes.

Pictures This is a page with free pictures you can use on your site. Mostly for demonstration purposes.

HTML Pad A free html editor that has been recommended to me to help develop web pages.

Webgrafx Animated GIF Archive A massive collection of animated picture files that can be used to bring life to your web page.

Windy's Design Studio Many different background files that give your page a little charactor. This site is very well done.

Paint Shop Pro A very good quality graphics program that is Shareware. I use this program for some of my graphics.

WinZip This is a very usefull shareware program. Install it and it will automatically unzip (uncompress) large files downloaded from the internet.

Cute_FTP A free program that helps you maintain your web site. A very user friendly window allows you to upload and download files from your PC to your web site by dragging them with your mouse.

Live Update "Crescendo" A free program that enables your computer to play midi music from the Web. Instructions at the site are easy to follow.

Doctor HTML Type in a web page address and it automatically gives an error analysis of the page.

Friends Pages

Dr. Nad's Home Page Dr. Nad's has animated GIF files, Jokes, 5 min. Web Page Builder, Java Applets and links to some of the most usefull sites on the web.

Mother Vista Another tutorial on how to make a web page with no previous experience. Written by a friend of mine who has a great deal of experience helping others.