Logo HRC

Website and Webmaster

WebmasterMike Everill
1Intro5Our Own Domain
2In the Beginning6Mechanics
3Taking Shape7Cascading Style Sheets
4Site Online8Javascript

1. Intro

As I mentioned to the Committee Members in October and in the recent round robin email it is my intention not to continue as Webmaster beyond October 2022 when the site hosting will need renewing. Decisions can be taken prior to that time on whether to continue with the facility.

In the meantime I will use this page to describe how the site was developed and what the role of Webmaster has become for me.

At the same time I will display the code used, for each section, so anyone wishing to take over can see how a page is created.

Part of the code is common to all pages:

The code for these does not have to be written again; I just opened the History page, in Notepad, Saved As website.html and deleted all the content relevant to the History page. Then I changed the Title in the Head from History to Website. I'll show the code for these later.

I won't be writing a tutorial on html (HyperText Markup Language); there are websites dedicated to that. However I'll give a few hints regarding the code in red bordered boxes.

These are the instructions to the browser. In the case of img I've used two attributes: src which is source (of the image) and width (of the image).

I replaced the Footpaths hyperlink with the Website hyperlink on the Navigation Bar, and added Footpaths to the History page. The changes to the Navigation Bar were made on all the site pages.

As I have already assembled the structure of the site it may be possible for my successor to maintain it by modifying the existing code: deleting, overtyping, copying and pasting. If a new structure is required in one page, something similar can be copied from another page and then altered to satisfy the requirements. To do this you will need to know enough html to recognise where the changes are needed and how to make the change. I hope this page is of some help but you will need to be committed and prepared to spend the time and effort.

As this is to be a story I could write it all in paragraphs, but then I would not be showing many aspects of the language. So I will contrive to introduce other tags, even when not wholly appropriate. It won't always be written linearly, so when the opportunity arises I will alter the code of earlier passages to give further coding examples.

I intend to publish updates periodically (cf Charles Dickens) so any follower won't be overtaxed, and while on the Dickens theme,
this page is like Madame Defarge's knitting - done as a pastime, but if a use is found for it, use it. (Not as sinister as the knitting though.)

Back to Top

2. In The Beginning

Discussions were held at Committee Meetings in 2003 regarding the possibility of the Club having a website. Nobody had any idea how to do it or how to go about it. So a few interested Committee Members including:

Joe MooreBrian JoynsonBill FinneyMike Everill

formed a working party, said they would investigate, pool ideas, discuss and report back to the Committee.

I first had a look at Frontpage 2000, the in-house Microsoft Office WYSIWYG web page builder. This was bundled with Microsoft Office which came with my Windows Millennium Edition operating system. To quote the blurb: Frontpage 2000 is a fully-fledged, widely used, authoring tool, including PhotoDraw graphics editor and Image Composer.

The tool was designed to hide the details of the pages' html code from the user and allow websites to be built by novices. It featured a split view option where you could see the Code View and the Design View at the same time. I learned something of web page design from Frontpage and its page templates gave a good start but it led me down at least one blind alley.

Vince Morley, a club member, had a personal website, so, one day on a walk, I asked him the best way to go forward, expecting him to give me tips on using Frontpage. However, he said he had taught himself html coding from library books and suggested that was the best way, and not too difficult. So I set out on a voyage of discovery.

He sent me this summary of things to consider:

First thing you need to know is how many members have access to the internet as we are talking about a duplication of everything unless everyone has access.

What does the Club want to get out of a website?

  1. Recruit New Members
    • Does the Club require global recruitment.
    • Could use the Sentinel's website Beehive to create a page for the club.
  2. Publish a Database of Walks
    • Publish a datebase of walks and keep it up to date
    • Programme of walks is the most useful but again only to those with access.
  3. Publish the Newsletter
    • Put Newsletter online to be viewed and downloaded.
  4. Publish pictures of walks, events etc.
    • A Photo Gallery would be nice but how many have digital cameras?
    • Good to have a rogues gallery of Officers and Committee Members so that Members can recognise them
  5. Save on Printing and Postage
    • From Reduced circulation of Newsletters and Programmes
    • Not much will be saved unless a large number can access it

Further Points

At the AGM some people expressed their concern about having their details on the web. There are several solutions to this problem. First never put phone numbers, we are not a company that require it. There is no need to put emails on the website as the best way is to put a little program that splits up the email address and there is a link to it on the web page. That way when Spiders scan the web for email addresses they do not find any.

Do we obtain our own web address? I doubt that HRC.co.uk is available but who knows? It is better than an address that nobody can remember. On my home page I have a web address search facility and the cost of a .co.uk is only 10 for the first 2 years. My address is due for renewal soon so I will find out how dear the subsequent years are. Our own web address has the advantatage of giving us an email address like Chairman@HRC.co.uk etc but from experience it is better not to use prefixes like chairman, secretary etc as the people that send junk mail are very fond of putting them in front of email addresses.

I have not mentioned design and the problems of keeping it up to date as there is no point unless the club want to go ahead.

Back to Top

3. Taking Shape

A few weeks later the working party convened a meeting where we pooled any knowledge we had gleaned:
We discussed:
  • what the site should contain
  • drawings of page layout
  • Frontpage
  • Other WYSIWYG
  • HTML Code
  • Web Hosting suggestions
  • some misgivings about putting personal details on the web.
Joe had designed a Home page in Publisher using some pictures, clip art and text boxes but when we converted that to a web page it became a massive file, taking up a lot of memory on the PC hard drive, which was of limited size in those days. The code listing was pages long, containing style definitions of every pixel, recording all the properties each pixel had and all those it did not have, before then using these properties to place each pixel in place. The page took a while to load in the Internet Explorer browser on the PC, and we suspected it would take minutes to display online. We were on dial up then - no fast broadband. One of the approaches I had used, with my newly acquired, but very limited coding knowledge, was to link 4 dummy pages together with hyperlinks, the major concept of the worldiwide-web. Shortly afterwards I was able emulate Joe's design using his pictures and clipart in a code-written page, which consumed a tiny fraction of the HD memory the original took and loaded instantly - this was the way to go.

I read as many library books as I could get hold of on:
  • The World Wide Web
  • Building Websites
  • HTML Coding
  • Frontpage
  • Website Structure and Strategies
The first webpage I worked on was one that showed the information I was learning as I went along, trying out examples of code, modifying and recording the effects. It said things like:
  • this is how you make:
    • a table
    • a list
    • a division
  • this is how you put an anchor on a page
  • this is how you link to the anchor or to a page URL
I then fleshed out the dummy pages into simple Club pages, experimenting with different options: using html code, using Frontpage, and comparing the two approaches. Frontpage and some library books advocated the use of a technique favoured at that time: Frames. So I converted all my pages into frameset versions - my first mistake.

I then fleshed out the dummy pages into 6 Club pages:
  1. Home
  2. Programme
  3. Social
  4. Holidays
  5. Information
  6. History
I found I could recreate anything produced in Frontpage with code and more efficiently, producing smaller files which were also easier to modify. Frontpage also gave problems with some browsers other than the Internet Explorer browser from the same Microsoft stable.

Frames were designed to run more quickly on the internet. The Home page was designated the master page and the other pages were slave pages. The master page was divided into horizontal and vertical frames. I used one horizontal frame at the top of the page containing the banner and navigation bar, and a vertical frame down the left-hand side containing other links. The remaining portion of the page contained the content. These frames remained fixed on the screen as other pages were called in to replace the content.

Advantages of Frames:
  • The frames were only written and saved once
  • The frames remained on the screen so time was saved as there was less to load
  • All the pages looked similar to give a corporate indentity appearance.

Back to Top

4. Site Online

I signed up to the Wanadoo web hosting service which offered limited free space, on their domain, for web sites and pages. I downloaded the free FTP (File Transfer Protocol) programme, FTP Commander, from Internet-Soft.com and used this to transfer our site files to our allocated space on the Wanadoo server.

I reported to the Committee Meeting on 16 March 2004:
The website contains an Index page which is frames-based, so the Banner and the Navigation Bar are loaded once and remain in the top two frames continually. This then sets the site up and provides direct direct access to six sub-pages: Home, Programme, Social, Holidays, Information and History. The Home page accesses a further Map page.

Problems with frames:
  • Some visitors cannot 'see' frames so extra 'no frames' pages have to be made for them.
  • All the same modifications and updates have to be done twice: in the frames version and in the no-frames version.
  • If a search engine sends a visitor to one of the subsidiary pages then the visitor cannot navigate round the site unless I put a navigation bar in every page, which negates the reason for having frames.
My intension is to revamp the whole site so that it does not use frames.
  • This will not take as long as my first attempt because I know a lot more now and most of the content is sorted.
  • It will mean that the navigation bar will have to be included on each page, so will take longer to access.
  • I want to keep the files as small as possible so will keep the number of photographs on normal pages to a minimum but perhaps include a designated photograph page which visitors can decide for themselves to see or not.

At the following Committee Meeting on 4 July 2004 I noted:

  • The website is quick because of the small code files, directly written.
  • Web page generators use shortcuts which, while they are convenient, are no longer recommended. They also apply formatting that works properly only in certain browsers. eg. Frontpage with Internet Explorer.
  • The Wanadoo host server has some idiosyncracies which don't comply with the html language, so I made a simpler version to avoid clashes.
  • I plan to build on the simple version rather than try to sort out the difficulties with the original site.
Two objections to the club having a website were raised:
  • One was withdrawn when, during the discussion, it became obvious that the objector thought we were talking about a poster.
  • The other objector did not want a website at all as it would attract too many enquiries, but later changed his mind and thought it would not attract enough.

Back to Top

5. Our Own Domain

At this meeing or the next we decided to have our own domain and use a specialist web host, rather than continue with the site buried deeply inside the Wanadoo domain.

Possible web URLs were proposed - the obvious one being http://www.hrc.org.uk, (including hanliensian in the name was discounted because of the likelyhood of mis-spelling.) Our first choice was unavailable but I was able to register the second choice, http://hrcwalks.org.uk and the site was uploaded under this name, onto the Supernames web hosting server in September 2004. I also opened hanliensian@hotmail.com so that we had an email address to display on the site.

The HRC website has remained with this hosting service to the present day, but it has changed its name to 123-reg.com and we have had to move to new, upgraded servers a couple of times over the years with some attendant problems and increase in costs.

Existing pages have been maintained, modified, updated, deleted and new pages added over the years. Quite early on I structured most pages using Tables and this has made the coding much simpler. Everything can be located on each page in the cells positioned in the rows and columns; the cells can hold text, lists, other tables, images, links, anchors, menus etc. This means that there is no need for some of the tags and attributes I was using: Frames, Divisions, Absolute and Relative Positioning, ImageMaps etc. I have naturally gravitated to Tables in this page and I am surprised at how few coding elements I am using in writing it but will soon have to introduce a more difficult aspect.

Most pages have been through a few reincarnations in the last 17 years. For example the Programme page:

Back to Top

6. Mechanics

I'll spend a bit of time here on how I go about writing a webpage. I'll base this section on the same design as the Links page, which will allow me to copy some code from that page and modify it for my purposes here.

I type the code into the simplest of text editors, NotePad and Save as html files eg index.html. When you require to open the file for editing you must Open With .. Notepad. Double clicking opens the file as a webpage in your browser so you can see the results of your code.

All the files are held in a directory on my PC called HRC Website which contains many sub-directories.

I transfer copies of the files to the Web Hosting Service with FTPCommander, a free download from www.internet-soft.com

We are signed up to 123-reg Web Hosting Service and the next renewal date is 13 Oct 2022 for the Domain Name and 20 Oct 2022 for the hosting service. Our site files are stored in a directory structure that emulates that on my PC and which FTPCommander gives me control of.

I take snips of screen content with the old Snipping Tool that comes with Operating Systems. A newer version is being pushed now. Some of the small images shown here are collected in this way.

I use the Chrome browser and the site is designed for that. However I do check periodically that it appears satisfactory in other browsers. Initially we used low resolution screens but over the years higher resolution has become the norm. Now mobile phones are used increasingly.

The previous section, where the same styles of table cells were repeatedly defined with inline attributes, is an example of very poor programming and this leads me into another area of html coding we will now have to come to grips with - next time.

Back to Top

7. Cascading Style Sheets

So far I have shown the tags, which govern the structure of the page (tables, paragraphs, divisions, lists, headings etc.) along with the attributes, which give style to the structure, (colour, width, alignment, border style, spacing etc.). I have done this so you can see how the page is structured and at the same time you can see the effect the attributes have. They are available together in the boxes showing the html code. However this is not seen as good practice: all the style attributes are said to clutter the structure of the page; it is thought better to keep the structure and the style separate.
This aim is realised with the use of cascading style sheets. Cascading because there are three methods of applying them, inline, internal and external, with a definite hierarchy of application - so you can cascade through them. I use only the external file method, so will confine my comments to that. The structure of a page is created with tags, each using just the 'class' attribute, and a separate, undisplayed style sheet is created to contain all the user defined properties for the tags. These properties are called into use using the class attribute.

As well as keeping the code 'cleaner' this method allows a single change to an attribute in the style sheet to affect the appearance all the relevant tags thoughout the website - instead of having to manual change the inline attribute wherever it appeared.

But this does make it more difficult to understand what is going on when looking at the code - the style properties are hidden away in an unseen document.

I'll now redisplay the navigation bar, that is common to almost all pages on the HRC website, and show the code for it. This is set up to use the hrc.css style sheet, so that a change in appearance of the navigation bar throughout the site can be made by altering a single definition in the style sheet.

I'll also display the code for the link which points to the styleshheet and the css definitions referred to.

And finally in this section I will make one change on the css which changes the colour of the navigation bar throughout the site


8. JavaScript

I have not learned the text-based language; just picked up enough to allow me to use features which seem easier to do with JavaScript that with html.

  1. Display notes in the form of a Stop Press item.
  2. Display Contact Details for potential new members
  3. Swap photographs on the Home page, but this feature seems to have stopped in some browsers
  4. Display an album of photographs - Recent Photos - Lockdown Photos
  5. Display photographs - Kiddies Walks
  6. Display photographs - Some holiday photographs

All these except the swap feature are accessed by clicking a button

The Javascript code can be held in the html code inside script tags but I have kept the two separate. I write the Javascript, as functions, inside script tags, inside the head section of the page. The functions are called by clicking the designated button which is created in a form tag in html.

I'll now show the code for JavaScript that resides in the Script tags in the Head section:

The functions are placed in the gap in the above code between the 'hide' and 'stop hiding' lines; for example the Stop Press function is written:

Where \n means new line.

Only one JavaScript keyword is used - 'Alert'. To update the Stop Press all that is needed is to delete a complete instruction, or overtype the text between the brackets and quotes (to replace an item) or copy and paste a line and overtype with new text (to add an item).

The button to call the Stop Press function is generated with a html form tag where it is required on the page - in this case it is held in a table along with buttons for the 112 video and the Contact Details near the top of the Home page.

Similarly photographs are displayed simply with just one JavaScript keyword - 'document.write' as in this extract from the Lockdown Album;