Writing HTML Documents

Beginner Guides and other Information

The following references can be useful to you in creating your own home page. Some could also be printed out to keep handy :-

HTML Tutorial (w3schools)

HTML Primer

HTML Code Tutorial

A Beginner's Guide to URLs

HTML 3.2 Reference (Called: Wilbur)

HTML 4.0 Reference

HTML Style Guide -W3C

Example Html Document (Template)

The following is a minimal a minimal example of what your html documents should contain and can be used as a template for your index file.


<HTML><HEAD>
<TITLE>The Document's Title</TITLE>
</HEAD><BODY>
<H1>The Document's Title</H1>
<A HREF="/"><IMG SRC="/images/home.gif" ALIGN"top" ALT="[home]">
   Up to Server's Home Page</A><P>
<HR>
Something Interesting...
<P>
<HR>
<ADDRESS>
Dated: 7 Nov 1994 <BR>
Author: J.Citizen
</ADDRESS></BODY>
</HTML>

This example document contains :-

The whole document wrapped in <HTML>..</HTML> tags.
The Tags <HEAD>..</HEAD> construct containing the documents <TITLE>. The rest of the document should be contained in a html <BODY>..</BODY> construct.
The header or banner of the document in a <H1>..</H1> html header elements.
A Link to the `logical parent' of this document, which will allow user viewing this document to find its normal parent. This is inportant as without this user can easily become ``Lost in Hyper Space''.
The actual document information
<ADDRESS>..</ADDRESS> tags containing the date of the last major change to the document and the author. Often this section also contains the name and address of the person to whom users can send send errors or comments to, and when and by whom it was modified.

Other example HTML files are available throught the world.

NOTE: You can also look at the HTML source of any document you find on the net and thus see how they created the document you are looking at. Most WWW client programs will allow you to see what it downloaded by selecting ``View Source''. In Mosaic you can also do this by just pressing the ``D'' key.

Links to other programs

Other examples of `parent links' which could be used in documents are given below. Use the ``View Source'' feature of your client program to see exactly how these wre created.


<A HREF="/"><IMG SRC="/images/home.gif" ALIGN="top" ALT="[home]">
   Up to this Server's Home Page</A><BR>
<A HREF=".."><IMG SRC="/images/back.gif" ALIGN="top" ALT="[back]">
   Up a Previous Directory's Index </A><BR>
<A HREF="."><IMG SRC="/images/back.gif" ALIGN="top" ALT="[back]">
   Up to This Directory's Index</A><BR>
<A HREF="fake.html"><IMG SRC="/images/top.gif" ALIGN="top" ALT="[top]">
   To First Section</A><BR>
<A HREF="fake.html"><IMG SRC="/images/prev.gif" ALIGN="top" ALT="[prev]">
   To Previous Section</A><BR>
<A HREF="fake.html"><IMG SRC="/images/next.gif" ALIGN="top" ALT="[next]">
   To Next Section</A><BR>
<A HREF="ftp://ftp.cit.gu.edu.au/">
  <IMG SRC="/images/cross-ref.gif" ALIGN="top" ALT="[ref]">
  Our FTP server</A> (ftp.cit.gu.edu.au)<BR>

Which results in the following on the WWW

Up to this Server's Home Page
Up a Previous Directory's Index
Up to This Directory's Index
To First Section
To Previous Section
To Next Section
Our FTP server (ftp.cit.gu.edu.au)

These are only examples you would most likely want to try something different. Be my guest.

Using Locally Supplied Images

The above links make use of a large set of WWW icons and images I have made available on our local server. You can look over these images using the Example WWW Images Pages. The above images are added to documents using a HTML tag of the form...


<IMG SRC="...URL..of..image..." ALIGN="middle" ALT="alturnative string">

The SRC argument of the images specifies the URL of the image to be loaded. The image is loaded as a seperate connection by a reading client. As such any document with lots of images can take a lot longer to be loaded and displayed. As such try not to use

The image normally comes from the same server as the document which contains the image. As such the ``http://www.domain'' part of a URL is very very rarly added to the SRC's URL in a document. Images are also usally supplied from a specific location from the server involved. In CIT, this is from the URL "/images/" which directory wise is in "/www/images/" on our web server machine. For Example:-


<IMG SRC="/images/welcome.gif">

The loading of documents containing images can be dramatically speeded up by including in the IMG tag WIDTH and HEIGHT options. Netscape for instance will then leave enough space for the image with out needing to wait. It can then display the rest of the document for the user to read while the image is still loading. This is particularly important for web users which are very distant network wise, and here in Australia that is just about everyone else in the world.

The ALT tag is also importatnt for users which are visualy impared or can only use a plain text client. If a image is not important this ALT tag should be empty (EX: ALT=""). If it is a list element a star or small `o' should be used (EX: ALT="o"). Images which are refered to by the text or are very important should have some sort of description. The description is often enclosed in square backets to distinguise the description from the rest of the text. (EX: ALT="[Photo of me]") Here is the same example with WIDTH and HEIGHT options also an appropraite ALT tag for non-graphical web users. Do not forget the extra information :-


<IMG SRC="/images/welcome.gif" WIDTH=87 HEIGHT=49 ALT="[welcome]">

The options are a pain but important to remember.

I have indevoured to supply the school with a very good range of images for WWW use. These images have become popular the world over and you can look at them from the Example WWW Images documents.

Here for example is an example of using some of the `Ball' images available and below what it would look like.


<DL>
<DT>Example Ball Images...
<DD><IMG SRC="/images/Balls/red.gif" WIDTH=14 HEIGHT=14 ALT="*">
    This is a red ball
<DD><IMG SRC="/images/Balls/blue.gif" WIDTH=14 HEIGHT=14 ALT="*">
    This is a blue ball
<DD><IMG SRC="/images/Balls/smiley.gif" WIDTH=14 HEIGHT=14 ALT="*">
    Smile be happy!
</DL>

Example Ball Images...: This is a red ball; This is a blue ball; Smile be happy!

Local Considerations

The following is information and techniques provided for in the School of Computing and Information Technology, as an attempt to reduce the problems associated with Wirth's Rule.

  Wirth's Rule:     Never store data in more than one place,
      sooner or later you will update one and not the other.

Checking Your HTML Document

A program called weblint (perl script) is available to find most common HTML document errors. This program does understand netscape stuff and errors/warnings can be controled via a ".weblintrc" file.

I really recommend users use this on all their HTML files to make sure that their documents are correct. It is amazing just how easy it is to leave simple HTML errors in a document but which still appears OK when examined in a Web Viewer.

Weblint can also use the `lynx' program to download a web document for checking, and can do local link checks as well.

For more information please read the manpage, email Anthony, or look on the Weblint WWW Home Page.

Dated: 22 Feburary 1995
Modified: 28 October 1996
Author : Anthony Thyssen, Systems Programmer
Send comments, errors and suggestions to webmaster@cit.gu.edu.au