the goodman group
university of cambridge

writing www pages

Writing WWW Pages

Help for the Chemical Information Laboratory is provided on-line using a hypertext system based on the World Wide Web. If you click on any highlighted word or phrase, you will be taken to a new page connected to the word you clicked. This is the beginning of the Information Superhighway. The system contains links to other World-Wide-Web sites around the world. The information you see may come from the chemistry department, or from across the world. It can be accessed using lynx, mosaic, netscape, Internet Explorer or other similar programs from workstations, Macintoshes or PCs. These programs are all web browsers. Every page has a Uniform Resource Locator, or URL. The Cambridge chemistry department home page has URL: http://www.ch.cam.ac.uk/

You can create your own World-Wide-Web pages, although you cannot easily export them to the rest of the world. You simply need to write in a format called HTML (Hyper-Text Markup Language). To see how existing pages are written, choose 'View Source...' from a menu of your browser. This should show you what HTML commands were used to create a particular effect. Instructions are written within angle brackets < and > and usually come in pairs. Thus:

<instructionA>
this text is affected by instructionA
</instructionA>
this text is not

For example <H1> means Heading of First Importance. All text following such an instruction will be large. </H1> means that the end of the heading has been reached. Exceptions to this are the <P> and <BR> commands which mean new paragraph and line break, respectively. The instructions are often called tags.

An important part of hypertext are hyperlinks. When you look at a page of hypertext, some words will be highlighted, and clicking on them takes you to another page of related information. This is achieved using instructions in angle brackets. The highlighted text is regarded as an anchor, so the instruction is A. The instruction also needs to tell the computer where to go if someone clicks on the highlighted text. This is done by including a URL, as a Hypertext REFerence. For example:

<A HREF="http://www.ch.cam.ac.uk">
This text would be highlighted.
Click here to go to the Chemistry Department page.
</A>

Images can be included using the IMG tag. However, not all web browsers can display images, so it is polite to provide some alternative text which a non-image browser can display in place of the image. If the source of the image is a file called image.gif then the instruction would be:

<IMG SRC="image.gif" ALT="image of no significance beyond decoration">

You are now know enough to write some hypertext! It would be easiest to begin by copying an existing HTML file (such as /usr/local/examples/HTML/template.html) to your home directory and editing that. By convention, HTML filenames always end .html or .htm so that it is clear which files in your directory contain HTML.

An example of an HTML file follows. The left hand column is the HTML file, and the right hand column are comments explaining what each line does. Everything between  is a comment, and ignored by the HTML interpreter.

<HTML>                             <!--this is an HTML document!-->
<HEAD>                             <!--with a header-->
<TITLE>Title</TITLE>               <!--title line-->

</HEAD>                            <!--end of header -->
<BODY>                             <!--start of the main body of text -->
<IMG SRC="dna.gif" ALT="DNA">      <!--an image, source is file: dna.gif-->
<H1>Heading</H1>                   <!--HEADING!-->

<H2>Sub-heading</H2>               <!--only a sub-heading-->
<IMG SRC="dna.gif"  ALT="DNA">     <!--that image again -->
<P>                                <!--paragraph mark-->
Main Text Here!                    <!--Main Text Here!-->

<B>This point in bold</B>          <!--some bold text-->
<I>This one italic</I>             <!--some italic text-->
<P>New Paragraph                   <!--another paragraph mark-->
<HR>                               <!--line across the page-->

<A HREF="http://www.ch.cam.ac.uk"> <!--An anchor, pointing to a URL-->
Click here to go to                <!--This text is highlighted-->
department home page
</A>                               <!--End of anchor-->
</BODY>                            <!--End of body text-->
</HTML>                            <!--End of document-->

The easiest way to check that you have written hypertext correctly is simply to look at it using a web browser. Usually there will be an Open File... or an Open Local... option which will let you look at a file in your current directory. However, different browsers interpret hypertext in slightly different ways, so it is as well to check with a program called weblint. Type weblint filename.html to check the HTML in a file called filename.html.

More information on HTML is available:

UIUC Computer Center's HTML primer
Composing Good HTML
HTML style advice
Hypertext Markup Language 2.0 specification
HTML home page
Cambridge University's Guidelines for WWW Information Providers
Setting up a WWW server in the Chemical Laboratory
Web pages are subject to copyright laws. Consult The Copyright Licensing Agency for more details.

Guidelines for the Cambridge Chemistry Department Web Server

Every document must be tested with weblint (Available in the Chemical Information Laboratory
Every document must have a useful <TITLE> to assist search programs. Titles like "Page 1" are unhelpful. The title should give an idea of the content of the page.
Every image must have an ALT text. Not all browsers can display pictures, so a short text description of every picture is needed.
The main page of a series should be called index.html It must contain a link to the chemistry department home page.
Every directory must have a file called index.html which does something sensible
Avoid extensions to the HTML 2 standard, such as frames, superscripts, subscripts and font sizes. These are not reliably produced by all browsers
It is easy to format references. For example:
<I>Tetrahedron Asymmetry</I>, 1995, <B>6</B>, 2613-2636
becomes
Tetrahedron Asymmetry, 1995, 6, 2613-2636
Beware 'special' characters. There are ways to have accented letters, degree celsius symbols, Angstroms, etc. but simply cutting and pasting from a word processor is unlikely to work. Special HTML abbreviations may produce these symbols:
- HTML 2.0 characters: > < & "
- Other characters will be displayed on some browsers: >: >
  <: <
  &: &
  ": "
  £: £
  α: α
  β: β
  →: →
  ↔: ↔
  ←: ←
  Æ: Æ
  Á: Á
  Â: Â
  À: À
  Å: Å
  Ã: Ã
  Ä: Ä
  Ç: Ç
  Ð: Ð
  É: É
  Ê: Ê
  È: È
  Ë: Ë
  Í: Í
  Î: Î
  Ì: Ì
  Ï: Ï
  Ñ: Ñ
  Ó: Ó
  Ô: Ô
  Ò: Ò
  Ø: Ø
  Õ: Õ
  Ö: Ö
  Þ: Þ
  Ú: Ú
  Û: Û
  Ù: Ù
  Ü: Ü
  Ý: Ý
  á: á
  â: â
  æ: æ
  à: à
  å: å
  ã: ã
  ä: ä
  ç: ç
  é: é
  ê: ê
  è: è
  ð: ð
  ë: ë
  í: í
  î: î
  ì: ì
  ï: ï
  ñ: ñ
  ó: ó
  ô: ô
  ò: ò
  ø: ø
  õ: õ
  ö: ö
  ß: ß
  þ: þ
  ú: ú
  û: û
  ù: ù
  ü: ü
  ý: ý
  ÿ: ÿ

NB There are word-processers and other programs which will automatically create HTML files. The rules about acceptable HTML for the Cambridge Chemistry Department Web Server are strict, and the HTML produced by such programs will not necessarily conform to them. All HTML must be checked with weblint.

A minimal HTML page:

<HTML> 
<HEAD>
<TITLE>Title</TITLE>

</HEAD>
<BODY>
<H1>Heading</H1>
Main Text Here!
</BODY>
</HTML>