COIN's guide to writing web pages

In exploring the web, you will have seen a huge variety of webpages, varying between the informative and the frivolous, and between the ornate and the plain. The common factor underlying all of them is a language called HyperText Markup Language (HTML). This is text (as you see in an ASCII file on a word processing system) with "markup" commands in it. You can either learn HTML and write it directly yourself, or you can use either an extension to a word processor that lets you save documents as HTML or a special HTML authoring package (a number of these are listed by the VL-WWW and CNET).  HTML isn't hard to learn, and there are good reasons for writing your web pages directly in HTML, as will be explained below.

More important than your technical ability in producing an eye-catching page is the ability to structure your document in a way that reflects it purpose and contents most naturally. HTML works in terms of page structure, rather than appearance, and so writing in HTML by hand encourages you to structure your pages in terms of their meaning rather than their appearance, which generally helps to make them more readable.

Being in terms of structure rather than presentation, the same HTML page may be interpreted slightly differently by different browser programs - and if you rely on a tool that produces HTML that you never see, and you try it only on one browser, you may find that your pages don't look anywhere near as good on other browsers. However, a basic knowledge of HTML (including some idea of what is "good" HTML) will let you write pages that will look fine on all systems. Common sense and some self-discipline concerning the use of fancy graphics will also make your pages more readable, for example, to the blind, who read them with speaking computers or braille terminals... and also for those who, for speed, switch the graphics off in their browser; people with such a concern for efficient use of the network will generally assume that, if you make unnecessarily heavy use of graphics, you have little to say, and are hiding behind ornate presentation.

A short example of HTML

Here is a fragment of HTML, presented with how it displays on the browser, what the HTML looks like, and a brief explanation of the markup commands in it. All HTML markup commands ("tags") are each in angle brackets: <>, and most of them extend over a span of text up to another tag of the same name but with /prepended to it; for example, a paragraph starts with


and ends with

AppearanceHTMLExplanation

Music for services

<h2>Music for services</h2>

means a second-level heading

We have two groups of musicians:

<p>We have two groups of musicians:</p>

marks a paragraph

  • the main choir which sings for the more traditional services,
  • the music group for the more modern services
<ul>

begins an unnumbered list

<li>the <a href="choir.html">main choir</a> which sings for the more traditional services,</li>

is a list item (<li> ... </li>)
with a link to a new page within it
(<a href="choir.html"> ... </a>)

the music group for the more modern services

and this is an anchor, linking to another page

 

this ends the list

See their own individual pages for details of contacts and practice times.

See their own individual pages for details of contacts and practice times.

and here's the last part of the paragraph.

The web itself contains much useful information for learning to write web pages, including a A Beginner's Guide to HTML.

More advanced pages

Once you've learnt the basics of HTML, you can go on to write more advanced pages, including forms and CGI scripts, and Java applets. There is a collection of useful pointers at The Web Developer's Virtual Library.

If, once you start to write web pages, you spot an interesting effect on another website and find yourself wondering `how did they do that?', you can use the "View Source" option in your browser to display the page as HTML.

Beyond the technicalities

The technology of the web is very tolerant of misuse of HTML, and it's possible to get web pages to display (at least on some browsers) with many mistakes in them. However, well-written HTML will look good on any browser, and so it is worth learning it well. In addition to the Beginner's Guide to HTML and the Web Developer's Virtual Library  mentioned above, the following resources will help you write and develop websites:

Web Developer's Virtual Library: Tutorials
http://WWW.Stars.com/Authoring/Tutorials/

Web Authoring FAQ
http://www.htmlhelp.com/faq/html/

Webmonkey
http://www.hotwired.com/webmonkey

Christian Webmasters Association
http://www.wordnet.co.uk/chtml2.html

See also COIN members' comments on maintaining web pages and sites.

Useful features

Author and date

It is recognised as good practice to include the date on which a webpage (or site) was last updated or checked; some authoring packages include a feature to automatically "timestamp" pages as you write or amend them. In addition, please include details of the "owner" of a website and an email address to contact them - this may be the name of the individual concerned or the Webmaster. The "mailto:" command invokes your email client program and will open a new email message to be sent to the named recipient.

Including images

You may wish to include images on a webpage - perhaps a logo, photographs, or a map. You might copy these from a clipart collection, scan them in, or create them in a paint program. You should not use images created by other people or organisations without seeking their permission otherwise you will infringe copyright. A useful collection of Graphics and Clipart resources is available on the Diocese of Leicester website.

Adding links

You will probably want to add hyperlinks to the websites of organisations or individuals with whom you have contact. However, it is easy to get carried away and duplicate directories already produced by others. You can find links to directories which list the webpages of many Christian organisations on our Internet Search Engines and Retrieval Tools page. The Diocese of Leicester website features a well-produced collections of links to Useful and Interesting Websites.

Checking links

Developing and maintaining a website brings with it the responsibility of keeping the content fresh and accurate. Visitors are unlikely to return to a website with many broken or outdated links! You may wish to check your links on a regular basis with reminders in your diary or personal organiser. The Mind-it facility (see below) can also be used to help you stay informed about changes on sites you link to. In addition you may wish to run your webpages through a facility like Web Site Garage which will automate site maintenance checks, optimize your graphics and analyze your website traffic.

The Mind-it facility

The Mind-it facility is a useful (and free) feature which can be to added to any regularly updated page on your website. Mind-it will automatically send an email whenever you amend the page(s) concerned, encouraging recipients to check the relevant page(s). This is a very useful way to encourage return visits to your site. See the further information on Mind-it for Webmasters.

Submitting your page to search engines

Although search engines and directories may eventually find and index your website, it is advisable to promote your site by submitting details directly. The major search engines tend to include an option to "Add URL" or "Submit Site" on their homepage, which you can make use of. Alternatively there are fee-based services such as Submit It! which will perform this task for you. Yahoo! provides links to a wide range of submission services.

A useful article summarising aspects of website submission is available online:
Danny Sullivan "Avoid the Void: Quick and Easy Site Submission Strategies" ONLINE, May 2000.