| HOME | Layer Churches | Layer Villages Info |
| Time Out | Page Design | Contact |
Back in 1999 I thought it was about time to get on the internet and so opened an email account with Freeserve. In addition to email there was the offer of 15MB of free web space. Free gifts have a certain attraction but I did wonder whether it was within the capabilities of an ordinary mortal to make use of this particular one. How easy or difficult would it be to learn HTML (Hyper Text Markup Language) and create a web site? I soon found out that with a bit of guidance it is not especially difficult. Don't be put off by the term HTML - its much simpler than it sounds, at least the basics are. If you haven't yet tried your hand, the following paragraphs may encourage you to dip your toes in the water and have a go. (My abiding thanks to Ian Simpson who encouraged and helped me through the steepest bit of the learning curve.)
INDEX and links to topics on this page (There is another page about Web Page Design):
HTML Books | Free Software | Downloading Software | NoteTab Text Editor | HTML Coding | Other Web Page Tools | Web Page Editors | Touch of Colour | Image Viewers & Editors | Uploading Web Pages
| Cascading Style Sheets | Site Search Facility | Hit Counters and Web Trackers
Even if you have a knowledgeable friend to show you the basics, one of the best ways to teach yourself about any new subject, including HTML, is to get one or two good books on it.
A book which proved invaluable in getting me started is HTML 4.0 by P K McBride & Nat McBride in the Butterworth-Heinemann Made Simple series. Price £13-99. Published 1999, ISBN 0 7506 4178 9. It is not too bulky, explains the basics in understandable terms, shows plenty of examples, has a reference section on HTML tags, and some helpful tips on the pitfalls to look out for. It is now rather more expensive than when I bought it so my suggestion is you borrow it from the library and put the money towards one of the books mentioned below.
Once you have mastered the basics you may want to explore the technicalities of HTML in greater depth and find out what constitutes good coding. This is important because not all browsers are as forgiving as MS Internet Explorer in how they handle code. If you wish to develop your HTML knowledge and skills further then a worthwhile investment is Web Design in a Nutshell (3rd Edition) by Jennifer Niederst Robbins, published 2006 by O'Reilly. The 3rd Edition has been greatly expanded and includes a major new section on Cascading Style Sheets (CSS). The UK cover price is £24-99 but it can be bought for substantially less by buying online at, say, www.bookdepository.co.uk (£14-19). Niederst explains things well, and in good depth. The book also has very useful and comprehensive reference sections. It is my HTML 'bible'. I rate it highly and refer to it regularly.
Another well respected and useful book, presented in a somewhat different style, is HTML for the World Wide Web, 6th Edition, in the Visual Quickstart Guide series, by Elizabeth Castro, published 2006 by Peachpit Press at £21-99, ISBN 0-321-13007-3. The book includes guidance on HTML developments such as CSS (Cascading Style Sheets) and XHTML.
index
There is some excellent, genuinely free, software available on the internet for web page work. These are not evaluation versions which die after 30 days, littering your system with their corpses! I regularly use three or four of these free programs for creating and checking my web pages. They are described in later sections of this page. I have found them to be well written, easy to use, and stable.
index
Most free programs are available for download as *.exe files which automatically unpack and install themselves when you run the file.
TIP - Make it easy to find your downloads later by saving them to a folder or directory specially created for the purpose. Use a memorable name for the folder, such as 'C:\downloads'.
Although there are rarely problems with downloads from reliable sources, it is good practice and highly advisable to save any download to disk and check it with up to date anti-virus software before opening it.
index
One of the first things you learn about web pages is that they are simple text files which need to be created and saved as such. Unlike other text files, the filename extension used is .htm or .html, not .txt. It is possible to use a word-processor like Microsoft Word to edit and save HTML files but the general advice, which I would endorse, is to avoid doing so. Problems tend to arise because some word-processors like Word automatically treat files with an .htm or .html extension as web pages rather than text files. It is also just too easy to make the mistake of saving your carefully prepared HTML text as a Word document or using the 'Save as Web Page' option. Either of these actions will cause you problems. It is much more satisfactory to use a text editor.
Assuming you are using a Microsoft Windows operating system, you will already have at least one text editor installed on your computer, if not two. The most basic of these is Notepad. The other, which can handle larger files than Notepad, is WordPad. Both can be found and opened by going to Windows Start > Programs > Accessories. If using WordPad, you again have to be careful to ensure files are saved as text (with the .htm or .html extension), not as an RTF (Rich Text Format) document.
A far better alternative to both Notepad and WordPad is NoteTab. This is a really excellent text editor for web pages, which has deservedly won many awards. A free version, NoteTab Light, can be downloaded from www.notetab.com. NoteTab has been specially designed for HTML coding and web page work. Among other things there are libraries for quickly inserting HTML tags and an icon which opens up your browser so you can see immediately whether the result is what you intended. NoteTab has several other useful little features which should not be overlooked and which I have found invaluable when dealing with blocks of text. It is the program I have consistently used for the last eight years or so and all my web pages have been built with it. NoteTab is a 'must have' program even if you don't intend to make a career of web page building. Fuller versions of the program are NoteTab Standard and NoteTab Pro which are very modestly priced.
index
So what does a web page with HTML tags look like? HTML is formed by enclosing the text of a page within tags, opening and closing tags. An opening tag for a paragraph, for example, looks like this: <P>. The closing tag has a slash after the first chevron, looks like this: </P>, and is placed at the end of the paragraph. Other tags are used for headings, or to display text with a different font face or type size, or in bold or italic, etc. Web pages, of course, can also include links to graphics and sound files.
At its most basic a web page look like this:
<HTML>
<HEAD>
<TITLE>*** Title of the page goes here ***</TITLE>
</HEAD>
<BODY>
<H3>Section or paragraph heading</H3>
<P>This is where the text of a paragraph goes.</P>
</BODY>
</HTML>
If you save the above as a text file with an .htm file extension and uploaded it onto a server, you will have a working web page. The opening HTML tag tells the browser it is dealing with an HTML file. Then there must always be a HEAD section which must contain the page's TITLE. The main part of the page is placed in the BODY section, and finally there is a closing HTML tag. One of the important points to note is the way that tags are 'nested' - the HEAD and BODY sections are nested within the opening and closing HTML tags, the heading and paragraph elements are nested within the opening and closing BODY tags, and so on. To get a better idea of what coded HTML documents look like, visit a few web pages on the internet, pull down the 'View' menu in Internet Explorer, and click on 'Source'.
For a useful collection of reference documents on HTML tags, etc, go to the Web Design Group's site at www.htmlhelp.com
index
In addition to NoteTab described above, another two free programs with good HTML text editing features are: -
CSE HTML Validator Lite from htmlvalidator.com. The program is designed primarily to check your HTML coding and tell you where you have gone wrong. It does this well and is very simple to use - highlighting the part of the document which needs correcting and telling you what is wrong (a good learning aid). I regularly use this program and wholeheartedly recommend it. It can save hours of searching for bugs or errors in your coding. A very professional and well designed program with many options for tailoring it to your specific requirements. Other features also make it very useful as an HTML text editor - for example the tag inserter. There is a Professional version with more features which is not free.
HTML Kit from www.htmlkit.com is a really powerful and highly configurable program which is loaded with features for web page editing. It receives excellent reviews although a tiny handful of people criticise the poor on-line Help. My view is that if you have learned the basics then the program is reasonably intuitive and you shouldn't need much help. Perhaps better to leave it until you have graduated from the nursery slopes, but well worth looking at.
index
These are programs which enable you to create web pages without learning HTML. Microsoft used to offer a free one called FrontPage Express, a cut down version of FrontPage. No longer available from Microsoft, it can still be obtained free from other sources - do an internet search on FrontPage Express. The best known of the professional web page editors is Dreamweaver, but it comes with a hefty price tag. There are many others on the market. To sort the wheat from the chaff it is worth studying some in-depth reviews to assess the pros and cons of the various packages on offer. The big advantage of using one of these programs is that you don't have to worry too much about HTML and HTML tags. All that is done for you behind the scenes. They also come with selections of templates so you can build a professional looking website without spending a lot of time on designing a good layout and navigation menus, etc. However there are downsides in addition to their cost. They tend to insert many more tags than are strictly necessary, making your page files larger and therefore slower to download. Other weaknesses are that you lose some of the flexibility offered by writing the HTML code yourself, particularly if you use Cascading Style Sheets, and there is a greater risk of your pages not rendering as intended on some browsers.
It is possible to use Microsoft Word to create web pages. First type in your text in the normal way and apply the desired formatting. Then pull down the File menu and select the 'Save as Web Page' option. This will create an HTML file which can be uploaded onto a server. However, MS Word was designed primarily as a word-processor, not a web page editor, and web pages created with it will suffer from the limitations mentioned above. If you do try making some pages with MS Word, it is interesting to open them later in a text editor to see just how many tags have been inserted.
Even is you decide to invest in a proper web page editor at some stage, it is still worth making the effort to learn HTML. You will find it helpful to have some understanding of the code generated by an editor and to be able to fine tune pages by editing them manually in a text editor if desired.
index
In printing or photocopying one of the cheapest ways to add a little interest to a document and to make it stand out is to use coloured paper. The same principle can be applied to web pages.
It is important to make sure that colours used for backgrounds, text, and links don't clash, and that text remains comfortable to read. An excellent freeware utility which enables you to quickly try different colour combinations is BK Color Coder. Go to www.orbit.org and download a copy. It is a very simple and intuitive program to use and the Help is also good if you need it. The program is just what I had been looking for when I found it - thoroughly recommended.
index
Sooner rather than later you will want to add images, such as photographs, to your web pages. Frequently there will be a need to edit images by changing their size or colour, etc. If you don't already have an image editor an excellent free one is IrfanView by Irfan Skiljan which can be downloaded from his website at www.irfanview.com. It is a compact program with a useful range of features. For example you can crop images, rotate or flip them, apply a number of special effects, edit colours and resize.
A well-known and popular image editor is Paint Shop Pro. Over the years it has developed into a powerful package with a large range of features. This does however involve a steeper learning curve for users. Now in version X, it costs about £85. Find out more at www.corel.co.uk. The industry standard for professionals is Adobe PhotoShop but the full version costs in the region of £400+. A cut down version, PhotoShop Elements, costs around £65 and should meet the needs of most non-professionals.
index
Having prepared your web pages on your computer at home, the next stage is to upload them onto your ISP's server. The terminology sounds daunting, but don't be put off. To get your page(s) onto the server you need an FTP (File Transfer Protocol) program. You can get one free off the web, or you may have a web page editor with one built in. I use WS_FTP LE which was free to private (i.e. non-commercial) users. It has now been replaced by WS FTP Home which is not free. A well-respected free FTP client is the open source 'FileZilla' program which can be downloaded from http://filezilla-project.org
Before using WS_FTP LE you will need to find out from your ISP the following details:
1. The Host Name/Address of your webspace.
2. Host Type - typically 'Automatic Detect' or 'UNIX (Standard)
3. Your User ID
4. Your webspace password.
For FREESERVE users:
1. Host Name/Address = "uploads.webspace.freeserve.net"
2. Host Type = "Automatic Detect"
3. User ID = the part of your email address which comes after "@"
4. Password = your normal logon password.
Your website's address will be 'www.User ID' (this site's address is an example).
For BTINTERNET users:
1. Host Name/Address = "ftp.btinternet.com"
2. Host Type = "UNIX"
3. User ID = the part of your email address which comes before "@"
4. Password = your normal logon password.
Main/Home page must be saved as 'index.html'.
Your website's address will be 'www.btinternet.com/~yourusername' or you can use the address
'www.yourusername.btinternet.co.uk' (note it is '.co.uk' not '.com').
If you use a different ISP have a look at their web site to see what guidance they offer on using your web space and the settings required.
Make sure your Home or main web page file is named "index.htm" or "index.html" or "default.htm" or "default.html", as required by your ISP's server.
When you run the FTP program you will be presented with a 'Session Properties' box. Click on 'New' and then the 'Start Up' tab. In the 'Initial Local Folder' box enter the path of the folder where the web pages files are stored on your own PC (e.g. c:\webpages). Leave the other boxes blank and click on the 'General' tab. In the 'Profile Name' box enter a nickname (e.g. upload to my webspace) to identify the set of settings you are about to enter. In the next box enter the 'Host Name/Address', and in the 'Host Type' box use the "Automatic Detect" option unless your ISP advises otherwise. In the 'User ID' and 'Password' boxes enter - yes, you've guessed! Check the 'Save Password' box if you want to save yourself the trouble of entering it each time you do an upload. Finally click on 'Apply' and then 'OK'. Your settings are now saved for all future upload sessions.
If the 'Dial Up Connection' box doesn't come up, click on the 'Connect' button and it will appear for you to dial up in the normal way. On your screen you will have two windows, very much like Windows Explorer. In the left hand window you can display the contents of the directory where you keep web pages files on your own computer. In the right hand window is the directory on the remote server to which you upload (copy) the files. Check the 'Auto' button for file type. Then just highlight in the left window the file(s) you want to transfer, click on the right facing arrow between the two windows, and it/they will appear in the remote server directory. When you have finished Disconnect and then Exit. It really is as easy at that. It is also simple to delete individual files from the remote server, which is apparently not the case with some FTP utilities provided with web page editors.
index
This section assumes you have already learned some of the basics of HTML and created a few simple web pages. You would now like to develop your HTML skills further and add a couple of enhancements to your website.
Don't be put off by this rather technical sounding name. It is probably fair to say that learning how to create and use style sheets does require more effort than understanding the basics of HTML. However, if you plan to do more than create a very small and simple website then getting to grips with CSS will pay real dividends. Virtually every web page author, amateur as well as professional, now uses cascading style sheets because of the substantial advantages they offer over simple HTML.
What is a stylesheet? Like an HTML file, it is a simple text file which is created and edited using a text editor, ideally one like NoteTab described above. It has a file extension of *.css rather than *.htm or *.txt. In the CSS file you create the information which will determine the style or appearance (i.e. presentation) of the various elements on your web pages. This is done by assigning specific properties or styles to the tags used in your pages. You can, for example, assign to the paragraph tag <P> properties which will determine the colour, font face and type size of the text displayed in each paragraph. In any web page linked to the style sheet you then only need to open each paragraph with a simple <P> tag to produce the desired effect. To achieve the same result without a style sheet you would have to start each paragraph with at least two tags, such as <P><FONT COLOR="red" FACE="Times New Roman" SIZE="4">. (Note: when using CSS all tags should be closed, which in any case is now good practice.)
From the above you will note that using CSS substantially reduces the amount of code you need to write for each web page. Not only does this require less work on your part; your HTML files will be smaller and download more quickly when people visit your site. CSS also gives you much greater control and flexibility over the layout and presentation of your pages. A further important advantage is that you can subsequently change, say, the font face and type size or background colour/image on all your pages without making amendments to the individual pages themselves. All that is required is a few changes to the stylesheet used by your pages. The 3rd Edition of Jennifer Niederst Robbins's Web Design in a Nutshell (see above) has a much expanded section on CSS and an excellent reference on the various CSS properties which can be assigned to tags. A host of books on CSS is now available but not all live up to the publisher's blurb on the jacket. By far the best I have come across, and one I can unreservedly recommend, is CSS The Missing Manual by David Sawyer McFarland, published by Pogue Press/O'Reilly, ISBN-10: 0-596-52687-3. UK cover price is £24-99 but buy on-line at, say, www.bookdepository.co.uk (£14-58).
index
Once you have set up a website you will probably want to know how many visitors it is attracting.You can acquire information about visitor traffic by installing a hit counter or web tracker on your site. This is relatively quick and straightforward to do. Several free counters or trackers are available on the internet. Do a Google search on, say, 'free hit counter'.
The easiest counters or trackers to install are 'hosted'. The software used to count or track your visitors is hosted on a server operated by whoever provides the counter. When registering for a counter you will be asked for some contact details and the URL of your website, and supplied with a small piece of code. Depending on the type of counter or tracker, you will be advised to place the code on just one page or on all pages of your site. You do this by opening the HTML file(s) of the relevant page(s), copying and pasting the supplied code in at a suitable point, saving the amended document and uploading it onto your usual webspace. That is basically all there is to it.
How do counters work? When someone visits your site the piece of code you inserted sends information to the provider's server which then updates the statistics for your site.
It is worth taking time to choose carefully a counter or tracker which offers the features which are important to you. The most basic types display on a page of your website a counter which shows either the number of page hits (page loads) you are receiving or the number of visitors. The amount of information you are given may be very limited, there may be few options for configuring the appearance of the counter, the counting may be quite inaccurate, and you will probably be required to accept a sponsored advertisement on your website. At the other end of the scale are a small number of free web trackers which provide highly detailed information about your visitors and do not require you to display any third party sponsored advertising. 
One of the best is Statcounter from www.statcounter.com. In addition to page load and unique visitor counts, it provides information on where visitors have come from, how long they stay on your site, what browser and operating system they use, and various other details. Statcounter does not require you to place any advertising on your site, you don't have to show a counter if you would prefer not to, and the system is highly configurable. Another well-known tracker is eXTReMe Tracking, from http://www.extreme-dm.com/tracking/ although some reviews are mixed. For both of the above you go to the provider's website to view detailed analyses of your visitors.
Among the many other free hit counters on offer are Sitemeter at www.sitemeter.com, Freestats at www.freestats.com, and Free Logs at http://freelogs.com.
index
Over time you may develop a website which has a lot of information spread over many pages. You can help visitors find the information they are looking for by adding a search facility to your website. Visitors type into a search box the word or phrase to be matched and click on a 'search' button. They are then presented with a list of those pages on your site which contain matches with the search term, and links to each of those pages.
A number of providers offer free site search facilities. Try a Google search on "site search" or "free site search". Go to the websites of a few of the better-known providers and decide which offers the best range of features for your needs. Then, on the website of your chosen provider, register yourself and the address of your website. You will be supplied with a few lines of code for insertion into one of your web pages. Choose which page you want the search box to appear on and then open the HTML file of that page with a text editor (not a word processor or web page editor). Copy and paste the provided piece of code into your page, save the amended file, and upload it onto the server. Your site search function should now be up and running. If it does not work check that the search code in your web page document has been copied with absolute accuracy.
The search engine provider keeps an index (regularly updated) of your web pages on its server. When a visitor does a search on your site, their query is routed to the provider's server which searches their index for matches and creates and returns the list of page hits. This usually happens quickly, without your visitor being conscious of what is going on behind the scenes. You may wonder how providers can offer such a service free of charge. Generally they fund it by displaying a certain amount of advertising on the hit pages created for your site. This seems a small price to pay for an otherwise free service which enhances the usefulness of your website to visitors.
Among the better known providers of a free site search function are Picosearch at www.picosearch.com, Atomz (free version: Atomz Express) at www.atomz.com, Freefind at www.freefind.com, and FusionBot at www.fusionbot.com.
index
Page updated: 15 JUN 2008