How to build your own personal web site -- for free!

How To Build
Your Own Personal Web Site
-- For Free!

When I first decided to create a personal home page I found lots of help on individual topics on the internet, but I found only a few about web site development from the ground up. Most of those were sketchy and all assumed some prior knowledge. What I have tried to do here is start from scratch and explain the basics for beginners. I have emphasized resources that are available at no cost.

This page is written by an amateur for amateurs. If you have any experience in web site development you will likely find no new information here except possibly for links to resources you may have not stumbled across before.

I will not bother to duplicate information available elsewhere on the web. There are many different sites that specialize in different topics of interest to web site developers. I have provided links to many of the better ones.

Getting Started
Before you actually construct your page here are five things you need to consider. First, your content -- the information you wish to present. Second, your layout and design -- how you want your page, or pages, to look and function. Third, the file location -- a server to host your files where the rest of the world can get to them. Fourth, knowledge of hypertext markup language, or HTML -- the language used to write files so they can be interpreted by web browsers. And finally, if you want to enhance your site with some photos or graphics, you'll need some basic knowledge about graphics formats and resources.

Content
Obviously you already have something in mind or you would not have surfed into this page to begin with. Conventional wisdom says don't make a general page about yourself. No one will be interested. Instead pick a topic in which you are expert and put together a site that will be a useful resource to the internet community. That's probably good advice if you're concerned about "hits", or visits from web surfers. On the other hand I see no reason why you should not build a page just for the sheer enjoyment of it. If you do build a general page that would be of little interest to anyone outside your circle of family and friends do the rest of the internet community a favor and don't advertise your page to search engines or through banner exchanges. There is too much clutter out there already.

Layout and Design
The best way to get ideas, of course, is to visit other sites and see what others have done. Look around and formulate an idea for an initial test project. Keep it simple. You can add to you design in stages. As a learning exercise I would recommend incorporating at least two or three pages in your site, some images, some text links, some image links, and a couple of tables.

File Location
A web page is nothing more than a file. For the rest of the world to view your pages you'll need to find an internet host server that will allow you to store your files there. If you subscribe to an online service, your online service may provide you with a small amount of space for free on their server. I believe America Online does this. If you have a direct connection to the internet through an internet service provider, or ISP, they too may offer this service. A good place to start looking for information may be their home page.

Many ISP's do not provide this service. Even if they do you may find the amount of space they offer is too small. Perhaps, like me, you would like to have your web site permanently established at an unrelated location. That way you can change ISP's or online services at will and not have to move your web site. Moving you web site means you'll have to change your URL (uniform resource locator), which is the address the rest of the world uses to find you. Unless you keep both sites for a period of time after a move and put a "moved to" message on the old one, it would be a little like moving to another city and leaving no forwarding address.

If you are not already aware of this, you may be surprised to find there are services on the web who will give you space on their server for free. Why would they do this? There are several reasons. One is, they may sell advertising and post banners somewhere on your page. A second is, they may hope you will get hooked on the idea of a personal web site, outgrow your free space, and eventually be willing to pay for additional space. I have not seen any hosts that offer free space to businesses. You must use the space for personal, non-commercial purposes to get it for free.

So that you won't have to change your URL after you get established, be very particular about the host you pick. Find out how much space is available for free and how much additional space costs. Find out if they have any restrictions on content that you're not willing to live with. See if they provide little extras like a "hits" counter and guestbook. Visit some pages on their server and see if the response time is reasonable. See if they offer support for some basic CGI scripts. Decide if you can live with the banners they place on your pages. You may want to put some test pages on several different free services before you decide which one to go with permanently. Try out their coding and file upload facilities. Check out their site index or housekeeping page. See if they provide a facility to upload and delete multiple files.

There may still be a few antiquated host sites around that don't support uploading of files. Do not waste your time with any of them.

HTML
For your visitors' browsers to be able to interpret your files and display them as you intend, your pages must be written in a language called hypertext markup language, or HTML. If you are not a programmer, don't panic -- HTML is, as the name says, a markup language, not a programming language. It does not support mathematical calculations, looping, decision branching or any of the other characteristics of programming languages. Basically it is just a collection of tags that tell the browser how to display the elements of your page...how big or small, the color, the placement, etc. Trust me, it's easy.

There are plenty of good books on the subject. If you decide to buy one, be sure to get one that talks a little about Javascript, CGI scripts and VBA scripts. If you decide to move beyond the basics you'll at least be curious about those topics. I have Instant HTML by Steve Wright, published by Wrox. It's as good as any.

By far the best HTML reference for beginners is right under your nose at this very moment. When you select VIEW/DOCUMENT SOURCE from your browser menu it will display the underlying HTML code that rendered the document you were just reading. Find some pages you like, then look at the source to see how they did it. If you can't make any sense out of the source, it may mean they have done something fancy with scripts or frames. You need to steer clear of those advanced topics for your first attempt anyway.

If you're still not convinced you can code HTML, you might ease your anxiety by getting a code generator. You can download Netscape Navigator Gold from the Netscape web site. It is available to individuals for free evaluation for an unlimited amount of time and it contains an HTML code generator in addition to the browser. I tried it and found it interesting and helpful for learning. I could create elements on the page and then view the source code that the generator used to create the effect. In the end though I found it simpler to just write the code myself since that gives you a greater degree of control. Of course if you have deep pockets there are some high-priced software tools that will produce slick pages with no knowledge of HTML required. If you look around you will run across other interesting tools, for example, I heard of one that will turn your Microsoft PowerPoint page into an HTML file.

Graphics
Your first attempt at a web page may consist of nothing but text, but it won't be long till you'll get the itch to dress up your pages with some graphics or photos. Don't get carried away though, too many graphic images will make your page load too slow.

There are several different types of graphics that can be incorporated into an HTML file and displayed by the more popular browsers. The two most common are .gif and .jpg, (or .jpeg).

JPG is the most common file type used for color photos. If you use a scanner to scan photos you want to display on your web site, save the as file as type .jpg. If you would like to scan some photos or other artwork but don't have a scanner, you might want to check at Kinkos. The location near me has a scanner that can be rented for around $20 an hour and they have an idiot-proof set of directions to follow.

Another option is to get your photos put on disk or CD when you have them developed. If you request the photos on disk option when you get photos developed at Kmart, they will come back in .jpg format. You may have to use the software that comes with photos on disk from other retailers to convert from their proprietary format to JPG. I've tried photos on disk developing a couple of times and found the quality to be so-so. But when you remember that a decent scanner will set you back about $350, suddenly the photos on disk look much better. Incidentally, if you're shopping for a scanner, don't be tempted to get one of the cheapies if you are primarily interested in scanning photos as opposed to documents.

Here's another technique I haven't tried: Use your camcorder or VCR to "snap" images. You can play the video on your computer and snap the frame you want if you have the right software, or snap the screen and then crop it using graphics software.

Of course, the most convenient method would probably be to use one of the new digital cameras. The general consensus, however, seems to be that the quality of the images they create are unacceptable unless you can afford one the high-priced models beyond the reach of the average person. That will probably change within a year or two.

GIF is the most popular graphic type for all other types of graphics. It has some interesting optional effects like animation, interlacing and transparency that you'll want to learn more about. I plan to post some examples here soon.

Suppose you want to use some graphic images but you don't have a powerful and expensive piece of software like Adobe Photoshop to create them yourself. You'll find a wealth of buttons, borders, icons, animated gif's, backgrounds, and clip art available for free on the internet. Just follow some of the links below. The disadvantage of course is that you can search for hours and never find quite what you want. Be prepared to live with something less than exactly what you had in mind. On the other hand, sometimes what you find will give you new and better ideas for color and design themes for your page.

When you find an image on the internet you'd like to use, just click your right mouse button on the image. Choose the SAVE IMAGE AS option in the popup menu and save the file to your hard disk or other storage device. Just be sure you are copying a free image. You can consider everything you see to be implicitly copyright protected and not for public use unless it is specifically stated otherwise.

Coding
Let's say you've decided on your content and your layout. You've gathered together some graphics and photo files and you've studied HTML. Now it's time to write the code.

I recommend that you do all your coding on your hard disk and not use the coding tools that may be supplied by your host. It's much faster to test and you don't have to stay connected to the internet all the time. Besides, it would be smart to maintain a complete set of your files on your hard disk anyway. Try this approach:

Open your browser. Now open Notepad or some other text editor. Even WordPerfect or Word will do just fine if you remember to save your file as text only. Start by coding the essential elements and basic structure of the page and some of the major text and graphic elements. Every so often save the file and jump over to your browser. Choose the FILE/OPEN FILE IN BROWSER option and open the file you just saved. Is it taking shape the way you expected? If not go back and fix it. When you come back to the browser click the reload button. Does what you see reflect the change you thought you just made? If not, go through the FILE/OPEN FILE IN BROWSER step again because the browser may have elected to reload what was in the cache, not the revised file. If it still doesn't look right, you probably have a coding error. Most browsers don't identify coding errors, they just ignore what they don't understand and continue on.

To get around the cache problem, you may want to set your disk cache and memory cache to zero while coding and testing.

Save your file in a directory where the lowest level directory name is the same name as the lowest level directory where your file will be stored on the host server. I highly recommend that you use relative URL notation for your links and image source specifications. That way you can navigate around in your site on your hard disk the same as you would in your site on the host server. The only problem is that links to files found elsewhere on the internet won't be found by the browser when you're not connected.

In the links below you will find tutorials and HTML online reference manuals. If you run into a problem you cannot solve, email me and I will try to help. Just remember, as I said before, I am an amateur so don't expect a professional caliber response.

Uploading
If you've followed my advice thus far your final step will be to upload your files to the host server when you are done coding. If you selected a good web site host this will be a simple matter of a few clicks in a form and you're in business!

Advertising
If you end up with a page that you feel would be of interest to others you may want to advertise it. Visit the major search engine sites and look for a link something like "add URL". Go there and follow the instructions. Each one is different. Before you advertise your site, be sure you have coded the META tags for title and keywords. If you expect to advertise your site, choose your headings and the first few sentences of your text very carefully. Also use the ALT option for your images and choose that text carefully too.

As I said before, if your site is only of interest to you, your family and your friends, that's fine, but do the world a favor and don't advertise it. You'll only add to the growing web gridlock. (If you find your site has been indexed by a search engine you didn't contact, that's because some have web "crawlers" that scour the web looking for new material to index.)

Useful Links

Netscape	A good reference on HTML code syntax. Includes some info on CGI. Free backgound images. Much more.
Geocities	Probably the most popular host on the web for free personal web sites.
Tripod	Another good host. This is where my site is located.
Compendium of HTML Syntax	Another HTML reference.
How Do They Do That with HTML	HTML tutorials.
Introducing HTML 3.2	Another HTML reference.
WebWeavers	Painfully slow loading site. Good resource if you have the patience to wait. Everything about everything, plus free goodies.
So you want a...	More HTML.
Patti's Place	Slow loading, (remember what I said about too many graphics), and many dead links. But definitely worth a visit. More everything about everything, plus free goodies.
Greyspace	Free graphics, fonts, icons, animations, and backgrounds.
The Web Developer's Virtual Library	Lots of good links to great stuff. Maybe the best link here.
Web Counters and Trackers	If your host doesn't offer counters, look here. In fact, even if they do, look here.
Pixelsite	Interactive online graphics builder. Currently closed. Previously free. Re-opening soon with annual subscription fee of probably $48.

Show And Tell
If you have found this page at all helpful I hope you will send me your URL so I can check out your finished product. Any comments and suggestions for improving this site will also be welcome. Have fun!