How to design and write World Wide Web pages

What is the World Wide Web (WWW, the Web or W3)?

When people talk about 'surfing the net', or 'finding it on the web' they are generally referring to using the World Wide Web, or WWW. It has been regarded by some as the 'killer application' for the Internet, and is the source of most of the hype and excitement associated with the Internet.

It was originally designed for use by the high energy physics community and is based on hypertext; that is to say that WWW pages are linked to one another by a series of links which may be graphical or written. To move from one page to another the user simply clicks at the appropriate point with their mouse and 'jumps' to the site indicated. There are literally millions of Web pages which information on them crossing the spectrum from the banal to the valuable.

If you have gained the impression that the Web is only accessible through a graphical interface such as Windows you are almost right. It is possible to read Web pages using text only interfaces, but you lose all the graphics and much of the power of the system; its like watching a video on a television that only has sound and no pictures. You should also note that while the Web is very powerful, it is not the Internet in its entirety, and there are other resources which are not in Web page format, and you may have to use other tools such as ARCHIE or Veronica to find such resources.

Each Web page is constructed with its own unique address, or URL. An example of a URL is:

http://www.my_organisation.co.uk/mypage.html

All Web pages will start with http:// and will normally end with .html or .htm but that is about the limit of the standardisation; some URL's will be very short, others long, some will include the name of the organisation hosting the home page, and others will not. However, just to confuse matters a little further, a Web browser will also be able to access pages of information which begin gopher:// or ftp:// for example, but these are not strictly speaking Web pages, since they have not been created using the hypertext markup language.

There are many utilities available to allow you to search and to use the Web; they are commonly called Web Browsers, or just browsers for short. Most of these are free, and can be obtained by running an FTP session to obtain the software, which can then be installed in short order.
You need to be aware that different browsers will produce different screens, since they see HTML tags in different ways, and may interpret the instructions differently. You therefore need to decide if you want to write for Netscape browsers or Microsoft, or indeed if you want to make sure that your page can be read by any browser.

Things to remember when searching the Web

The Web is not the Internet - the Internet is not the Web

While a considerable amount of material is now being produced in a Web format, there are still large amounts of material which cannot be accessed using a browser. You may well still have to resort to using ARCHIE or Veronica or Gopher to locate the material that you want.

There is more than one way of browsing the Web

If you do not find the information you want using one search tool, try another. If Lycos does not provide you with the references you require, try AliWeb, for example. They can be treated just like reference tools - if you do not find the data you want in a directory, you might try an encyclopaedia for example. Experiment with different retrieval tools, and after some practice, you will find the one(s) that suit your needs best. The actual use of these tools is discussed in section 10 of this chapter.

Authority

Unless you are certain that a Web page has been produced by a particular company or organisation, do not treat everything that it says as total gospel. Simply because a page of data that you find professes to come from 'xyz' organisation, it does not necessarily mean that it does. Retain your scepticism!

Relevance ranking rather than Boolean search operators

Many web browsers have very limited functionality when it comes to searching for terms. Until the browsers have caught up with the rest of the industry, do not automatically expect Boolean operators to work. Do not expect truncation or wildcard to work either. Generally, you are better off putting in a reasonably large number of terms; the browser will often also do a fuzzy logic search for you as well, and will return records at the top of the list with the highest relevance ranking. Explore how this ranking is achieved, since it may not be the same for every browser.

Graphics

Web Pages come with an abundance of graphical images. Unless your query requires you to see the actual image (such as a weather map, for example) you will get a faster response time if you turn inline graphics off. (There will be a pull down menu called View, or Options or Preferences that will allow you to turn this off). If you discover later that there is a graphic you need to view, simply turn the option back on and reload the page.

Web browsers

Web browsers will render pages differently, depending on the browser being used. View your pages using a variety of different browsers, and different versions of them as well!

Expect false hits

Expect to get a lot of them. When searching Web pages it is difficult to limit the search you want to one concept without using synonyms. Because very little data has been arranged, classified or ordered, a search for 'John Major' would pick up pages that mentioned the Prime Minister, any web page that had been produced by someone of the same name, any pages that referred to both John and Major.. etc.

Use your bookmark facility

This utility cannot be over emphasised, and you should take advantage of it when writing web pages. Make sure that the title element clearly describes the contents of the page you are writing. This will be used when people are bookmarking your page to come back in the future.

Capitals and punctuation

When typing in the name of a particular site to go to, copy it exactly as given, with the same punctuation, capitalisation, forward slashes and so on. Any error at this point will mean that you may not connect to the right place at that site, or indeed, you might actually not be able to connect to it at all.

Remember that the slashes go forward '/' and not backwards '\'.

If there is a trailing slash at the end of a URL, you should include it:

http://my.com/ and not http://my.com for example. In some instances it may not matter - in others it will mean that you will not get to the page that you want.

Remember geography!

It does not matter where the web page is in the world; it costs no more to look at a page on a server in Australia than it does one in Acton. However, bear in mind that the physical location and the time of day may play an important part in the speed of getting the data. Search for American web pages in the morning while the Americans are all still asleep, for example.
Also remember that you are going to be writing for a global audiance - are they going to understand any slang terms or abbreviations?

What should you put on your Web Page?

• Initial design.
  • Purpose of the page
    • What do you want the page for? Promotion? Marketing? Information?
  • Audience
    • The desired audience will have a great impact on how the page is created and what you place on it.
    • What machines will they be using?
    • What will appeal to them?
    • What wont appeal to them?
  • Authority of your page
    • How will you make it clear that your page is authoritative?
    • How often will you update it?
    • Will you take a particular bias?
    • Will you put links into other (possibly competing) organisations?
  • Graphical information
    • Logo?
    • Graphical representations of particular products?
    • Particular type faces?
    • Particular images?
  • Products
    • Which one(s)?
    • How many?
    • How to arrange them on the page?
    • Index to them?
  • Factual information
    • Who you are
    • Where you are located
    • Particular achievements
  • Relationship with customers
    • Feedback
    • Details of conferences you'll be attending
    • When customers can visit you (opening hours etc)
  • What are you going to give back?
    • What will you be doing to attract people back to your home page?
    • Provide some services free?
    • Act as a 'launchpad' site?

Elements of page design: things to remember.

Structure of your page.

• How big should your pages be?
  • No more than 5 A4 pages of text
  • No less than ½ A4 page.

• How many pages of information do you want?
  • Do you want to have a broad and shallow approach, or narrow and deep?
    • Broad and shallow:
      Easier to set out pages.
      Quicker to see exactly what you want, where.
      Easier to control and update.
      Good approach for a number of links to other pages.
    • Narrow and deep
      Quick to download a page of data.
      Looks more friendly.
      May take a long time to find the information they require, increasing irritation.
  • Text
    • You have little control over the fonts and the font sizes used, but even so, use them sparingly.
    • Dont mix and match.
    • Limit tabular information; it can be difficult for some browsers to read it.
  • Backgrounds
    • Keep any backgrounds simple.
    • Pastel shades are easier on the eye.
    • Keep the colours light, rather than dark.
    • Beware the 'checkerboard' effect!
    • Don't make the background .gif too large.

Graphics.

• Always ask yourself what the graphic is for.
  • Does it provide information that cannot easily be provided in another form?
  • Is it to brighten up a page?
  • Is it to catch the readers attention?
  • If it doesn't do any of these things critically assess its value to the page.

• Interlaced?

• Transparent background? (Especially important with a background colour)

• Keep the graphic to a reasonable size.
  • No more than 40k in size.
  • Small graphics should be no more than 1-5k in size.

• Repeat graphics when possible.

• Remember that people may not be able to see the graphic.
  • Always provide a text version of the graphic, so people know what they're missing.
  • If the graphic is to be used as a link, ensure that a text link is also available.

• Image maps can be very useful additions to a page.
  • However, remember that they can take a long time to load, and you should have a text link as well.

Links.

• You can repeat a link to the same page many times at the site.
  • For example, to back to the opening page.

• Is the link a textual link, or a graphical link?
  • If graphical, make sure there is a text equivalent, if textual, ensure there is some context to the link.

• Arrangement of links.
  • Make sure that the links are easy to follow, clearly laid out and arranged in a sensible order.
  • You can link to any other web page on the WWW, but also directly to some search engines.
  • You can almost create your own search engine by linking your page to a search engine such as Altavista.
  • You can link other graphics directly to your page, without having them on your server.

Forms.

• There are a variety of different forms that you can create.

• Forms are sections of a page that can be filled in by the person browsing; they allow them to request further information, purchase a product, send feedback and so on.

• They are very useful ways to judge the effectiveness of your page

• They provide direct contact with a potential customer

• Not all Web browsers allow forms; though they will exist on your page, the browser will not be able to see/use them.

• Mailto: forms
  • These allow you to create feedback links to members of staff
  • They do require that the browser being used has been configured to send mail.

• Radio buttons
  • Allow the user to choose one of a number of options.

• Pull down menus
  • Useful if there are a lot of options available to the person browsing.

Other points to remember

• Colour
  • Too much colour is distracting
  • A strong/dark background colour makes reading text very difficult
  • Blinking text
    • Just don't do it.... please!

• Counters
  • Counters allow everyone to see how many people have visited a page
  • They are usually regarded as a very 'amateur' element to include.

• Titles of pages
  • Ensure that the page title is informative
  • It will help you keep track of which page does what
  • It will be listed on any bookmark/hotlist, so needs to be clear

What next?

Publishing the page.

• This can be done on one of your own machines.
  • Technically its more complex
  • Its more expensive
  • Its more staff intensive
  • It has security implications
  • Its easy to change pages or add more to them
  • You keep control
  • Really requires a leased line

• Another organisation will publish the page for you.
  • They will rent you space on one of their servers.
  • Its reasonably cheap - circa £5 per megabyte
  • No worries with regards security
  • May need to change your agreement depending on the space you use

Who to go to.

Aladdin 01489 782221

ASLIB 0171 253 4488

BBC 0181 576 7799

Demon 0181 371 1234

Direct Connection 0181 297 2200

Easynet 0171 209 0990

Pavilion 01273 607 072

Uniform Resource Locator (URL)

You have two options here; either get a URL which is specifically named after your organisation, such as: http://my_organisation.co.uk or utilise the URL of another company such as: http://demon.co.uk/my_organisation

• A URL named after your organisation
  • Can be more expensive - several hundred pounds a year
  • More memorable
  • More professional

• Piggybacking from another organisation
  • Cheaper and easier
  • Longer
  • Looks less professional

Publicising the page

• Register it with the different search engines
  • Most of the good ones will find it anyway, but its quicker

• Refer to it on any electronic communications
  • In .sig files at the end of an email
  • In different newsgroups and listservs (but be careful not to 'advertise' it).

• In your written literature
  • On your business cards

• Get other people/organisations to link to your page

Internet resources that can help you.

1. Internet sites

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Best_of_the_Web/

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Beginner_s_Guides/

Both of these sites provide you with a lot of links to other sites that go into more detail either on the Web itself and some of its best sites, or to beginners guides, in some cases entire books.

http://www.netgen.com//tour.html

This site is the beginning of a guided tour around the Internet and takes you to a variety of interesting and useful sites.

http://www.nas.nasa.gov/NAS/WebWeavers/learning.html

This site provides information on beginners guides, running a web service, and a basic html tutorial.

http://www.cs.mu.oz.au/~ritk/htmldocs.html

Covering both beginners and advanced html writing skills.

http://www-chem.ucdavis.edu/html/begin.html

Yet another of the many beginners guides, but this one is a crash course in the subject.

http://lcweb.loc.gov/global/html.html

Library of Congress site offering information on the standards and specifications of html for those who want to get tecchie.

http://www.corpnet.com/~aking/webinfo/html.html

I suppose this is really the ultimate site for people who are going to make home pages, since it is styled as the 'Webmaster reference library' and has more links to more places than just about any other site that I've visited.

If you want a list of good sites to go and visit, rather than just wandering around the web in a somewhat aimless fashion, you could start by going to Lycos, which keeps an up to date list of what it regards as the top 250 Internet sites in the world, arranged in categories for easy reference. Lycos can be found at : http://lycos.cs.cmu.edu/

Alternatively, you could click on the Cool Sites or What's New buttons in Netscape to view some of the latest and most inovative sites on the Internet. Its something of a ragbag collection, but they will all provide you with ideas as to how you can improve your own site. Finally, there are a number of competitions on the Internet in which people vote for their favourite sites. The Best of the Web site, which lists winners in a variety of different categories can be located at

http://wings.buffalo.edu/contest/

2. HTML Authoring tools

As you will have seen from earlier sections in this book it is quite possible to write HTML pages simply using a straightforward word processor or even, should you be so masochistic, the DOS editor edit. However, few people will wish to go to those extremes! There are a large number of authoring tools readily available on the Internet, most of which are free to download and use. The following is a list of some of these:

HTML Assistant.

This is a Microsoft Windows editor. It can be obtained via ftp from:

ftp://ftp.cs.dal.ca/htmlasst

HTML Writer

Another Windows editor, specifically designed for use with Cello or Mosaic browsers.

http://wwf.et.byu.edu/~nosackk/html-writer/index.html

HTMLed

Another Windows based authoring tool, which can be obtained via ftp from:

ftp://pringle.mta.ca/pub/HTMLed

SoftQuad HoTMetaL.

This is a professional editing tool available in both free and commercial versions. It can be obtained via ftp at:

ftp://ftp.ncsa.uiuc.edu/Web/html/hotmetal

3. Graphics

Rather than attempt to create graphics for yourself there are many libraries of images available on the Internet, free for you to download. So rather than attempt to create a little blue ball, or a rather more complex graphical image you will find it worth your while to visit the following pages and download the images that appeal to you:

http://www.cit.gu.edu.au/images/Images.html

http://www.nosc.mil/planet_earth/images.html

http://www.webcom.com/power/icons.html

4. Newsgroups

There are several Usenet Newsgroups that discuss subjects of interest to anyone producing their own home pages, or with the World Wide Web in general.

comp.infosystems.announce

comp.infosystems.www.providers

comp.infosystems.www.users

comp.infosystems.www.misc

Do however be wary when subscribing to any of these newsgroups, since in general they will be very busy; sometimes with more than 200 messages a day!

This page last updated 9th March 1998