Part 1 - Your Website ... The Big Decisions
Decisions to make
Creating a site
Flat and dynamic sites
Domain names
Websites
Lots of people need to have a website now, but apart from "What will it cost?", there are two major hurdles to get over first:
- what's it all about and how do I do it?
- where do I find all the kit I need?
OK, well, we'll try and distill a ton of knowledge into a very short
space here. It can't be that short, though, 'cause it took about 10
years to learn it!
Is it really free?
You can build, host and run a site entirely for free, no matter what
type - even giant CMS (content management system) sites. Of course there
is a catch - you most likely won't get hosting that is absolutely ideal
in all respects, especially traffic bandwidth, or maybe with the right
URLs (page addresses) due to restrictions, but that's all. Apart from
that, it really can be done.
However, let's be honest here, the 100% free route is best for small
sites without a commercial agenda. A business site needs paid hosting -
but the free version is fine for many types of basic sites. And of
course, you can try out your site building capabilities, and whether the
host is any good, before paying up.
How it all works
1. Buy a domain name
2. Arrange hosting for site
3. Build a site on your PC, upload it to the server -OR- install website software on the server
4. Open champagne
Firstly - how to build your website (we look at how to buy a domain name further down the page).
You can create a website on your PC then upload it to an Internet
server. Alternatively, you can install software on a server that does
the whole lot for you. But you still have to write the content though :)
Servers are rented out by hosts, aka a web hosting provider.
Although most people choose shared hosting, you can also find free
hosting. There are always restrictions of some kind, so it's not optimal
- but these vary between the different free hosts, so you may well be
able to find one that suits.
Shared hosting is the normal type of deal, and it's where there are
50 other sites or more on the server. The less sites the better, as the
server slows down with a lot of sites on there as you might expect. You
can get paid hosting from $50 (£25) a year and up, but high quality
hosting - which means servers limited to a maximum of 50 sites - starts
around $150 (£100).
Otherwise, hosting at around $70 - $100 means maybe 200 - 300 sites
per server, and free hosting and up to $60 a year may mean thousands of
sites per server. For example I checked a server at GoPappy (or similar)
and there appeared to be 3,400 sites on it. This is OK for many types
of sites (especially HTML sites), but not ideal for business sites run
off a database.
A new site doesn't need to worry too much about this, you can always
move to better hosting later on. You don't lose anything in any respect
by moving hosts.
Creating your website - the decisions
Firstly you need to make some decisions -
-
is your site going to be easily classified as, for instance, a family
home page, a club site, a blog, wiki, forum, or CMS (complicated stuff)
type?
-
is it going to be 4 or 5 pages, or 50-plus?
-
are you going to do it all yourself or hire people?
-
is it going to be a temporary site, maybe for an event, at minimum cost?
-
do you want it to earn money in some way?
-
will it be a shopping cart / ecommerce site?
It's best to know exactly where you're headed for, otherwise things get
messy later. If it's a simple site with a few pages and no complicated
functions, then a standard HTML site is indicated - that's the usual
type with ordinary web pages that exist on the server. You can also go
this route with temporary sites for one-off events.
If it's anything else, you would probably be better off with a
database-driven website like a blog or a CMS (content management
system). This applies especially if you have any commercial intentions.
Any site with over 50 pages should use a CMS of some kind unless there
are very good reasons not to - and there are plenty of people who would
take that number right down to 10 pages, including me. And maybe lower -
a micro-cms is just fine for those jobs.
Flat sites
A flat site is an HTML page one, that you build on your PC with
something like Kompozer or Dreamweaver. It's called 'flat' because it
has static pages that don't change once they're built. You upload the
pages to the server and it hands them out when requested.
Images such as photos and graphics come from the folders on the
server that you uploaded them to. These folders are called directories,
but they are the same thing.
The advantages of an HTML site are:
-
it's very simple
-
you can have precisely the page design you want
-
it only takes up a tiny amount of web space
-
it's fast on the server
-
badly-run servers will still be OK with a straight HTML page website
The disadvantages are:
-
someone has to hand-code it
-
to edit a page you must do it locally in a visual or code editor then upload the page
-
page code changes are not always easy
-
it has very limited functionality
-
nothing too adventurous is going to be attempted, unless you get a developer in (aka a coder or programmer)
Dynamic sites
These run on a database (DB) and the pages don't exist, they are
built on demand by the web application on the server, which gets the
info from a database. This is the type of site construction that many
modern sites use now, and probably most websites with any kind of
commercial or advanced functionality will use in the future. Even sites
that look fairly simple on the surface use databases now, and some
sites, like forums and ecommerce, can't really exist without
database-driven functionality. Examples of this type of site are
ecommerce, CMS (content management systems), and blogs.
Advantages:
-
no coding to do at all, even for the most complex sites, it all works out of the box
-
functions / features are added quickly with plugins
-
will handle the most complex tasks if someone did that before somewhere (a plugin will be available)
-
templates are used for page layout, and they can usually be changed
-
building a 1,000 page site is no harder than a 10-page site, the machinery generates the page structure
-
menus are created automatically
-
all links everywhere are adjusted every time you make a change, there are no dead links
-
page edits are done live online via your browser, and they go live immediately
Too many advantages to list, in fact.
Disadvantages:
-
needs more webspace than a flat site
-
needs a database, usually MySQL
-
often needs a better class of host, as servers with old and outdated
software and/or poorly set up servers will work OK for HTML sites but
not for dynamic ones
-
security becomes an issue because there are a lot of attack vectors for these webapps, as against HTML sites
-
there is a steep learning curve for newcomers
-
to make the templates unique to your site, you need to be able to do basic coding (HTML and CSS)
But in general you will probably know which of these two main classes
of website you are going to use. A small and simple site is best created
as an HTML site. Also, a site with a complex and different
artwork-based layout on every page will need to be an HTML site (or one
of its close variants such as PHP or ASP).
Anything else is probably better off as a dynamic site, ie a
DB-driven one. This applies especially to a wiki, CMS, forum, shopping
cart / ecommerce, membership, directory, or blog website as these can't
really function properly without a database.
There is another class of webapps which is dynamic but doesn't use a
'real' database - the flat-file database apps. These are wikis or CMS
etc that use a flat-file as the data source, this is a type of text file
located among the normal web files. These apps do the job for smaller
dynamic sites that don't have a big agenda, and do it very well. They
have less functionality but often that isn't a problem. They are
excellent for use on a poor server, or one without a database (same
thing really), or one where the account management is restricted.
Examples: SkyBlueCanvas CMS, PMwiki.
Choosing a domain name
A domain is the title deed to run a website under that name. It's
exactly the same situation as with a house, the title deed is the main
thing - not the website, which like a house, is just something parked in
that space, and that can be rebuilt if needed. But you can't do
anything without the domain, and if you lost it, you'd be pretty well
sunk - you'd have to start from scratch. In addition, your domain name
can help or hinder you to a remarkable degree, especially for a
commercial site.
For these reasons I advise you to think long and hard about your
domain name. It will cost you $8 a year to rent but it's worth an
inestimable amount more. Once you 'buy' it, it's yours to rent
indefinitely, unless you let it lapse.
There are only two realistic choices for a commercial site - a .com
domain, or the one specific to your country such as .co.uk for the UK,
.ca for Canada. Most sites need to buy both, but trade under the .com
domain. There are other choices like .org for a non-profit, .edu for
academic resources, but let's assume that this doesn't apply here.
Don't buy a cheap domain because it will cost you a lot of money
(unless you're talking about a family site, then it doesn't matter). For
example you should avoid a .info domain as these were sold for 60 cents
at one time to dump them - and they're still cheap in places - so
spammers bought millions of them to 'churn and burn', which means to put
spam sites on that would probably be discovered and then banned by
search engines, while the spammer built another dozen to replace it. So
'.info' means 'cheap rubbish' to a search engine, unless and until
proven otherwise. You don't want that, search engines are a site owner's
best friend.
Domain name choices
There are two choices - a 'search term' domain or one that takes your
fancy. The first type is created to score highly for searches in your
chosen niche, so if you're blogging about techno-garage music you pick
'techno-garage.com'. Easy.
Trouble is, the best ones all went years ago, so you have to get a
bit creative. Just choose a name that includes whatever people are
searching for in your space, add something else if you have to, and
break the words with hyphens. Don't get clever or people won't find you.
So for our music blogger, if the first-choice name has gone, we'd
maybe pick 'techno-garage-music.com' or something. If you do this, then
when someone searches for this material your site is placed higher in
the results, as it's more likely to be relevant. And if their search is
for *exactly* the words in your domain, this is called an exact-match
domain, and you can get right to the top even if your site otherwise
rates at #50. This is due to the search engine having to put you up
there in case the searcher is looking for your specific site.
Or, you can just choose a name that sounds good to you. This can be a
good branding exercise, in that you pick a name that has the vibe you
want. Whatever you do, don't choose very long names, or names with
tricky spelling. Keep it simple. The best marketing names are simple and
easy, like Omo, the soap powder. Chucksbestbarbecueribsandsupplies.com
is a mistake. Here's a good example of a successful working domain:
picture-research.com
- because it's a search term, it's an exact match, it's easy to remember, and it sounds good for an enterprise.
Go to:
www.namecheap.com
...and create a free account there. This is the best domain name
registrar I know of. Their reputation and facilities are superb and you
will find the best control panel in domain management there. Actually
their prices are nowhere near cheap :) , but you get quality instead.
Login via the *secure* login, so that traffic between you and them
is encrypted (in the browser address bar you should see https:/ and not
http:/). Research the available domains and buy one or two. Set up the
free WhoisGuard identity protection on them, it cuts out spam and other
approaches. Do not use spoof names and addresses if you intend that your
website has any value - Namecheap are to be trusted (unlike some domain
registrars who unfortunately I can't name here), and they handle the
business of many major concerns. Note that you should have the site
operator's name and address on the website - domain ownership name
protection is a different matter.
Otherwise, if you're just dipping a toe in the water, you can get a
'free domain name' at one of the free hosts. It looks like this:
yourname.freeh0st.com
It's not a real domain, it's a sub-domain, and you can't take it
with you - it's just a folder on their site. But if this area isn't of
much concern to you, if you are putting up a temporary site at minimum
cost - it's just fine. Likewise the el cheapo domains like .co.cc and so
on. It's OK if you are happy that your business looks to be working out
of the Cocos Keeling Islands :)
NEXT:
How to build and host a website for free - 2
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