So you want to write a web page. Why? Presumably because you have some information you want to convey to the rest of the world. Maybe you want to explain about yourself. Maybe you're trying to sell something. Whatever the reason, you have some information and you want to tell the world.

This tutorial is designed with that in mind. Designing a beautiful looking page is important, but getting your information across is the most important part of creating a web page.

You want to get your message across to as many people as possible. This means that you should write a web page that works in every browser. Not just in Microsoft Internet Explorer or Netscape Navigator - in every browser.

Often you'll want to change your web site, so it's also important to make it easily maintainable. This tutorial will help with that too.

We'll use the following two principles:

  1. standards compliance; and
  2. seperation of style and content

Standards Compliance

An organisation called the World Wide Web Consortium (W3C) decides various standards on how to write web pages. By strictly following these standards we can make sure that our pages work in all browsers without having to test them in every version of every browser that exists.

Seperation of Style and Content

The W3C also recommends putting all your information in Hypertext Markup Language (HTML) files, but not putting any instructions on how to display it (fonts, colours, etc) in the HTML.

Instead, we put "style" into a Cascading Style Sheet (CSS). And we link to the style sheet from each HTML page. This is good because if we have many pages and want to change the background colour on all of them, we just edit the one style sheet instead of having to edit lots of HTML pages.

How To Do This?

We will be writing all our HTML by hand in a text editor. While a lot of people prefer to use "what you see is what you get" (WYSIWYG) HTML editors - like Frontpage or Macromedia Dreamweaver. We won't. This is because WYSIWYG editors generally do a very bad job seperating style from content and an equally bad job complying with standards.

Manually editing HTML also gives us a lot more control over our HTML - we can fine tune it. It should also result in smaller HTML files that will download faster and take up less space on your server.

On windows, a good text editor is Notepad, which comes free with Windows. If you look around though, I'm sure you can find better ones.

For Linux users, I recommend Bluefish. It's a text editor designed specifically for HTML and PHP. Here's a screenshot:

a screenshot of bluefish

Now that you've chosen a text editor, let's begin.