How to build and host a website for free - 2

- a multi-part series on creating your first website -

Part 2 - Building a small site the easy way

First steps
Let's start with the assumption that you're going to build a simple site with a few pages for your family, or a local group that has a fairly simple agenda. In this case we can use the normal web page type of site, and there'll be maybe 10 pages or less. This will be what is called an HTML site / a flat site / a hard-coded site / a hand-coded site.

As we saw in Part 1, you will need to do these things:

- buy a domain name
- choose a web page editor
- build the site
- choose a host
- upload the pages to the server

Web page editors
These come in two basic types: text code editors (aka HTML editors or raw code editor) and visual (aka wysiwyg) editors. Visual editors are what most of us use, including me - I build the first stage in a visual editor then adjust the code in an HTML editor - and a what-you-see-is-what-you-get editor is just fine for now.

There are two types of these: the popular type like Kompozer (free) and Dreamweaver (commercial), which can all work with HTML files - and the one-way rapid layout type like WebDwarf (free) or SiteSpinner (commercial), which work in a proprietary code then export to HTML, but cannot import or work with HTML pages.

In addition there are online versions of the visual type that are normally called sitebuilder apps or something similar.

The 2 easy ways to build a web page
Here's my take on this: the single hardest thing for any newcomer is laying out a web page so that it looks like what you want, and the bits go where you want them and stay there.

This is so difficult for a newcomer that I cannot even start to recommend a visual editor of the Dreamweaver or Kompozer type, unless a template solution of some kind is used - otherwise you'll simply spend days trying to get the tool to work. And your page still won't look how you want, because your aspirations will be handicapped by what you can do with the tools. You'll know exactly what I mean if you ever started on a website and just gave up because it was too difficult - and that applies to tens of thousands of people. 

You really don't want to go this route because it might put you off websites for ever.

Easy method 1
However, as stated, if you use pre-built templates then it is much easier. It works just fine, if you can find the template you need. Search 'free website templates' and you can find plenty of resources.

Online and host-supplied template site-builders work in exactly the same way, you pick one then add your content. Again, this is fine if you like what's on offer. Their template entirely determines what your site looks like. The advantages are that you get your site up fast, and the design will be OK - in contrast to what will happen if you try to go it alone the first time. The disadvantage is that you may need to search for a time, to find a template that is acceptable to you.

Easy method 2
On the other hand my preferred method is to use a rapid-layout app because that way you get exactly what you want, without the layout hassles. You can layout a page exactly how you want almost immediately, and move anything anywhere instantly. There are none of the issues that you have with Kompozer, for example, trying to get stuff to stick on the page where you want it. But the fast layout apps have two disadvantages: they are one-way only, they work in a proprietary file format and then export to HTML - you can't tweak an existing page, you can only rework the master file and then re-export it. And also you have to design the page yourself, there are few templates for use with these apps.

Nevertheless, this is my preferred solution. One you can try is WebDwarf, which is free. The best commercial version that I know of is SiteSpinner. These applications export to HTML based on divs and CSS, which is a layered, vector technology that is now recognised as the best (and now of course the only acceptable) system. They did so years before Dreamweaver had cottoned on to this, and was still using tables for layout. Table-based layout is the old, 90s-era method, that is now long superseded except for tables of data.

WebDwarf is a free version of SiteSpinner and is still developed, CoolPage is similar but ceased being supported in 2002, though it is still viable for specialist use. WebDwarf validates to HTML Transitional but not Strict, meaning that it is not of the highest quality but acceptable for our purposes.

My easy web page build method is quite simple: build the page in a rapid-layout app, then clean it up in a text code editor. In your case you will use a simple visual editor like Kompozer for this second stage.

As it's not easy to find a quick review of webpage editors from someone who puts usability as the #1 feature for any tool anywhere, and a review having the potential to save you you a huge amount of grief, I figured I'd oblige. ==>

Dreamweaver
One of the best web page editors. Does everything - visual and code, layers or table-based, HTML / PHP / ASP. Extremely hard to use for the beginner, like Photoshop, but probably even harder to get the result you want. Good for improvers, very good for experts. Much of the benefit comes from all the add-on features, like the very good validation tools.

SiteSpinner
Another of the top apps. Was using the current code layout system of divs and CSS a long time before Dreamweaver. A one-way fast layout program with capabilities similar to Dreamweaver, but far easier to use. Builds the same page in about a tenth of the time it takes in Dreamweaver, as it works in real code and with layers. The page is output to .ims format, which is then exported to HTML.

Frontpage
Microsoft's venerable web page editor. Was a good tool in the 90s when pages were built with cells and tables - very low quality by any modern measurement. Produces poor-quality code, with low accessibility and code validation scores. Using it with Frontpage Extensions on a server provides hackers with lots of nice attack vectors. Hard to lay pages out correctly until you learn its ways (like many web editors though). Frontpage-created websites are often crude, due to the restrictions imposed by the creaking method of page construction using cells. RIP!!

NetObjects Fusion
Another one-way app. An alternative to SiteSpinner, but on balance SS is better. In theory NetObjects can read / import HTML pages but you need to see the result - 'not usable' is a polite description.

CoolPage
One of the leading layer-based web editors back in the day, around 2001, this is one-way quick layout app was maybe 5 years ahead of most other apps. Developed by a brilliant coder who was years ahead of his time, this is the fastest of all web editors - you can layout a complex page in a couple of minutes, to pixel-perfect positions, with anything wherever you want. However there are numerous drawbacks to this program now and I certainly don't advise you to use it, it's a fascinating example of what could have been if it had sold and was still supported. The code isn't good now, it's old HTML, upper case, validates to HTML Transitional with a little work. Not for use except by experts who can clean up the resulting code - but the best there is for concept layouts.

Kompozer
This is an update of Nvu, the open-source web editor which ceased being supported. Kompozer is also not one of the busiest projects. It's basically a simpler version of Dreamweaver - you'd use it if you like that style of working but don't want the complexity. Not a bad editor in this style. For novices, its best use is for adding stuff to a page created in a basic rapid-layout app like WebDwarf. You can build a page fast in WebDwarf, export it to HTML, then touch it up with Kompozer.

MS Sharepoint Designer
Lots of arguments about whether this is a valid choice or not as a web editor. Some say it can only be used within the Sharepoint system (and this seems to be Microsoft's stance), others that it's OK, and yet others that it somehow caused system problems and had to be uninstalled. Given the latter I think this one is best avoided, since there are plenty of alternatives.

There are also of course a very large number of other choices in free web editors - check out the page on this site:

Best Free HTML Editor

I'm not familiar with the editors on that page so perhaps one there is a better choice than the one I'll suggest for you. You need to ask two important questions though:

1. Can you lay out a page fast with it?
2. Does the code validate?

These are the crucial issues with web editors now, due to real-world requirements that include time constraints and commercial results. If the answer is no to both, then I think it wise to look elsewhere. The ideal web editor builds a page very fast in rapid-layout mode, and the resulting code validates to a Strict doctype (a Transitional doctype is basically a bodge-up that puts a browser into quirks mode). The only one I know that complies is SiteSpinner, though since this isn't my game any more (I only work with CMS and ecommerce now), I can't state this as fact.

WebDwarf
The free version of SiteSpinner, this is the web page editor I advise if you're interested in usability. For me this is vital as I just want to lay the page out quickly and get on with other stuff. It's a one-way app that doesn't work in HTML, it builds the page in a proprietary code (.ims) then exports it to web format. This is a fast way to build a page that has a lot of advantages over the Dreamweaver type that only work in HTML native. The problem with native HTML apps is that you can't really do much in HTML, it's a pig to work with and very limited - much better to work in real code and then export it. However, this means you can't import and work with a web page.
Download WebDwarf

Build that site
Let's go ahead using WebDwarf. We'll build a small, simple site, and upload it to our chosen host. You'll need these basic pages:

1 - the index page, aka front page or home page
2 - some 'inside' pages with your desired content
3 - an About Us page, with your name & address, and what the site's purpose is
4 - a Contact page, with quick-contact details such as your email and phone number
5 - a Links page, for weblinks to other useful sites, and for building reciprocal links
6 - a TOS page, with your terms of use for the site and any conditions, copyright etc

So you can start with 4 to 6 pages or so, and that will do fine. But note: if you are definitely going to have 10 pages or more, don't use this method - I advise you to use the micro-cms method we will look at later on. It's far less painful and it's the modern way. In the hands of novices (of course it's different for experts), the HTML page method is suitable for very small sites with a limited agenda.

Local site folder
You need a folder for your local site, ie the master files on your PC. Create a folder within My Documents or wherever else you think best, and call it 'website' or whatever. Inside it create three folders: html, gfx, and master. These folders hold the web pages, the graphics used, and the master files or source materials.

Set up WebDwarf to open in and save to the master folder. We should start with the index page or index.html - this is the filename of the front page (and is always this name or a close variant). I advise you to use the .html file extension, out of the possible variants such as .html, .htm, .php, and .asp.

Building pages
How to actually build pages and link them is really the subject of another tute, in Part 3. For now - just experiment. An outline of what you need to do is as follows: in WebDwarf, create your first page either from scratch or by using a template. I recommend the latter for your first-ever page, using one of the templates they provide, or simply by modifying the start page they give you.

Save the page as 'master' (the page filename). Use it as your own template, and build all your pages from it as a master layout guide. After making this basic page, you'll use it as the basis for all the site pages. So:

• save the master
• export to html
• view the page and check it
• create a template
• build more pages

There's a quick guide to building your first page, in Part 3 of this series, next up.

This tutorial is by volunteer editor Chris Price. In the computing area his interests include website software, web usability, and running his ethical SEO agency.
Registered site visitors can contact Chris by clicking here.