How to Build a Website
Get Started
by Craig Walker

Let's Get Started!

Create a folder/directory called buildweb. For Windows, I recommend putting it in the My Documents directory, but you can put it anywhere. We will keep all of the website files in that folder. Of course, if you are using Windows 3.1, you will need to limit your folder and file names to 8 letters, plus the dot (.), and the extension.

Next, open Notepad (C:\Windows\Notepad.exe) or your favorite text editor. I use notepad because it is fast to open and save. Tip: in the Edit menu, make sure Word Wrap is checked. Create a document that looks like the picture below. Include all brackets, spacings, and capitalizations. See the explainations at the bottom of the page.

Customize your page by substituting your name in the <TITLE> area and in the general content area. Heck, create your own phrases if you want to.

Save the file as itsme.htm.

Very Important! When you make changes to your HTML code page, you must save it before the browser can see the changes. Then you will need to hit the Reload or Refresh button on your browser so it will pick up the new changes. Otherwise it may be looking at an old copy from your browser's cache files, stored browser memory files.

Never use blank spaces for file names. Example: Its me.htm

Instead, use the underscore to fill the blanks. Example: Its_me.htm

Now open and look at your web page.

Here is what mine looks like. Click Here Use the BACK button to return here.

Your page will be a full size page. Mine is confined to the frame.

You can open your web page by typing the complete path to the itsme.htm file in your browser where you would normally type the Location, Address, or URL of any other website you wanted to visit, (example:C:\My Documents\buildweb\itsme.htm), and then hit enter on your keyboard.

Another way to open it is to double click on the itsme.htm file in your buildweb folder. This will normally open the page in your web browser.

Explainations

File Extensions:

You can use htm or html as the file extension. Both work and both will be recognized as a web type file, but why type the extra l every time if you do not need to. One thing you do need to do is be consistent. Use one or the other, but stick to it. It's less confusing that way. You have to reference it exactly as you name it when you are calling it later, and you don't want to wonder if you used the l this time or not.

<Open Tags> & </Closing Tags>

Tags are used to start and stop a process or section. Most tags have an Open part to start the process and a Closing part to stop the process. If there are two parts of a tag, then both parts are required for the tag to work. The Tags use the < >, (less than, greater than) brackets to contain the tag commands. The closing tag is different by adding the / (forward slash) in front of the command. Some tags, like the <P> (paragraph) tag, only require a single tag.

I always capitalize tag commands to set them apart from the rest of the text in my code document. As your page gets full, it can get quite confusing. Tags will not show up, as text, in your web page as long as you use the brackets, but as you will see later, the tags can be right in the middle of all the other parts of your page content. Capitalizing tags is not a rule, but it is a good idea.

I also use spaces and new lines in my code document to keep the tags separated and to make the document easier to read and edit.

HTML

Hypertext Markup Language is the universal programming language of the internet. Whether you use a PC or a Mac, your web browser can read HTML documents from all over the world. It is the common ground between platforms.

<HTML> </HTML>

These tags open and close the whole HTML document. It tells the browser to read this as an HTML document. The opening tag at the beginning and the closing tag at the very end.

<HEAD> </HEAD>

These tags create a header section for you code document, where you can put some general things about the web page, Like the title of your page.

<TITLE> </TITLE>

Between the title tags you can put the title of the web page. This is not the title that shows up on the web page like a book title. This title shows up in the upper left corner of your browser window. In this case it should say, It's Me! Craig (or your name). Don't forget the closing tag.

<BODY> </BODY>

This starts the general content area, or the body of the document. Notice the closing tag is at the bottom of the page with the HTML closing tag. That is because everything you want to see on the web page is contained in the body of the document and needs to be between the two body tags.

The opening body tag can contain other format commands that control the page color, text style, background graphics, link colors, etc.

BGCOLOR="#33ffcc" The background color, BGCOLOR, can be set using the six digit codes in the Color Chart. I recommend you specify a background color, even if you are leaving it at the default. When I do not specify a color, my browser shows me a white page. At work, with MSIE, the default background is grey. Now if I design a white page, I specify a white background, BGCOLOR="#ffffff".

TEXT="#0033ff" This specifies the default color of the text on your page.

The 6 digit alpha-numeric string refers to a specific color from a preset color list, part of the HTML code language. To change the color you just change the 6 digit string to correspond with the color you want. See the Color Chart for color code options.

It is proper HTML code to enclose the 6 digit code within quotation marks and to place the #, pound sign, before the numbers. I have not found this necessary, but if you want to be absolutely sure of cross-platform compatibility with your website, then I recommend it. I use them in mine. Actually when this website was originally constructed, I did not know that, so you will find code contrary to that in these pages. That is why I am updating a few things now. "Learning all the time." as Benny Hill would say.

Content Type what you want to say and it will be written. The content is everything between the body tags. It is what you want to share with the world on your web page. Content can include, text, graphics, sound, video, etc. It's your imagination on the line.

There are many tags for setting different formatting options. See the Tags Guide in the Table of Contents.

Next we will add some Basic Content and format it using tags.

by Craig Walker

HTML written in Notepad
Best Viewed @ 800 x 600
WebMaster: Craig Walker
cwalker1@cox.net