How To Make a Website

There is a special kind of person who thinks this kind of thing is cool.
Its a pleasure to meet you.

Step 1: How do I do what now? Hang on, was I just insulted?

Open up Notepad.

Please, sir, I want you to write a short one line letter. Go on. I’ll wait for you right here. Hey, I said please!

Hopefully the structure of your letter will look something like this:

Dear Russel T Davies,
I think you are a fantastic writer
Yours, Dalek In The Sky With Diamonds

Ok! So! As a human being you look at that and you say ‘I know this is a letter’.
How do you know its a letter? Because of the ‘Dear’ bit starting it and the ‘Yours’ bit ending it. You know that anything inbetween those ‘bits’ is a letter. Your eyes even skip to the middle bit for the relevant information.

A Computer can look at a file and tell instantly if its the code for a website. It does it by looking for



at the beginning and...



...at the end.
Just like you look at the beginning and end of a file and can tell the middle bit is a letter. (It helps slightly that the file extension is .htm but more on that later)
I hope you’ve got notepad open by the way.

Step 2: So what about the middle bit?

Notice how in the previous examples there are words within pointy brackets. These are called tags. <html> is a tag. <body> is a tag. <p> is a tag. <h1> is a tag.

Tags all do something. Anything you want to do on a website, all you need is to know the right tag. To do text I use a <p> tag. Thusly:

Tags all do something. Anything you want to do on a website, all you need is to know the right tag.


Most tags need to be closed. We do this with a corresponding tag that has a / included. So to close <html> we use </html>. <body> uses </body>. To close <p> we use </p>. To close <h1> we use </h1>. Notice how I used a </p> in the above example. That was to tell the Computer to treat what is between the <p> and the </p> as text. Just like we treat whats between Dear and Yours Sincerely as a letter. This is as complicated as it gets so make sure you understand.

We already know enough to make a website. Open up notepad and try it now using the following:
1) You know EVERYTHING should be between <html><body> and </body></html> so put that in first.

2) Inbetween put a <p> tag, then the text, then CLOSE it. Remember how to close a tag.

3) SAVE the file. Files are saved by going File: SaveAs then naming it as something.htm where you can change ‘something’ to any lowercase words as you desire. Then below that where it says ‘Save as type’ change it to ‘all Files’. Then find this file in My Computer, double click it and see what happens. It should open as a webpage.

Here is an example:

<h1>My first webpage</h1>
<p>This is my first webpage. Hoorah! Hurray! Wheres my shoe...</p>




I threw a new tag in there, <h1>. Try it yourself, just like I did and see what it does. You can put any text inbetween an <h1> and a </h1>.

Step 4: Doing everything else

Lets embellish the above example slightly.

<h1>My first webpage</h1>
<font color=”red”>
<p>This is my first webpage. Hoorah! Hurray! Wheres my shoe...</p>
<marquee>I know I left it here...</marquee>
<img src=”http://z1.pixhosting.com/defimages/shoe.com.jpg”>






Notice how I’ve used some more tags.
If you want to do something on a website, all you need is to know which tag to use.
I could go through a big list but there’s no point. Just use http://www.google.com to search for something like “html images” and you will find the html for putting an image on your site.

Some of the tags I’ve used here DON’T CLOSE. Man thats annoying. I’ve just told you every tag needs to be closed and now I’m saying thats not, actually, always true.
A tag needs to be closed if it needs extra information to run. Eg <p>I need this text here</p> needs to be closed because it, well, the <p> needs the text which follows and needs to know when the information stops. A tag is stupid, it will take everything which follows it as information it should use, even new tags. Thats why you have to close tags like that.

Other tags like <font color=”red”> dont need more information because all that they need is contained within the <> brackets. You don’t close that kind of tag. In such tags always remember the speechmarks for the self-contained information. <img src=”website address here”> is another example.

Here are the new tags I’ve used:
<h1></h1>                                          A heading. Change the number 1 to see other forms.
<font color=”red”>                             Change the font color. British people watch your                                                                       spelling. Try other colours too by replacing red and                                                                 keeping the speechmarks..
<img src=”an address of a pic here”>   Displays an image

A couple of others:
<p><b>text here</b></p>
<p><u>text here</u></p>
<p><i>text here</i></p>
These are ways of using another tag within the p tag to produce bold, italic and underlined text respectively. You have to use them inside the <p></p> tags.

One last word about the tag for images. It doesn’t have to be a website address it can just be a filename eg flowers.jpg. BUT! BUUUUUUUUUT! If its a filename the file must be in the same folder as the website itself. AND! Oh yes AND! When you put the website on a folder on the Internet with the next step, the image must go to this same folder too.

Step 5: Putting it online

There is a folder on your hard drive. Your files are in that folder. Your files are on your Compuer.
We want to copy them to a folder on the Internet. Thus the files will be online as well as on your Computer.

This is easy. Its as easy as moving files.

Just go to a free webspace provider like http://www.freewebs.com and sign up for an account. Log in, and follow the directions to copy your files over. Remember any image files you’ve used. Before you copy it all over I recommend renaming your main page index.htm to make it easy for Internet Explorer or another browser to find. Then try the address freewebs provide you. If it doesn’t work put your filename at the end of it remembering the .htm.


If you have problems with any stage of this feel free to email me webmaster@yobpatrol.com


[Splashing] [Doing] [How To Make a Website] [Modern Art] [Professional Procrastination] [Shopping] [Reading] [Laughing] [Listening] [Thinking] [Interfalangigating]