diy-www.hlp

Think you might like to create a website? Bob Thomas offers a practical guide for the timid.

Part 1: Planning and design Part 2: Get writing Part 3: Into Webspace

Part 1: Planning and design

It is entirely up to you whether you want to produce a website. This article will try to explain and spell out how it can be done and what it involves, so you can make an informed decision whether to even start. At the very least, after you have read it through you’ll probably know more about the subject than you did before.

Producing the more straightforward sort of website is not entirely easy, but neither is it beyond the powers of ordinary mortals. And it can be done at close to zero cost – other than dial-up phone charges, it needn’t cost a you a bean. If you are thinking in terms of a World Wide Web presence for a voluntary organisation such as your local orchestra, car club or Muslim Knitting Society this is probably the sort of thing you want – low outlay, low maintenance, low technology.

In most respects you can start a website modestly, adding more elaboration as time and your increasing proficiency allows. But one thing you need to decide even before you start is whether in the future you will want interactivity, meaning will your visitors ever be able to do more than just read what you have written for them? Do you envisage them writing directly to your webspace, like a bulletin board or a chat room, as opposed to having to write to you first so you can decide which of their views you will present in public? Will you offer them a live database – such as a sales catalogue – to browse through, and will you want to take their money over the internet?

If so, I can’t be much help. Websites where visitors can actually do things, as opposed to just being able to read things, are in a whole different league.* They have to be mounted on expensive rented webspace which provides full server side services to implement the programming for those interactive activities. They need to be programmed by somebody proficient, often full time. And you have to take responsibility for anything your visitors do – somehow you have to stop them from posting non-acceptable comments, you must meet consumer law, pay tax on sales, and so on. Interactive sites are almost exclusively for commercial enterprises only. (* Never mind if you’re unsure what some of this means. I’m just trying to scare you away from this route. Actually it’s only 90% true, too, but how complicated do we want this to get?)

On the other hand a read-only website makes no such demands, and if it will do what you want, read on. With a little planning you can write it all yourself using free applications, and then mount it in free webspace without needing to stay permanently online, maintain and update it when you have the time and stay in charge of it, rather than it being in charge of you. Let us start by just looking.

The ESTA national website estaweb.org.uk and the ESTA West Midlands site estawm.org.uk are both read-only sites. Estaweb reads like a brochure of 12 pages, each describing some aspect of the organisation. Estawm reads like half a dozen notice boards, each page covering its own subject area with a jumble of related items ‘pinned’ on to it. Some websites read like posters, others like a newsletter or else a magazine where each page is a different article. There are dozens of possibilities. Imitating the paradigm of some real-world document is a useful way to structure your material. Your visitors already know how to use the paradigm document, so they will know how to use your website. The best paradigm for you is the one that best suits your material. If you had circulated what you have to say in a ‘real world’ format, what form would it have taken?

Most websites consist of more than one page, unless they resemble a poster or a 1-sheet newsletter. Every page is a .htm file, meaning it is written in HTML (HyperText Markup Language) code, which allows text, pictures and other layout information to be specified, and which we will soon learn to love, or at least to tolerate, though we will not need to learn the HTML language in detail.

One and only one page of the site is the home page, often called index.htm, which is the first page that visitors will see when they enter the site. As a minimum this should confirm to the visitor whose website they have reached, and give them the means to reach the rest of the site’s content.

Take a look at http://estawm.org.uk/index.htm. (Better still, File - Save it from your browser to inspect in detail later. While you are at it, also load and save estawm.org.uk\simple.htm, which you will want later.) Estawm’s index or home page first announces what it is. Then it offers six buttons, each leading to another page one layer down in the structure, by which the user can access some aspect of the site content. Finally, at the bottom right under a line, is another navigation device which offers a quick way to every other subject area: this appears on every page and, with the light green background, helps give the diverse pages of the site some unity. This index page contains no other content. The site structure is a 1 to 6 hierarchy, i.e. 1 index page to six content pages, each of which can, if required, subdivide. Teach.htm, for example, is meant (when there is more material – come on, everybody!) to become a sub-index for a series of pages each covering a separate group of discussion threads in a particular topic area.

Compare and contrast estaweb’s approach. Every page comprises 3 frames. The top frame, which never varies, includes the ESTA logo and a navigation device in the form of a drop-down menu by which the visitor can choose what topic to see in the middle frame. The bottom frame is also invariable and also a navigation device, comprising a straight list of "middle frame" topic pages. So the content is contained in a dozen pages with a totally flat or "peer-to-peer" structure. Sense of identity is created with the fixed frames, the logos, the colour scheme, the Arial font and a deliberately more formal approach than estawm’s rather rustic style. For all their differences (horses for courses) both sites hit visitors first with the site’s identity and how to get around it – hence what sort of things it contains - because those are the first things they need to know. Nothing distracts from those priorities.

Organise the structure and thereby organise where the content goes. I advise separate pages for fast-changing information, which can be presented rough and readily so long as it is kept current, from slow-changing information, which should be presented prettily. Perhaps some pages, although logically part of the same site, would actually be better maintained by someone else and physically mounted on a different server - all the pages in the structure are only joined together by hyperlinks, so they don’t always have to be all in the same place as each other. Plan out the logical structure of the site before attempting to actually write anything, or you will surely get lost in the wood later. A sketch on paper of roughly what each page should contain and how they will be linked together is an important first step.

In Part 2 of this guide we will get hold of a website editor program so you can turn that sketch into reality as a set of files on your own computer. Then in Part 3 we will obtain some webspace and launch the website on the waiting world.

Part 2. Get writing

When you have a reasonably clear picture of what your website should be like, get at least a basic rough version drafted. The procedure is to compose, and subsequently update, a complete copy of your website on your own computer, then from time to time electronically post your latest version to your webspace, from where your visitors will access it. We can worry later about getting some webspace and posting to it. For the time being get used to web page editing.

You need to use some kind of editor program that can handle HTML editing. To see what raw HTML looks like at its simplest, open simple.htm, which you saved earlier, in your browser and follow instructions to View the Source. Compare the source file with the page that displays in the browser to get an impression of how it works. Many editors work in WYSIWYG, typing text and placing graphics very like Word Processing, and then generating the HTML in the background so you don’t need to handle it yourself. However any automatic process will get some things wrong, and then you may need to edit the HTML directly just to fix the odd problem.

There is a bewildering range of choice for editors.

• You could of course dig deep to buy the professional article, like Macromedia DreamWeaver® or Microsoft FrontPage®, but I am assuming you don’t want to spend serious money on it, since you’re not likely to be earning any from it, and there is no need to. (You might already have FrontPage if you have Office®, but please don’t shame me by using pirate copies.) Some other commercial programs are not as expensive as these market leaders.
• You may already have a Word Processor or a Desk Top Publisher which reckons to handle web pages. If so familiarity will be an advantage, and you can do mainly WYSIWYG editing. But I would only advise using it if it passes two tests: (a) can it open an existing HTML file (such as simple.htm) and (b) will it let you edit (not just view) the HTML code directly if you so wish? Surprisingly many fail one of these tests, and they will only really do if they pass both.
• What I use myself is Microsoft’s FrontPage Express®, a cut-down version included free with some editions of Windows, though it might take some finding as an optional extra on the system disks. It does all the basics in WYSIWYG, but you can also view the HTML it makes and edit that direct if necessary. To my mind something like that is the best combination of convenience with control. FP Express’s major weakness is that it has no useful Help files; and WYSIWYG alone never does everything HTML is capable of.
• There are many others of varying quality available as freeware, shareware or trialware (try before you buy) to download from the web or on magazine cover disks. At one extreme, some are little more than sets of ready-made templates that you can only customise – too restrictive for me! At the other extreme are non-WYSIWYG specialised text editors. The best of these (like the freeware version of AceHTML® from www.visicommedia.com) are sufficiently helpful once you get started (with lots of Help, menu-driven operation and instant previewing) that although daunting at first they end up no harder to use than WYSIWYG, while giving you the maximum potential.
• And finally, since an HTML file is ultimately just a text file, you can always open and edit one in a plain text editor like Notepad (but not a WP like Word or Write/Wordpad which slips in its own additional code). You can download tutors (NCSA is a good starter) and dictionaries of the HTML language from the web and really do-it-yourself if you like. Or if you’re mad. You can also learn a lot from viewing the source of other HTML files to see how they achieved things – so long as you don’t overdo the sincere flattery.

When you have got your editor up and running, here are my top tips.

1. Save all your .htm files (one for every web page) and all the other resources such as graphics and audio/video clips in a single folder (i.e. subdirectory if you don’t speak Windows), and keep nothing else in there that will not finish up on the web. I find it useful also to have a companion folder nearby for drafts, originals of pictures and ‘things which might come in useful one day’ but which are not currently part of the website.
2. When everything for the site is in one folder there is no need for the filenames to have paths, e.g a picture can be specified just as myimage.jpg rather than C:\blah\blah\myimage.jpg. The former will still specify it correctly when the whole lot has been transferred to a single folder in your webspace, but if the version with a path has been used in the HTML code, the web won’t be able to find it as it can’t access your private computer. The bad habit among WYSIWYG editors of including full paths with pictures and other file references in the code for a webpage is the main reason why you always need to be able to do at least a bit of HTML editing yourself, just to strip the paths back off the filenames.
3. On the subject of filenames, it is a good practice to keep them all short, i.e. the old-fashioned maximum 8 letters plus a 3 letter type suffix. The reason is that many websites do not end up on servers running Windows but various flavours of Unix, some of which don’t do long filenames. Equally, if you’re used to Unix where filenames are case sensitive, make them all unique regardless of case, as they would have to be in Windows. In general go for universality, and unless you really need something special avoid depending on propriety standards, such as plug-ins that need the client (visitor) to have installed Microsoft’s ActiveX or Macromedia Flash. Java is universal but many people have it turned off, (wrongly) believing it to be unsafe.
4. HTML is more like Word Processing than DTP because deep down one object comes after another, rather than being positioned two-dimensionally on the page. But, unlike either, you don’t know how large or what shape the page is, because you don’t know the visitor’s screen resolution or how large a window they have given to their browser. Left to itself a browser will try to reshape blocks of text and tables to fit them into the available space, so why not let it? Write with that in mind – it is idiomatic to the website medium. Don’t force visitors to be in full screen mode to see the thing on the right or at the bottom that they really needed to see.
5. Tables are a wonderfully versatile layout device, and there are many examples in the estawm site. Besides grids of information which obviously look tabular, e.g. the list of teachers in study.htm, borderless tables can be used to place elements side by side, e.g the top of teach.htm, overcoming the total dominance of ‘one thing after another’ layout. The cells of a table can contain text, pictures or both, e.g. events.htm, while the ability, within limits, to merge the cells in a table can stop the layout looking grid-like, e.g. index.htm where the buttons appear to cascade down in what is actually a 7-column table.
6. Keep image files small. They account for almost all the time it takes for a webpage to load on-line. Dial-up cannot load faster than 5Kb/sec. Rather than incorporate a megapixel photo resized on the page down to a few hundred pixels, use your graphics editor to make a reduced size copy of a few hundred pixels and incorporate that at its full size. It looks just the same on the screen. A naturally grumpy user like me won’t wait for a big graphic to load, but will simply abort and look elsewhere, in which case you will have wasted all your time. Fancy stuff ‘to grab their attention’ is OK if it doesn’t get in their way. After a graphic has loaded once in a session, though, it is fine to use it again since the browser will cache it, so you can use logos repeatedly to help visual coherence.
7. Use either JPEG or GIF format for all graphics. JPEG often (not always) makes the smaller file – high compression is fine since it is loading size that takes up the time – but GIF allows transparency (as well as simple animations) so pictures don’t have to look oblong.
8. Think about how many web links you need to include. You’ll want a few, of course, because your topic does not exist on an island of its own. But is it your responsibility to be a gateway to every other Muslim and/or Knitting site on the web? You must keep links up to date: every time a link fails – which is often – it’s you that looks a twit. If you find one or two good links lists elsewhere perhaps just pass your interested visitors on to them rather than go into competition. And when your site is operational, find out which are the best links lists out there and try to get onto them.
9. Make use of what FP Express calls Page Properties and AceHTML (on the Specialised tab) calls Document Meta and Body properties to set background colours and watermark images. Be careful that the background doesn’t prevent people reading what is written on it, though. On the index page only, you should set at least the "keywords" meta property in the head section – view the source of estawm’s index page for an example. Search engines use these keywords to decide if your site meets the user’s search criteria.
10. I don’t bother with visitor counters. They are always fake (authors initialise the count with whatever absurd figure they dream up), they don’t work correctly on all servers, and most of your visits are likely to be from automated web crawlers looking for e-mail addresses to send spam to.
11. All sorts of peculiar folk can read your website, so think what information you are giving them. The awkwardest area is contact information. You want to encourage legitimate enquiries, e.g. from potential new members, but you don’t want nuisance calls or junk e-mails. I discuss this at the end of estawm.org.uk/contrib.htm. And don’t put State Secrets on the web. There is no effective way to password-protect information other than serious programming, so if it could hurt you, don’t put it in. But is there any harm if everyone in the world can see your AGM minutes or your rehearsal schedule, even though they are only really relevant to your members? Be as open as you dare.
12. Try your draft out often in your browser to ensure it works. I try mine out in a few other browsers besides my usual one, and at different window sizes, and with graphics turned off. It will work at least as well sitting on your hard disk as sitting on the web, and if you are on-line at the time any remote references, e.g. to other sites on the web, should work too.

If nothing else, writing a site will make you a more critical surfer, less tolerant when web authors fail to show proper consideration to other web users.

When you are satisfied that the basic structure works, even if there’s still a lot more detail and refinement you could add, it is time to get hold of some webspace and post your site onto it. Which is our next subject.

Part 3: Into Webspace

When you have written at least the skeleton of a working website on your own computer, you will want to put it on the World Wide Web for others to enjoy. You may have an entitlement to free webspace with your existing e-mail account, but it is best not to use that for a society’s website. You would not be able to hand over the reins to somebody else without giving them the passwords to your private stuff.

I advise you to open a new e-mail account specially with an ISP that offers free webspace. There are dozens of these in the UK. Just go to their website and apply. I have found freeuk.com easy to use in the past. I chose tiscali.com for the estawm site because they offer an option of anti virus and spam scanning at an extra charge, which I might want to take up in the future. For now I rely on my computer’s own. You must of course have adequate virus and spam protection, as you will become more visible than ever to cyberspace.

Your organisation will gain an e-mail address at the same time, if it didn’t already have one, through which website visitors can contact you. It can be a help to use your usual ISP again so you can collect your private and your website e-mails in the same dial-up session, but another strategy is to keep them completely separate. The freebie webspace will have some restrictions – maximum size, not many server side services, limited usage for sales – which are unlikely to be any nuisance with this sort of website.

When you have opened your e-mail account, the ISP’s website will have instructions on how to activate your webspace entitlement. Be careful to note down everything you are told about your username(s), password(s), POP3, SMPT and any other addresses, because I for one have never got through the stage where you need the information at the first attempt or without serious confusion – though I have never been defeated in the end either.

The procedure will involve identifying who you really are since the law now requires this – if you are naughty the rozzers need to be able to find you. You will get an automatically generated but possibly clunky web address (URL) which will be related to your e-mail account name. This name may be good enough for you in practice, but if not see below about the option of paying for your choice of domain name.

To copy your website files from their folder on your computer to your webspace requires a type of program called an FTP client. File Transfer Protocol is one of the basic operations of the Internet, like e-mail and the World Wide Web. The FTP client will need to know the magic information about your account so that when you are online the ISP will let it copy your files into your webspace.

The Web Publishing Wizard in Windows is an FTP client, and very easy to use, but I don’t like it much. It is awkward to correct mistakes, and also it always transfers everything, even though you may only have updated a few files. I use AceFTP® freeware from www.visicommedia.com. This has two side by side windows, one listing the files in your local folder and the other listing the files on the remote site. You can compare them to identify which files have newer versions, you can copy selected ones from one window to the other, delete obsolete stuff and so on rather like handling files using Explorer in Windows. As with AceHTML you can purchase a commercial version from them with more knobs and whistles, but their freeware version does all the basic things properly.

Once you have posted your website on the internet you will want to point your browser to its URL and try it out live. This is when you start finding the bugs you missed before. The commonest are the filename errors discussed in Part 2 above. Those, and all the typos you never see in time. You’ll have to correct your source files and then FTP them up to the web again, as often as necessary. At this stage nobody but you knows your website is there, so you have got as long as you need to fix things before anybody else sees it.

Then you need to start letting other people know it is there so they can start using it. Publicity does not happen automatically. Ironically, you may have to use a paper newsletter to tell your own members. Obviously start putting your URL and e-mail on all printed matter. See if you can get a link on other closely related websites, and those that pride themselves on extensive link lists: if you would want to link to them, they are the ones you want your link on.

The situation with search engines is no longer straightforward. The decent ones insist on inspecting your site before they will list you, so there is always some delay. You can still, at time of writing, register yourself on the Google website without charge and get a result in a few months, though some others make it clear they expect you to pay a fee if you ever want to get to the front of the queue to be inspected. Some people sell programs or have websites which offer to submit your site to a multitude of search engines. Some want a fee. Some only want you to register so they can sell your e-mail address to spammers, but do nothing. And a few are honest.

None of this, I am afraid, will guarantee you a flood of interest. For societies, a website is often a must-have possession. But few get used by their members the way their authors feel would repay the effort that they consume. Prepare for disappointment. But also make sure that it isn’t your fault. If you had not written this website yourself, would you be bothered to visit it? And if you did so once, would you have sufficient reason to come back to it again?

The final flourish, if you wish to do so, is to get yourself a proper domain name. Instead of having to use the clunky URL your ISP gave you, for a few quid a year (payable by credit card only) you can become muslimknitting.org.uk, or any name you like so long as nobody else has already taken it. Before you start this process, get your website up and working. At heart the domain name you buy is really an alias. When typed into the web, it will be translated into the address it stands in for. (Your clunky URL, which will still work, is also an alias – both names translate ultimately to a long and utterly unmemorable numerical code called the IP address, which is what the computers actually use.)

What type of domain name you should have (e.g. .com, .net, .org, .co.uk, .org.uk, etc.) depends on what sort of organisation it is for, and the prices vary. There is no law against having an inappropriate type, but it is misleading and suggests ignorance. Only international companies should have .com type, for example. All voluntary (i.e. not really for profit) organisations in this country should have .org.uk type, which also happens to be one of the cheapest, being obtainable for less than £5 for two years, including VAT.

The drill is that first you reserve your chosen domain name with one of the many ISPs who offer this service. From their sites you can first establish what names are still available. I went through Lycos.co.uk to buy the estawm.org.uk name. They take your money, giving you an account, and register you with Nominet.uk which is the actual registering authority. (Nominet do not encourage you to register with them direct, charging a small fortune, whereas going through one of their partner ISPs like Lycos is much easier and far cheaper.)

Nominet then write to you by mail, ensuring you live where you say, and giving you a password onto their website where you can confirm your true identity. The real identity, name and postal address, of the registered owner of any domain name is freely and publicly available through the WHOIS internet service, as required by law. You must allow a couple of weeks for your registration to be complete.

You now own the name, but it does not yet point to anything useful. Back at Lycos I then entered my account, which gave me several options, including redirecting the domain name. I pointed it to the clunky URL and, hey presto, it worked within the hour. In a couple of years they will be asking me for a few more quid to renew the domain name. I have not used any other service, but I assume they all work something like this.

So there you are. As you can see, producing your own website is not particularly easy, but it is not impossible either, given a few learning curves and some time. I have tried to be neither falsely encouraging nor discouraging, and just let you know what you are in for if you start. You can decide for yourself whether you are up for it.