Updated: 08 June 2005

I'm sorry, you don't have JavaScript enabled. That means you can't select an alternate colour scheme or use the cost of living or cost of shopping calculators. To enable JavaScript in Mozilla, select Tools->Options...->Web Features and tick 'Enable JavaScript', or try How to disable or enable JavaScript

Top << Previous section Next section >>

How to Create a Web Site

In this guide I'm going to explain how to create a web site from start to finish in one simple guide. I'm not going to discuss various options, or complicate it in any way.
If you want to create a website, I suggest you follow my guide, and create your first web site in a matter of hours. Then after playing around with it you can investigate your options.
This route involves totally free software and hosting. So it's not going to cost you anything to try this.

A summary of what you need to do

Here are the steps I'm going to explain, which you can do as you read.

Sign up to a free web hosting company.
Create a web page on your computer.
Upload the web page on your computer to your new free host.
View your new web site.

Then I'm going to explain a few improvements and additions.

Create a few web pages and link to them from your first main page.
Add some pictures to your page.
Download an FTP program to make uploading your web pages easier.

Sign up to a free hosting company

Click on this link, and follow my instructions: https://www.angelfire.lycos.com/ (it will open in a new window)

Click on 'Sign Up' at the top left.
Click on 'Sign Up' in the "Angelfire | Free" box on the left.
Select a 'hi5' where it says 'Choose'. I just like that one !
On the right, choose a name. This is the important step that you should spend some time thinking about. It will be the name of your website. I'm going to pick "Dougle-and-Dixie".
When you've selected these two options, you'll end up with a website URL of: https://www.angelfire.com/hi5/dougle-and-dixie
Enter a password at least 8 characters long, made with lots of random numbers eg 6574don847
Enter and make a note of a false name, address and details - why should you give away your private details ! Use a valid email address !
Untick all the advertising rubbish
Enter the funny graphics number into the box
Click 'I Agree'. If you have to correct something, make sure you untick all the adverts rubbish again !
On the next advert page, click 'No Thanks'
You should now be logged in on the Angelfire system and you will also get an email confirming your account has been created.
To login in future, your username will be "hi5/dougle-and-dixie", and your password you'll keep to yourself won't you !
Minimise this window. We'll come back to it in a minute.

Create a web page on your computer

OK, we're going to cheat here, and make things really easy for you. Just copy and paste the following into Notepad.
How ? Well, select it with the mouse by dragging over it while holding the left button down. Then when it's all highlighted in blue, either right click and select 'copy', or just press control-C.
Then open Notepad (Start -> All Programs -> Accessories -> Notepad), and right click and select 'paste', or just press control-V.

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dougle and Dixie</title>
</head>

<body bgcolor="#3399FF">
<h1>Dougle and Dixie</h1>
<h2>Introduction</h2>
<p>Welcome to the canine world of Dougle and Dixie.</p>
<h2>My dogs</h2>
<p>I've got two lovely Yorkshire Terriers called Dougle and Dixie</p>
<h2>Contact Details</h2>
<p>You can contact me day or night on the dogyphone</p>
</body>

</html>

Then save the result. Go to 'My Documents' and if it's not already there, create a folder called 'My Webs'. Go into that and create a folder called 'Angelfire Dougle-and-Dixie' (in my case).
Why the long folder name ? Because you'll end up like me with loads of websites all hosted by different companies. You need a name like that with host name and website name in it.
Save the Notepad file in that folder called 'index.html'. It must be lower case and spelt exactly like that. That's I N D E X . H T M L.
Lets just check that you've done it right. Double click on the file 'index.html' in your 'Angelfire Dougle-and-Dixie' folder, and a browser window should pop-up with your page on it.
That shows that you can view your website on your computer, which is a good idea before you upload the files, and is quicker if you want to use it, than going to the online version.

Upload the web page on your computer to your new free host

Open the Angelfire window you minimised before. It should say "Hello, hi5/dougle-and-dixie'" at the top. That's where the 'logout' button is for when you've finished.
Click on 'Web Shell' in the left hand side menu under "On Angelfire".
This is where you can upload pages from your computer onto your website.
Scroll down to the bar named "File Upload", and click on 'Browse'. This will pop-up a window looking at the files on your computer.
Navigate to the folder your created just now, and select your new file 'index.html'.
Click on the box marked 'Check to overwrite', because you'll be overwriting the standard webpage that Angelfire provide, and click on 'Upload'.

View your new web site

Go to the top of the page and you'll see a blue underlined link " https://www.angelfire.com/hi5/dougle-and-dixie"
Right click on that and select "Open in new Window", to view your new website in a new window.

What have you done ? !!!! You've just created your first online webpage. Congratulations.

Create a few web pages and link to them from your first main page

So far you've created one web page, which is the main page of your website. Now we need to create a few more pages and create links to them on your main page.
Lets cheat again. As before copy and paste this into Notepad, and save it as 'trainingtips.html'.

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dougle and Dixie - Training Tips</title>
</head>

<body bgcolor="#3399FF">
<h1>Training Tips</h1>
<h2>Introduction</h2>
<p>Yorkshire Terriers are notoriously easy to train and to stop from barking at passing bicycles !</p>
<h2>My dogs</h2>
<p>They are lovely, and one day I'll get round to training them not to bark at the postman.</p>
<h2>Contact Details</h2>
<p>You can contact me day or night on the dogyphone</p>
</body>

</html>

Then do the same with this, and save it as 'dogpictures.html'

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dougle and Dixie - Dog Pictures</title>
</head>

<body bgcolor="#3399FF">
<h1>Dog Pictures</h1>
<h2>Introduction</h2>
<p>These are my two lovely Yorkshire Terriers</p>
</body>

</html>

So now we've got 3 pages. The main page 'index.html', and 2 others that we want to link to.
What we need to do now is edit the 'index.html' file to add the links. Open it with Notepad, and change it to look like this.
The new lines are highlighted.

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dougle and Dixie</title>
</head>

<body bgcolor="#3399FF">
<h1>Dougle and Dixie</h1>
<h2>Introduction</h2>
<p>Welcome to the canine world of Dougle and Dixie.</p>
<h2>My dogs</h2>
<p>I've got two lovely Yorkshire Terriers called Dougle and Dixie</p>
<p><a href="trainingtips.html">Training Tips</a></p>
<p><a href="dogpictures.html">Dog Pictures</a></p>
<h2>Contact Details</h2>
<p>You can contact me day or night on the dogyphone</p>
</body>

</html>

To update your website that everyone else can see online, you now need to update the files on your web host.
Open the Angelfire window, and scroll down to the 'File Upload' section.
First, we need to upload the new files. Click on 'Browse' and select the 'trainingtips.html' file. Click on 'Upload'. Then do the same for the file 'dogpictures.html'.
Now we can update the main webpage. Click on 'Browse' and select 'index.html'. This time you have to tick the 'Check to overwrite' box. Then click on 'Upload'.
You can view your new updated website by refreshing the window displaying your website (press F5 or click on the refresh button).

Add some pictures to your page

I think it's time to make your website a bit more interesting, and add some pictures. Shall we cheat again, in case you haven't got any pictures on your computer that you can use, or that are the right size. First, create a folder inside your 'Angelfire Dougle-and-Dixie' folder and call it 'images'. Here are 3 pictures. Right click on each one, and save them in your new 'images' folder, and call them 'dog1.jpg', 'dog2.jpg' & 'dog3.jpg'.

Now we'll change your 'dogpictures.html' webpage to include these pictures.
Open it with Notepad, and add the lines highlighted below:

 
<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dougle and Dixie - Dog Pictures</title>
</head>

<body bgcolor="#3399FF">
<h1>Dog Pictures</h1>
<h2>Introduction</h2>
<p>These are my two lovely Yorkshire Terriers</p>
<p>And here is a friends Border Collie, from a puppy to now:</p>
<p>
<img border="0" src="images/dog1.jpg" width="400" height="302">
<img border="0" src="images/dog2.jpg" width="400" height="285">
<img border="0" src="images/dog3.jpg" width="400" height="280">
</p>
<p>Ahhhhhhh !!!!!</p>
</body>

</html>

If you view your website on your computer, you should now see the pictures on the 'Dog Pictures' page.
Now you've got to update the online website. By this time you may have logged off your Angelfire account. So go here https://www.angelfire.lycos.com/ and click on 'Log In' at the top. Enter your Member name and password, which in my case is 'hi5/dougle-and-dixie' and 'mindyourownbusiness !!!', and click 'Log In'.
We need to create a new folder to put your new pictures into, so that your online website folders and files looks the same as the one on your computer.
In the 'Webshell' section, tick 'New Subdirectory' and type 'images' into the field below named 'File/Subdirectory Name:'. Then click 'Create'.
You can see the new folder in the list of files just above. Now you need to go into that new folder. Click on 'images', and click 'Open'.
Finally we're ready to upload those 3 pictures. Scroll down to 'File Uploader' and as you did before, upload the 3 pictures 'dog1.jpg', dog2.jpg' & 'dog3.jpg'. Don't forget they are in the 'images' folder on your computer too.
Now you need to update the 'dogpictures.html' file, so that it has those pictures in it. Click on the blue underlined 'hi5/dougle-and-dixie', just above to go up to the main folder of your website.
Now upload the 'dogpictures.html' file, remembering to tick the 'Check to overwrite' box.

Have a look at your online website, and see if you've managed to get your pictures on it. If you have, well done. You're becoming quite an expert.

Download an FTP program to make uploading your web pages easier

I wonder whether you liked all that messing around to upload your files ? If you've got a small website, with just a few pages, and if you only update it occasionally, then you may find that OK. However, if like me you want to update it several times a day, or you have quite a few files to upload from different folders, you're soon going to get pretty sick of doing it that way. Thankfully there is a free and much easier way. The solution is to download a program onto your computer. It's an 'FTP' program. That stands for 'File Transfer Protocol'. All you need to know is that it sits on your computer and gives you a nice window showing the files on your computer and the files on your website. Then you just click on a file and click 'Upload' and it's all done easily for you.
There is one requirement for this to work. Your web host must allow FTP uploads. That's why I chose Angelfire. There are many others that do, but equally many that don't.

Your first task is to download the FTP program. Now the only free one I've found that works with the Zone Alarm firewall is 'Ace FTP3 Freeware'. It works very well, so lets go for that.
Click on this http://freeware.aceftp.com/ and then click on 'Download' at the bottom of the 'Discover the Best Free FTP Software'. Fill in the form, and hey, why not put this as where you heard about it: "https://www.angelfire.com/hi5/neuralnetwriter/" !!!! It's about 2.3MB, so it won't take long on dial-up.
For a simple way of managing your downloads I suggest you create a folder in your 'My Documents' called 'Downloads'. This has the advantage that you can reinstall from there if you have a problem with your computer, and save all that downloading time. So, save the file into your new 'downloads' folder. Then virus check it, and then run it.
Whatever you do, don't click on any of the 'pro' options if, like me, you want to stick with the free version.
With any luck, you've now got an AceFTP3 entry in your 'Start -> All Programs' menu, or on your desktop.
We've now got to tell AceFTP3 about your Angelfire account, so that it knows where to go to connect to it.
Run AceFTP3, and click on the 'Computer with a green down arrow' icon, near the top left (or press control-W). You'll get a pop-up window with a list of pre-defined places. Ignore them.
Click on 'File -> Create -> New Site Profile' or control-S. You should now have a window titled "New Site Profile Wizard".
In the top field enter "Angelfire Dougle-and_dixie".
In the field named 'server', put "ftp.angelfire.com".
In the 'User ID' field, put "hi5/dougle-and-dixie'
Enter your password in the 'password' field. That's the password you used to login to your Angelfire account. And tick the 'Save Password' box.
Click on 'Next'.
In the next window, browse to the 'dougle-and-dixie' folder in your 'My Webs' folder, for the 'Enter local folder' field. So it will look something like this: "D:\Data\Steve\My Documents\My Webs\Angelfire Dougle-and_Dixie"
Leave the 'Enter host folder' empty.
Click 'Finish'.
You should now have a new entry in the 'AceFTP Site Profile - Sites' window, called "Angelfire dougle-and-dixie".

Oh, now for the exciting bit. Lets see if it works !
First, note that this probably won't work unless you've used the 'Webshell' upload process at least once ! I have no idea why.
Assuming you're online, double click on the "Angelfire dougle-and-dixie" entry.
What you should see is something like this:

Connecting to ftp.angelfire.com on port 21. Attempt 1 of 3...
220 Hello, Welcome to Angelfire FTP.
USER hi5/dougle-and-dixie
331 Username set to hi5/dougle-and-dixie. Now enter your password.
PASS *****
230- Welcome to Angelfire's FTP server.
230-
230- You can create multiple directories under
230- your homepage directory, up to 3 levels deep.
230- Images will not be automatically placed in your images directory.
230-
230- For more info, see the FTP FAQ at
230- http://angelfire.lycos.com/doc/general/ftpupload.html
230-
230 User 'hi5/dougle-and-dixie' logged on.
SYST
215 UNIX Type: L8
Server Type: UNIX (standard)
PWD
257 "/" is current directory.
TYPE A
200 Type set to 'A' (ASCII).
PASV
227 Entering Passive Mode (209,202,218,15,163,172)
LIST
150 Opening ASCII mode data connection for LIST.
226 Transfer complete.
Transferred 337 bytes in 0.06 seconds (5.31 KB/s)
Queue completed in 5.58 seconds
Connection has been idle for 120 seconds; activating keep-alive measures...
PWD
257 "/" is current directory.

If so, you'll also have a split screen in your window. The left hand one is what's on your computer. The right hand one is what's on your website.
To upload a file, click on it in the left window, so that it's highlighted. Lets try it with 'index.html'. Then click on the right arrow at the top between the two split windows. You can just press control-R.
At the bottom right, you'll see the files being transferred. When complete a gong will sound.
You can select several files in the left window and transfer them all automatically.

When you've finished, click on the 'computer with a star', next to the one you clicked before, or press control-D. That will disconnect AceFTP3 from your Angelfire account.
Because AceFTP3 is free, you'll get a pop-up window when you close it. Just click 'OK' straight away !

It will take you a while to get used to AceFTP3, but when you are, you'll find it very much nicer to use than any of the online file management/uploading systems.

Dreamweaver

This is one of the best packages for creating websites. You can download a free trial version (which lasts 30 days) or you can pay about £340 for it !
Here's a quick 'getting you started' guide.

Run Macromedia Dreamweaver
Setup the connection with your website
- Click on Site > Manage Sites.....
- Click on 'New....' & select 'Site', and type in a name for your website eg dougle-and-dixie, then 'Next'.
- Just 'Next' with "No, I do not want to use a server technology"
- Leave the "Edit local copies on my machine.....", and browse to where you want your website. I suggest eg My Webs\dougle-and-dixie, and 'Next'.
- Select "FTP" in the drop down menu, and enter the following connection information:
  - FTP address = ftp.angelfire.com
  - FTP login = hi5/dougle-and-dixie
  - Password = <the one for your account>
  - Click on 'Test Connection' to see if that works. If not check what you've entered. If it's OK, click on 'Next'.
- Just 'Next' with "No, do not enable check in and check out"
- Click 'Done', and 'Done' again.
What you do next depends whether you have an existing website, or want to create one from scratch.
To view an existing website and get the files onto your computer, do this:
- Select the website in the 'Files' sheet and click on the 'Connect' icon (the two plugs)
- Right-click on the root folder, and select 'Get'. That will download all the files onto your computer from the website.
- You can now change a page and the click on 'Site > Put' to upload the page onto the website.
To create a website from scratch:
- Click on 'Page Designs (CSS)'. You want to create a basic page which you can alter later.
- Select 'Page Designs (CSS) and 'Three-column Left Nav', and click 'Create'.
- Name the file 'index.html'
- Change it to what you want and then upload it with 'Site > Put'.

Odd Tips

Filenames should only contain a-z, A-Z, 0-9, '-' & '.'.

Pinging Your Website

What am I talking about ?!
Well, if you go into a DOS window (Start -> All Programs -> Accessories -> Command Prompt), you can type "ping www.google.com".
What you get is the real location of the website (some numbers like this: 66.102.9.99). You also get information on how quickly your website has replied.

Tracert

This utility will trace the route taken by the packets of data between your computer and your website. You can see where the delays are.
Run it with Start -> Run, and type in "tracert www.google.com", for example. Better still open a DOS window. That way the results won't disappear before you can read them !

I hope that's helped you to create your first website.
Cheers Steve.

What next ? ................