CodeLair scripts and tutorials; click to return to home page

Web Site Basics

A brief guide to creating your own website.
Last updated: February 06, 2007

The basis of any web site is a programming language called HTML (Hyper Text Markup Language). Writing masses of HTML for a single page is an arduous task and so this is where WYSIWYG web page editors come in.

WYSIWYG stands for What You See Is What You Get - these editors are perfect for budding webmasters. The essence of a web page is an elaborate Word document, with text, tables, pictures and other multimedia. Using a WYSIWYG web page editor, you can see exactly how your site will look at every stage.

Examples of WYSIWYG web page editors include Microsoft FrontPage Express (very basic), Microsoft FrontPage 2000 and Macromedia Dreamweaver. FrontPage Express comes free with most Windows operating systems (Windows 95 onwards, I think), but if you have access to FrontPage or Dreamweaver I strongly suggest using these.

Although WYSIWYG editors will write the HTML for you, it is still wise to learn HTML. This way, if something goes wrong with your page, you can easily sort it out. It also helps if you decide to use SSI or CSS, not covered by many WYSIWYG editors.

Personally, I use FrontPage to do all the basic HTML for me, then edit it to how I like it, adding CSS (Cascading Style Sheets) and SSI (Server Side Include).


Creating a web site

There are three main steps you need to go through when designing and making a web site:

1. Plan your content
What are you going to put on your site? No one wants to visit a web site that offers no information or other reward. You could collect together some information on your chosen subject, create some images, offer some downloads and so on: there are endless possibilities.

2. Plan your design
Get a piece of paper and sketch out ideas. You will be surprised how much it helps! The sketch need not be 100% accurate and remember you can always tweak the design at a later stage. Also look at other web sites to get inspiration, but do not directly copy their pages.

3. Build your site
Obviously this is more involved than the first two steps, but it needn't be. As stated earlier, a web page is no more than an elaborate Word document.


The elements of a web site

The first is content, as described before. Remember not to steal content. The second is navigation. Assuming you have more than one page in your site, how will visitors find subsequent pages? The answer is with navigation. Your index page should ideally link to all the sections of your site, and from there link to the individual pages. It is also helpful to draw a sketch again.

The next element is one of the most important - tables. Although it doesn't look like it, most pages are arranged using tables. They help keep everything in place and structure your pages. They are also useful for navigation bars. This is where WYSIWYG editors outshine simple text editors - it is a hundred times easier to make table using a WYSIWYG editor.

If you are using tables to structure your page, make sure the border is set to 0. This way, the divisions will not show up on the page. Of course, if you want a table to be visible, for example to display some statistics, then you can insert a table (with a border) inside any cell of your table.

Images are a powerful tool on the Internet. Images can be used in two ways:
1. As content - offering visitors the chance to download pictures you have made.
2. As design - using images as part of the site, for example a page background picture, page titles or navigation bars.
Of course, images must be of a good quality in both aspects, and they should be relatively small (in terms of file size), especially where design images are concerned, as this hinders the download time of your page. See the images tutorial for more on this.



Remember these points when creating a web site:

  • Use a decent WYSIWYG editor (not FrontPage Express) to do the monotonous work for you (eg adding tags in).
  • Learn HTML, so you know how your page works.
  • Plan your design and content before you start.
  • Use tables to structure each page, create navigation bars or standardize pages.
  • Images should be used in the design of a page - however, they should be used sparingly because of their size.
  • Don't expect to get it right straight away! I made my first web site in December 1999 and have been improving steadily for years.
  • Lastly, have fun! Building a web site should be an enjoyable experience.