Soj's logo

Sojourner's
Web Service

Page Five

Step by Step Website Building


Okay, now you've read all the stuff on the other pages and you want to build your own Website. So, let's go. We'll keep it simple at first, then move up to more advanced on a later page.

1. Open a blank page in your word processor and save it as an .htm file. (Yes, I know it's blank, but I'm a firm believer in saving often.) The easiest way of saving as .htm is to go to Save As and in older programs click on ASCII, or in newer programs click on file type Text, then physically save the file with the extension .htm (in other words, actually type .htm at the end of the file name). If you're using Windows95 or later, note that the Internet isn't as happy with lengthy file names as Windows is. You'll need to revert to the old days when you could only use a maximum of eight characters in the name and three in the extension.

Okay, I've just lost you in the midst of all that. Do this: open Notepad (it's one of those little word processors that comes with Windows). Go to File and Save As. In File Name, type the name you want to use and change the .txt to .htm. And then click OK. And there you have it -- you've just saved a page in html. In Windows Write, you'll do the same thing.

Since you'll want to start your Website at the beginning (it's a very good place to start according to Dorothy when she was trying to get out of Oz), the first page you work on will no doubt be your homepage. Most servers want this to be called something like contents or index -- your server will probably have a section in their Website on customer Websites and will tell you what they want you to name the first page. In the interim you can call it essentially anything; just remember which page is your homepage and be prepared to change the name if necessary.

2. On your newly saved page, type <HTML>. Press enter a couple of time insert some space, and type </HTML>. You've just told the browsers what language you're going to be speaking.

Note that pressing enter doesn't mean that all that space is going to show up on your Web page. Browsers don't recognize things like enter or tab -- that's not in their vocabulary. But putting space in between things on the material you see through your word processor can be very helpful to you when you go in to change things on your Web page -- and believe me, you will want to go in and change things. One of the nice things about the Web is that material isn't static like it is in print. If you misspell a word in a book, it's there for ever for the world to see. If you misspell a word on a Web page, it's a fairly easy matter to go in and correct it. But we'll say more about that later.

3. Put your cursor between the HTML tags and type <HEAD>, then press enter a couple of times and type </HEAD>.

3A. Put your cursor between the HEAD tags and type <META name="keywords" content=" ">. Between the " " after content, type your keywords, those words by which you want people to be able to find your Website.

3B. Still between the HEAD tags, type <TITLE> and </TITLE>. In between these TITLE tags, type the title of your Website, the name that you want to appear in search engines.

Okay, that's enough for the HEAD. Let's move down the neck to the BODY (in other words, put your cursor after the closing HEAD tag -- after </HEAD>).

4. Type <BODY>. If you want to be fancy, type <BODY BGCOLOR="# "> and put some colour between the "# " (e.g., "#red"). Remember that you don't have to enter some fancy code. Red or blue or green or whatever will suffice. Once you've got the colour in, press enter a few times, and type </BODY>.
4A. Here's where you start inserting text that people will see. First will come the name of your Website. You'll probably want this to be in larger type, and you'll need it in a colour that people can read on your background (red type on a red background won't work. It's amazing what other colour combinations also won't work. Be ready to change to something else if necessary).

Okay, let's give your page a name. Type

<FONT COLOR="#yellow"> (this gives your type colour);

<CENTER> (this centres your text. You can also use LEFT or RIGHT, depending upon where you want your text)

<H1> (this makes the type larger)

<B> (this makes it bold)

Harry's Finest Website


(this is the name by which you want your Website to be known for ever)

</B> (this turns off the bold)

</H1> (this turns off the larger type)

</CENTER> (ohh, guess what this does!)

<BR> (this puts a break after your title)

And now you have a name!

It should be noted that in some instances, font colour doesn't change as you would expect it to, particularly if there are other tags effecting the type. Sometimes it's necessary to turn off the previous font colour by inserting </FONT> after the material you want in that colour. If you open the source of this page, and scroll down to "Harry's Finest Website", you'll see an example of this. Just one of the Web's peculiar traits designed to keep us on our toes.

4B. Now comes the name of the individual page. You'll want this to be smaller, and may want it in a different colour, or maybe set in a different part of the page. You use the same format as above, changing colour as you choose, using H2 or higher for smaller type, centring or not -- whatever you want to do. Just remember that, if you start it, you have to stop it. When you finish with H2, close it with ... you guessed it, /H2. The same thing with colour and alignment.

And, after you've looked at your masterpiece, feel free to change it to suit your mood.

4C. After the page title comes the text -- your chance to show the world that you can use both the left brain and the right. The best size for this is H4 -- a very readable type size for most of us. Follow the format above (see, formatting isn't that hard; it's really very repetitious. In due course you'll find it rather boring) and type away.

5. As an easy way of saying "That's all, folks", type <HR>. This puts a line across the page -- nothing fancy, but it breaks the page nicely.

6. Okay, you've finished typing in all the wonderful things you want to say to the rest of the world. It's time to let them respond to you. To do so type something like:
"Here I am, write to me at
<A HREF="mailto:dog.cat@horse.com">dog.cat@horse.com </A>
inserting your own e-mail address in place of "dog ... com". If they click on this, it should automatically bring up their e-mail program, complete with your e-mail address in the 'send to' line.

7. All good things must come to an end, and so must your first webpage. If you think back far enough, you'll remember that whatever you open has to be closed. So, what do you have open? If you look back at the top of the page you'll see that you opened two main things: HTML and BODY (you also opened HEAD, but you've already closed that). Now's the time to close these. Last opened is first closed, so close BODY with </BODY>. Close HTML with ... you guessed it, </HTML>. And so ends your first, but not last, webpage. Congratulations!

8. Now comes the hard part -- checking your work by opening it on a couple of browsers. Yes, I know. I don't like having to check my work, either. But you'd be surprised at the errors you can make, especially after you grow familiar with the formatting language. A missed inverted comma (quotation mark), an errant arrow, and the rest of the page comes out underlined, in some bizzare colour, with weird symbols or doesn't come out at all. So check your work diligently and do it through both Netscape and Explorer. In the end, you'll be glad you did.

9. Enough for now. In due course, Page 6 will come along, and we'll talk about uploading. Until then,
you can either go

Home

or

Back


If you need me, you know what to do.