How to Build a Web Page Without Buying Software

Test link

STEPS

Print this page out for reference when it is not on your monitor.
Spend some time learning very basic HTML
1. Try one of the Que Manuals (they make a great ongoing reference)
2. You can do it on line on C/Net
Determine what you really want your website to do (sell, interest, persuade, inform, etc).
Determine what you want your website to feel like (funny, professional, artsy, cutesy, etc).
Determine the organization of your pages. I suggest a entry page with minimal information that loads fast. Followed be the normal navigational page that leads to the actual content pages. The entry page will be titled "index.htm", the main navigational page "index2.htm". Both the index pages will reside in the top directory. The actual content pages will reside in a separate directory for each main theme. There will also be a directory named artwork to contain the graphics.
Create a directory on your hard drive called webpage.
1. Create subdirectories called artwork, theme1 and theme2.
Use some of the search engines (yahoo, hotbot, metacrawler, altavista, etc) to find some pages that are trying to do the same sort of thing you wish to do and look at their general layout, colors and style. We are doing very basic pages so do not be looking at rows of buttons, mouseovers, or animations. Just find some basic pages you like. You might even wish to use "File/Save" to save some of the pages to analyze their code.
Select the editor you will be using. Some that come with your machine are NotePad and the DOS editor. To activate notepad, click on start, then click on programs, then click on the windows file with the magnifying glass in the top right corner. Click on the windows directory, then double click on NOTEPAD. To activate the DOS editor, get the machine to the C:> and type the word "edit". You will be provided with a writing space and you can then save the file wherever you wish. You can also use most common word processors, but you must save the file as ascii text (normal word processor files include a number of command characters you do not see on the screen). Try the editors out and select one. Personally I prefer the DOS editor, but I also like my TRS-80 Model III (very old computer).
It time to pick a general look for the pages.
1. Use the hex color chart to pick one of the 216 safe colors. (Non dithered colors) for use as a background. I suggest you use a light color. Write down it 6 digit hex code.
2. Use the hex color chart to select a Link color (links to be followed). I suggest blue. Write down the 6 digit hex code. Blue is 0000FF.
3. Use the hex color chart to select a Link Followed color (link after it has been followed). I suggest lavender. Write down the 6 digit hex code. Lavender is FF00FF.
4. Use the hex color chart to select a Link in Click Color (Color when actually clicking on it). This color is not very important. I suggest red. Red is FF0000.
Use the File/Save As command at the top of this page to save this file to your webpage directory, save it as index.htm.
Open this file in your editor. Delete everything below the 9th line of text, "STEPS."
Insert the color codes you selected above into the BODY color statement. I would recommend you just change the color of the background to a light color that goes with your "feel" and leave the other colors the same, unless they do not work well with your color.
1. BGCOLOR = Background color (color of the whole page)
2. TEXT = text color
3. LINK = color of the links
4. VLINK = color of the links after they have been followed
5. ALINK = color of the links when clicked on
Test the colors. Open your browser. You do not have to be tied to the internet. Use File/Open to open the index.htm file. Can you see the text. Is the sample link underlined? Click on the sample link. Is it now underlined in a different color? If you have problems seeing any of the color of wish to adjust them. Use the hex chart to pick a different color and the procedure above to change the colors.
Time to select some graphics. Use Icon Browser to pick a logo. You can replace it later if you find a better one. Note they do have a search index. I personally like black and white art for logos. Save the logo to your artwork directory.
Select a line for use as a divider (rule, bar) on your pages. I suggest a solid color. Lines can be found on Lines, Rules and Bars and more can be found on Solid Lines. Save your line to your artwork directory.
Use your editor to open index.htm. Delete everything below the 5th line of text. (body). Edit the title to a title for your page.
Use the HTML you learned to construct a welcome to your site page using your logo and a link from it to your navigational page. Be sure to close the body and close html at the bottom of the page. Save it as index.htm.
Save the index.htm page again as index2.htm. This allows you to bring forward the general format of the page. Now delete everything after the closing of the heading statement.
Use the HTML you learned to create a navigational page. Try using the line (bar, rule) you selected and position one or more on the page. You might want to just use a list of the theme pages, or perhaps you can find some icons for them or you might want to try some buttons. Construct links to their pages. Be sure to close the body and close html at the bottom of the page. Save it as index2.htm. You might wish to establish a feedback link for them to e-mail you or also to put you physical address and contact information here.
Save it again as theme1.htm in the theme1 directory and again as theme2.htm in the theme2 directory. Use your HTML to similarly rework those pages and include your actual content.
Load your browser and test your pages and your internal links.
Keep after it till you like it, then it is ready to upload. You may need some help in uploading it, but compared to writing it, uploading is a breeze. Future projects for you are metatags and listing it with the search engines and other similar pages.

by Gary Polson
19 Nov 1998 
for SPIN Meeting