Written by Ben Hunt from web design agency . For more information about his agency visit scratchmedia.co.uk

How to make a web site

About once a week, someone asks me:

"OK, but how do I actually make web pages and publish them as a site?"

So here's how...

Actually, before you start with the mechanics, please make sure you've read my comprehensive guide to the discipline of web design, “Save the Pixel - the Art of Simple Web Design”, which will help inform every decision you make when designing any web site.

The Basics of Making a Web Page

How to create HTML pages using a text editor
The bare bones of HTML page structure
How to save pages
How to link pages together
How to upload your pages to a live web server

Pages are made of HTML

Web pages are described with a markup language called HTML. This provides the content and structure of the pages. It also says where images and other stuff should be.

The good news is that HTML is fairly easy to learn. Here's my introduction to HTML and the basic tags »

You start a web site on your own local computer by creating one or more HTML pages, then linking them together.

What software do you need to make HTML pages?

To have full control over your web pages (and to be able to create interactivity using scripting languages) it's best to code by hand.

You can do this with any text editor (like Notepad), but there are some much better free text editors (like TextPad).

You don't even have to know HTML to make a web page. There are lots of visual editors (sometimes called WYSIWYG editors). NVu is a free WYSIWYG editor that's fine for beginners.

Your first web page

HTML pages should always include the following. You may want to copy & paste this into a new text file...

index.html v1

<html>

<head>

<title>Page title</title>

</head>
<body>

Your visible content goes here...

</body>

</html>

Notice how everything is contained between <html> and </html> tags.

This is an example of a paired tag, which need a starting tag and a matching closing tag (indicated with the forward-slash). Paired tags describe the content between them. In the case of the <html> tag, it's telling a web browser that everything between the 2 tags is HTML.

Within the HTML, there are 2 main bits that are part of every HTML page: the head section and the body section, marked up with the paired tags <head></head> and <body></body>.

The head section

The head section of an HTML page contains information about the page, like what it's title is, whether it should use stylesheets etc. Its contents are not seen in the browser window (well, the title appears in the title bar..).

The body section

The body is where the vislble content goes. Anything you put in the body of your HTML will be displayed in the browser (unless it's hidden).

You may want to check out the basic HTML tags, and play with putting some of these into your HTML.

Saving your HTML pages

To make an HTML page, just save your text file with the extension .html. Then, a web browser will know exactly what to do with it.

Naming your HTML files

I recommend saving all your files with lowercase names.

If you're developing on a Windows machine, it won't be strict about filenames being in the correct case (AboutUs.html is treated the same as aboutus.html).

But if you upload your site to a Linux web server (which most of them are), it will mind. If you ask for Blah.html, and the file is called blah.html, you'll get a "page not found" error.

Also, I recommend against having blank spaces in file names. I generally use hyphens (-) instead of spaces.

Index pages

Whenever you open up a web site, or a particular directory on a web site, without asking for a particular page, the web server will give you the default page or index page.

All you need to know for now is that every folder in your site should have a file named something like index.html. Otherwise, if someone browses to your site/folder, they may be presented with a list of web pages to choose from (not very professional), or may possible be given an error message!

Viewing your page

Let's say you've saved your file to C:websitesfirstindex.html

All you need to do is type that into your web browser address field, or use File > Open and browse for the file.

You should see something like this...

Note how the browser's title bar reads: "Page title" - the words we put in the <title></title> tags.

And the words we put inside the <body></body> tags are visible on the page.

Linking pages together

Let's say we've created another page, for "Contact details".

Here's the simple HTML...

contact-us.html

<html>

<head>

<title>Contact Scratchmedia</title>

</head>
<body>

You can contact Scratchmedia by opening the window and shouting very loud.

</body>

</html>

To link to this page, we first need something to act as the clickable "anchor", so we'll change our original page to

index.html v2

<html>

<head>

<title>Scratchmedia's home page</title>

</head>
<body>

My first paragraph, describing what we do.

Why don't you contact us!

</body>

</html>

What I've changed:

I've made the title a bit more meaningful ("Scratchmedia's home page")
I've changed the text, and put it into 2 separate paragraphs, using the tags

Adding the link

All I need to do now is make the text "contact us" a hyperlink to the Contact Us page.

In HTML, I do this with an anchor tag (<a></a>).

The anchor tag has a couple of uses, but its main one is to create hyperlinks to other places. To do this, we need to put something within the start <a> tag and the closing </a> tag. This will become the clickable target.

The other thing I need to tell the anchor is where to link to. I do this by adding the href attribute to the opening <a> tag (href stands for "hypertext reference").

Here's how the HTML looks now...

index.html v2

<html>

<head>

<title>Scratchmedia's home page</title>

</head>
<body>

My first paragraph, describing what we do.

Why don't you <a href="contact-us.html">contact us</a>!

</body>

</html>

If you refresh the page in your web browser after making those changes, it should look more like this...

Adding the paragraph tags has spaced the text out, making sure it's easy to read.

The text inside the anchor tags is now an active link, which you can see by the blue, underlined style.

And if you click on the "contact us", you should link through to the contact page (assuming you've created one).

If you can see this, you've just created your first web site. Congratulations!

Uploading your pages to the web

This is great, we have two working web pages, linked together, which forms the basis of a web site.

But, for other people to see our site, it needs to be hosted on a server that is connected to the World Wide Web. If you don't have a hosting provider, here is a list of some cheap web hosts.

The most common way of uploading web pages to a web server, is using FTP software.

You can get FTP software for free too. If you use Mozilla Firefox, I recommend Fire FTP, which is a Firefox extension

Click to enlarge (Screenshot of Fire FTP)

Screenshot of Fire FTP (50% scale. Click image to enlarge.)

Most FTP software works in a similar way.

First, you have to log in using details provided by your web host:
- FTP location (e.g. "ftp.yoursite.com")
- A username
- And a password
On the left hand side of the window, you can browse your local computer.
On the right hand side, you browse the remote web server.
You can compare the local files to the files on the server, and upload or download between them.
The software will usually handle all the necessary stuff like logging in/out, managing connections, and trying again when it fails to transfer files. In the example above, it's telling you what it's doing in the bottom window.
Some offer helpful things like comparing the locations to see which files are different.

So, if your webspace is http://www.yourspace.com/yourusername/ and you upload the files you've just made, you ought to be able to browse to the web address and view both the index page and click through to the contact page. And that means everyone else can too!

Read it offline

Buy the entire Basics of Web Design section as a PDF e-book:

only £1.50 GBP

New eBook - Guide to Semantic HTML

Ben Hunt adds another great eBook to the collection with his "Guide to Semantic HTML". The book gives you advice and tips on how, and why to use semantic HTML.

Included is a comprehensive list of HTML tags, each with their semantically appropriate uses, along with a worked example taking you through the process of how to build a website using semantic HTML.

New eBook - Web page production with xHTML and CSS #1

Experience the thought process of a professional web producer as he guides you through the web page production process, from photoshop design to working HTML template.

The book tells you how to approach web production, beginning with semantic HTML, guiding you through how to slice up a photoshop document, and finally how to use CSS for presentation.