Text and photographs copyright of Jim Shead.

Site Building Introduction This section of the site was produced to accompany an article called Your Waterway Website that appeared in May 2004 issue of Waterways World. The other pages of this section are as follows:- Your Waterway Website Home Page A sample page to illustrate the use of HTML. More About HTML This is a listing of the HTML code for Your Waterway Website Home Page together with an explanation of each line of code. The code list can be copied and amended to make your own website. Top Canals This is an example of HTML tables, again with an explanation of the various tags used in the table. Useful links Containing links to websites that have information and software downloads that may be of use. On this page In the paragraphs below we cover:- The Survey of websites The research for the Waterways World article. Creating Web pages HTML and web site design software. Website Design Considerations Some points to bear in mind when designing your site. ISPs and Web Hosting Getting connected to the web and getting webspace for your pages. Loading Your Pages on the Server FTP and other software. Promoting Your Site How to get visitors to your site and to keep them coming back. Site Running and Maintenance . Glossary of Terms To help you cut through the jargon. The Survey of websites Before writing the article for Waterways World I sent out a questionnaire by email to a number of sites for which I had current email contact details. The questions I asked were:- Would you describe your type of site as; business, not for profit organisation, personal or other category? Is your site maintained by a professional webmaster (at full rate, at reduced charge or for free) or is maintain by you or a member of your organisation? How do you produce your web pages, e.g. HTML, FrontPage, Word or some other software? What software do you use to transfer pages to your ISP's server? How did you decide which ISP to choose and how much do they charge? Please note individual details will not be published or revealed to anyone else. How satisfied are you with the service your ISP provides? What do you consider the best ways of promoting the visibility of your site? What web software/services do you use, e.g. web counters, site searches, email lists, etc? What are the best pieces of advice you would give to someone setting up a new waterways site? For details of the response to this survey see the Survey Results page. top of page Creating Web pages If you want build websites using HTML then have a look at the example pages at the top of this page. There are also plenty of magazines and books available to help the beginner and those wanting to improve their skills. You can probably find suitable books in your local library or you can buy a copy. Some books that I know of are:- Using HTML 4.0 by Lee Ann Phillips and Rick Darnell, ISBN 0789715627 : 704 pages, Published by Published by Que April 1998 Covering all of the tasks associated with creating a Web page with HTML, Using HTML 4 provides a reference for readers who need quick answers to their HTML questions. Order this book from HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide by Elizabeth Castro, Fifth Edition ISBN 0321130073 :480 pages, Published by Published by Peachpit Press 2002 The book covers the latest specifications of HTML 4 set by the World Wide Web Consortium, from the most basic tags that place text, images and links on the page to more complex ones that set up tables, frames or forms. Order this book from There is also a lot of information about writing HTML available on the web. For links to this and various software dowloads see the Useful links page. Various training courses are also available. If you decide to go for web design software the mostly widely used packages are Microsoft FrontPage which has been very widely used in the past and Macromedia Dreamweaver which is a much more extensive and expensive piece of software at around £360 compared with £150 for FrontPage. A much cheaper option at around £30 is Web Easy Pro another package that claims to do everything you need. As I have never used any of this software I can not give you any advice on what to choose. Web Easy Pro from VCom for Windows 95, Windows 98, Windows 2000, Windows Me, Windows XP. It is the complete Web Design studio that gives you the power to create a dynamic, attention-grabbing site. Order this software from FrontPage 2002 from Microsoft for Windows 98, Windows NT, Windows 2000, Windows Me, Windows XP. Professional design, authoring, data, and publishing tools to create sophisticated Web sites. Order this software from FrontPage 2003 from Microsoft for Windows XP. Professional design, authoring, data, and publishing tools to create sophisticated Web sites. Order this software from Dreamweaver MX 2004 from Macromedia for Macintosh or Windows. It provides a powerful combination of visual layout tools, application development features, and code editing support, enabling developers and designers at every skill level to create visually appealing, standards-based sites and applications quickly. Order this software from It is also possible to produce web pages directly from Microsoft Word but it often produces pages that are far bigger than is needed. Normally automatically produced pages have more unnecessary code in them than hand crafted HTML but if you find a normal looking page takes a long time to download have a look at the source code and if it is massive check the <META> tag to see what software package created it. top of page Website Design Considerations Page layout. Pages are best kept simple, clear, concise and uncluttered with an easily readable typeface and avoiding dark or confusing backgrounds. Also avoid flashing text, pointless animations, spontaneous sound and other gimmicks which may annoy more visitors than they please. Use a consistent style throughout your pages so that it feels like one site rather than a collection of unrelated pages. Good photography or other digital images can add impact to your site so consider placing images into the text rather than putting them into a separate gallery. Don't put too much on each page and remember that some people need to access the site using text only or may be using text-to-speech software. Before you publish your pages it is a good idea to get them spell checked and perhaps reviewed by someone else. You may also want to look at your site in different browsers and with different screen or window sizes. What looked good on your machine might be a mess on some others. If you have used frames for all or part of your site please make sure a <noframe> section is provided in the code. Navigation. Think about how visitors to your site are going to move from page to page, and plan a navigation structure that will seem logical to them. Most sites use a navigation bar situated consistently at the side or top of each page. This not only makes navigation easier but also promotes the image of the site. On many sites the navigation bar will only give access to a page giving a menu for that section of the site. Make sure that your links lead to real pages rather than under construction signs that are of no use to anyone. When linking to external sites display the link in a new window so that the user can easily get back to your site, which will remain open in its original window. Site Content. However good your page layout and site navigation may be it is content that really interests visitors. Make sure you know what type of visitor your site is trying to reach and make the content useful and relevant to them. Think very carefully about publishing email addresses on your site as they get picked up by spammers. If you have a domain name you will probably find that you can set up email addresses fairly easily and redirect the mail to your normal email account. In that case you can set up a special email address for use on your web site and change it from time to time as the spam becomes a problem. Performance. This is an important factor, especially for waterway sites where many users are on boats and may be accessing your site through a mobile phone link. We are aiming for pages that load quickly so very long pages should be avoided but it is graphic file sizes that cause most of the problems. The best solution to the problem is not to use the HTML attributes that define the image size (see Top Canals for an example) but to create the graphic file of the correct dimensions and to use a JPG or GIF file which compresses the data. If you do have large pages or files to download then warn users before they start downloading, giving the size of the files. top of page ISPs and Web Hosting To get connected with the Internet you need an ISP or Internet Service Provider who will link you to the net through a dial-up telephone or a broadband link. Pay as you go dialup In this type of service all you pay for is the cost of a local call and you get access to the internet, email addresses and in most cases some web space for your own web pages. Freeserve was one of the first companies to offer this type of service and still does, although it now offers a full range of ISP services as well. Monthly fee dialup In this type of service you pay a fixed monthly rate rather than for calls, which are included in the package deal. Charges are around £15 - £16 per month. Broadband As an alternative to a dialup connection you can have a broadband connection that will give you much faster download times and means that you are on-line all the time. Most ISPs can provide this service either over BT telephone lines or through cable. In either case there is a monthly charge of around £30 a month and there may be installation charges. The above information is just a rough guide to the alternatives there are hundreds of ISPs offering all sorts of deals so surfing the web could find you what you want at a cheaper rate that the big names can supply. Web hosting If you already have an ISP but need some extra web space you may like to consider a web hosting company offering space on a web server without the other ISP services, like dial-up and email servers. Again there are a lot of providers offering competitive rates. top of page Loading Your Pages on the Server If you use a web design software package such as Microsoft FrontPage or Macromedia Dreamweaver you will find facilities are included for loading pages on to the web server, although some people find that separate FTP software gives more flexibility and control. There are various options available some of them free - see the Useful Links page. If you want to buy from Amazon they stock the popular Ace FTP:- Ace FTP 2 from WSKA for Windows 95, Windows 98, Windows NT, Windows 2000 and Windows Me. Integrated viewer that allows users to preview files and thumbnail image on the server side. Order this software from top of page Promoting Your Site Search engines. Having got our website on an Internet sever the next thing to do is to let people know that it is there. The search engines will not find your site unless either you tell them where it is located or they find it through links from other sites. To let search engines know about your site register with dozens of search engines for free. Just enter "submit it" into Google and you will find a selection of sites offering these services as well as chargeable submissions to hundreds more sites. Unless you are in a hurry to get on to as many search engines as possible it is not necessary to pay. You can register directly with Google, by far the most important search engine, and with almost any other for free. Besides Google there is one other place that it is worth registering with that is the Open Directory Project http://dmoz.org which is the largest, most comprehensive human-edited directory of the Web. It is constructed and maintained by a vast, global community of volunteer editors. The Open Directory is used by most search engines. Many waterways sites are listed in the category - Recreation: Boating: Canals. Getting a good ranking in the search engines (i.e. getting your site near the top of the list of results for the appropriate keywords) is black art that is made darker because of the secrecy and constant changes that the search engine companies maintain to stop the system being manipulated. One thing you can do is to put keywords in the <META> element of the <HEAD> section of the HTML page. For example:- <META NAME="description" CONTENT=Information on the navigable waterways of the UK.> <META NAME=keywords CONTENT=canal, river, waterway, navigation, waterways, canals, rivers, navigable, boat, boating, photographs> Links with other sites. Another way of promoting your site is to set up reciprocal links with other sites with a common interest, not only waterways sites but other areas your site covers. For example if you make models of narrowboats you many want to link to model making sites. Please also let me know about any new UK waterways sites as I will enter you on my list of links (and link from any of my waterways pages that are appropriate) whether or not you provide a reciprocal link, although one is always appreciated. Please let me know via my Contact page. Web rings. Web rings are another way to help visitors find your site. As the name implies all sites in a ring are linked together in a circle. There are two major waterways web rings, which you can see on the bottom of my home page. Domain name. Another way of publicising your site is through a domain name. Make sure you pick a name that is relevant, short and easily remembered. Newsgroups and email. Put your URL on the bottom of your emails and on your contributions to newsgroups. Newsgroups can also be used to let people know about new sites and any major updates. Promotion in the real world. So far we have only considered site promotion on the Internet but you can do just as much in the real world. Put your URL on everything - letterheads, business cards, advertising, newsletters and trade or association directories. leaflets, posters, on the side of boats and vehicles. In fact anywhere where you would put your name and address. Don't forget that word of mouth is another important factor. You may also be able to get your site mentioned in the local or national press or in a specialist magazine. For UK waterways sites this is particularly easy as Waterways World has a monthly page called Clicking on Canals and all new sites notified to me (see my Contact page) will be mentioned. If your site is good it could become Waterways World Site of the Month. top of page Site Running and Maintenance Planning for changes. A lot of what happens in the maintenance of a web site goes back to how well it was planned in the initial stages. If a good structure was implemented then it will not require major changes everytime the site is changed. One of the most important things about a website is that it must be up to date. Frequent updating keeps visitors coming back, site advertising long past events look neglected and obviously out of date. For ease of maintenance you can plan your site so that important information that is subject to change is kept in just a few locations. Recently Content Management Systems have been marketed to separate the website content management from the technicalities of the design and maintenance of the site. These are aimed at business and other large users. One such system costs £995 to buy as a software package:- Click and Go, Instant Web Solution from Comrange Ltd for Macintosh and Windows. A complete web site design and build software package that includes content management. Order this software from Link checking. Another part of the site that needs checking are the links, especially the links to external sites that can change without you knowing. Xenu's Link Sleuth is a really good free software package that will automatically check all your internal and external links and issue reports on broken links. See the Useful Links page. Web statistics. Most people like to know how many visitors they get to their site and would like to know which pages they are visiting. If you are lucky your web space provider will be keeping a statistics log and will provide software for you to access the results. Unfortunately many of the larger ISPs, dealing mostly with the home user market, do not provide any such facilities. However, there are a lot of free counter and statistics services available that work by adding a few lines of code to each page. Each time a page is accessed it is logged on the server of the company who provided the counter. The simplest form of this type of service is a counter that appears on your web page usually showing the number of unique visitors to page since the counter was started. Unique visitors are those access the page from different machines, i.e. excluding repeat visits in the same day. Counters are on view to everyone visiting the site and show how many, of few, visitors have come to the site, but is this of any interest to anyone except the site owner? An alternative type of system just keeps the counters on the server and allows the web site owner to assess the statistics. Again details are on the Useful Links page. top of page Glossary of Terms ASDLAsychronous Digital Subscriber Loop - a method of using local telephone lines to deliver broadband services, typically at 512 kilo bits per second. BMPA .bmp file extension is used in Microsoft Windows to denote a bit mapped graphic file. bpsBits per second. browser or Web browser is the program that allows the user to surf to web, finding and displaying web pages. browsing Using the browser software to go from one page to another using the links provided in web pages. This is also called surfing. bulletin board A web page, or pages, on which website visitors can leave messages for other visitors to see. byte 8 bits of data used as a storage unit of many computer and usually equivalent to one character for data storage purposes. client application A program requesting information from another, often remote, application (see also server). comment information included in an HTML page for the convenience of the developer that is not displayed on the web page. Comments start with the characters <:!-- and end with --> for example "<:!-- Start of Navigation Bar -->" complex table A table that contains another table, or tables, within its data cells. Complex tables can contain other complex tables. directory A list or index of the files stored on the disk or part of a disk. Called a folder in MS Windows. Directories may be and/or contain sub directories. DOC Microsoft Word format documents (.doc) files that can be read by other Word programs. For use on the web RTF or PDF files are a better option. domain name A unique name that provides a link to a computer website, eg www.jim-shead.com. The directories of domain names also hold information to locate the actual sever for the site, so that the host sites can be changed without affecting the use of the domain name. download The transfer of a file from another computer to your computer over a line or transmission link. extension The three character suffix to file names separated by a dot (e.g. .bmp, .gif, or .htm) that describes the file contents (for this example bit mapped graphic file, graphics interchange format and an HTML file). FTP An Internet standard for the exchange of files used by FTP utility programs. folder In Microsoft Windows this is a list or index of the files stored on the disk or part of a disk. Called a directory by many other operating systems. Folders may be and/or contain sub folders. font The design of a complete set of charcters (numbers, letters and symbols) for display. Originally a concept from printing now universally used for computing. Examples of fonts are Arial, Times New Roman and Courier. forms A set of HTML tags that provide text areas, drop-down lists, check boxes and buttons for user input of information. forum see newsgroup. frames On the web this is a method of dividing the browser window into separate areas each of which can display a diferent HTML document. Can be used to separate navigation button from the pages to be displayed. freeware copyrighted programs that have been made available for use without charge. GIF Graphics Interchange Format is a graphics file developed by CompuServe and often used for logos and other graphics with a restricted colour range. gigabyte About one billion bytes, actually 1,073,741,824 bytes or 1,000 megabytes. hexadecimal A base 16 number system that represents each digit by the numbers 0 -9 plus the letters A to F, thus F = 15 decimal and 10 hexadecimal = 16 decimal. FF (hexadecimal) = 255 decimal, i.e. 15 multiplied by 16 (240) + 15. This can be used for specifying 16,777,216 different colours in HTML. High resolution graphics the resolution, or amount of detail, that can be displayed on a computer depends on the number of pixels that are contained in the graphics file and the number of pixels that can physically be used on the screen, or the area of the screen in which the image is displayed. If the number of pixels on the image file is less than the screen can display the user may notice some degree of image degradation. On the other hand if the image file definition far exceeds the number of pixels that are displayed on the screen then download times will be unnecessarily increased. home page The page or document intended to be the start point for visitors to a website. Also called a welcome page. host The computer providing internet services and storage for web pages. Not necessarily the same as an ISP. HTML HyperText Markup Language is the standard for formatting pages on the World Wide Web. hyperlinks or links are parts of the text, or images, on web pages and other documents that when clicked activate a link to another page, or part of the page. Links are usually identified by underlining, font colour and by the pointer changing on encountering the link. Internet A world-wide system of linked computers that are used for file transfer, electronic mail, newsgroups and which provides the platform for the World Wide Web. ISP The Internet Service Provider is the company, or organisation, that provides the connection to the Internet for users. ISPs provide dialup or broadband connections and other services such as email boxes. Most will also provide Web Page Hosting but this can also be provided separately from the ISP functions. JPG The Joint Photographic Experts Group (JPEG) graphic has been designed for compressing photographs and art work. Files have a .jpg extension. kilobyte Abbreviated to K or KB. This is not 1,000 bytes as the name implies but 1,024 bytes. links or hyperlinks are parts of the text, or images, on web pages and other documents that when clicked activate a link to another page, or part of the page. Links are usually identified by underlining, font colour and by the pointer changing on encountering the link. megabyte 1,048,576 bytes. see also byte. modem A device for converting the analogue signals used for data transmission on telephone lines to the digital signal required by computers. The name derives from modulator/demodulator. newsgroup A discussion forum conducted by means of a bulletin board or by email. operating system The software that controls the hardware and the programs that are run on a computer, e.g. Microsoft Windows, UNIX and Linux. ordered list A method of creating a numbered list of items in HTML using the <OL> and </OL> tags with <LI> list item tags in between defining each item in the list. See also unordered list. PDF Portable Document Format (PDF) files which are used with Adobe Acrobat software. pixel The smallest element of a graphic image. The dots of colour that form an image. pointer An on screen symbol that indicates the current position on the screen being indicated by the mouse, or other pointing device. refresh button On a web browser this downloads the page that is currently displayed from the source rather than from pages previously stored by the browser. Very useful for checking pages that have just been updated. robot Software programs used mainly by search engines to automatically search websites to obtain information for indexing. Also called spiders. RTF Rich Text Format files (.rtf) can be read by various word processing programs and allow the interchange of both data and formatting information. scripting language These are extensions to HTML to make web pages more interactive and to offer facilities that cannot be provided in normal HTML. Examples of these are JavaScript, JScript and VBScript. script element The <SCRIPT> and </SCRIPT> HTML tags enclosing the scripting code. search engine A program used to search for information on the web using key words. For example Google and Ask Jeeves. server The server is the hardware and software that supplies information requested by a client application. (see also client). shareware Copyrighted programs made available free of charge on a trial basis. source code In HTML this means the code as written on the text file rather than the browser's translation of the code into formatted text and images. In Internet Explorer there is a view - source option which displays the source text. spider Software programs used mainly by search engines to automatically search websites to obtain information for indexing. Also called robots. style sheets A method of defining rules for displaying HTML elements. For example the size font and colour of all headings can be specified once rather than each time they occur in a document. subscribe To add your name, or email address, to the list of people in a newsgroup. In this case subscribe does not normally imply giving money. table In HTML tables can be used to present images as well as data and are enclosed between <TABLE> and </TABLE> tags for more about tables see Top Canals which gives an example. table column The vertical dimension of a table. In HTML there are no separate elements for columns as a column consists of the table data (TD) cells that are contained in rows. table data Within an HTML table row each data cell is contained within <TD> and </TD> tags. Each table data cell can contain text, images or a table. see complex table. table row the horizontal dimension of a table. In HTML a row is contained within <TR> and </TR> tags within a table. tag In HTML tags are the codes that tell the browser how the page is to be formatted. Each tag starts with a less than < character and ends with greater than >. URL A Uniform Resource Locator (URL) is a unique name that identifies an Internet resource, e.g. http://www.jim-shead.org.uk. unordered list In HTML an unnumbered list of items created with the <UL> and </UL> tags. See also ordered list. top of page

Text and photographs copyright of Jim Shead.