1. Browser Software
In order to view your web site you need to have a browser installed on your computer. OUCS recommends users to obtain the latest version of your favourite browser so that you see the web at its optimum. However, when building your web site, you should check your site using an older browser. This is necessary as older browsers can render your pages in unexpected ways. They do not support many standard features found on modern web sites and can lead to considerable problems in some cases.
Some of the most popular graphical browsers are:
All three are available for both Mac and PC platforms. If you require a browser for a Linux system, Opera is also available, and browsers based on Mozilla, such as Firefox, are popular choices. Other browsers that can be used on non-graphical systems include Lynx and W3M. .
2. Structure of your web site.
Considerable thought needs to be given to the structure of your site. This includes both the directory structure on the web server, i.e. directories to use and where they reside, and the way the pages are presented to the user.
When structuring your web site it is important to consider how the directories should be arranged. You could organise the directories to reflect the navigation system of your site. Each section of the site could have its own directory folder on the server. Images are often separated from the main html pages rather than all being mixed in the same folder. Organising where each type of file will be put at the design stage will help to avoid problems later on.
Layout and navigation.
In its simplest form, a web site consists of a homepage which introduces the site and provides a list of topics for the visitor to explore. Each homepage topic is often a link to pages that give further information on the subject. These pages can also link to further pages either within the site or to other sites on the web. Often web sites have a pyramid type structure to them. The homepage is at the top, with layer upon layer of pages below.
When building your site you should be aware that visitors could enter your site from any page. Web sites are rarely linear in form, and should instead be considered as a lattice of interconnected pages. To account for a non-linear structure the site needs to have a clear and consistent navigation system available for users to move around the site. If a user enters the site from a subtopic, they should be able to easily navigate back to the homepage and to other sections within the site.
3. Design of your site
Professional web sites are often designed using graphics packages such as Adobe Photoshop. However, there are many other commercial, shareware and free graphics packages which can be downloaded from legitimate sites on the Internet. These are perfectly suitable to design a template for your site. Some packages will also convert your graphical site design into a HTML-based template, which you can then use in an HTML editor.
Graphics on the web are generally either in the GIF or JPEG formats, although there are newer file formats such as PNG and SVG, which are likely to replace older formats in the future.
4. Accessibility Issues
The Web has become a very graphical medium, but not everyone can see it this way. Some people switch off graphics, others use machines that can only show text and other people have disabilities that make access to the Web difficult. You should design your site with accessibility issues top of your priorities. A well designed, accessible site has been shown to benefit all users and can increase the traffic your site receives.
There are legal requirements on site providers to make their sites as accessible as possible. The UK's Disability Discrimination Act (DDA), makes it illegal for you to include information on your site which is inaccessible to certain users. There are also legal regulations for web accessibility in other jurisdictions e.g.European Union, US and Australia set out requirements for accessible design.
5. Site Management
As you develop your site you will need to maintain the pages that are already on the web and to publish new ones. Your site can quickly become outdated if old items are not replaced regularly.
A well maintained links collection will attract your visitors back to your site regularly.
Organize Your Folders and Directories
To help you maintain your website, your directory structure should be appropriately organised. This will aid site maintenance as the site grows. Files having similar types of information are best collected together into a single directory. Your site structure will encompass a series of directories with different categories. Its a good idea to separate different types of files into their own directories too. Images, for instance, should be given their own top-level directory with other specific image directories within it. Directory access can also be restricted to certain specified domains or people can be given usernames and passwords to enter the site. See the Frequently Asked Questions section for further details.
6. Coding your site
Web pages are generally coded using a computer language called HyperText Markup Language (HTML), although there are other languages that are becoming popular (e.g. XML). HTML is an easy language to learn and consists of a series of 'tags' that tell the computer what to do with the text and or images. Tags are not case-sensitive in HTML.
If you have used a graphics program that can convert a design to a HTML page, you will have a working template into which you can add your data. If not you will need to construct the page yourself. This is briefly outlined below:
A simple page consists of:
<html> <head> <title></title> <body> Your text and images go here. </body> </html>
All your text and images will be formatted and arranged within the
6.1. Headings and Paragraphs
To code a title the
>Hx (where x is a number between 1 and 6) tag is
used. In HTML there are 6 levels for headings. H1 is the most important, H2
next going down to H6 - the least important. To highlight an important
title, your code should look like the following:
<H1>This is an important heading </H1>
The H1 can be replaced with H2, H3..H6 depending on your requirements. The higher numbers are usually smaller sized when displayed.
Paragraphs are coded with the
>p tag. To start a new paragraph in a
document you need to place the
>p tag at the beginning of the text.
The closing tag '
>/p' should be placed at the end of the text block.
To produce a single line break in the text the
>br tag is used. This
forces the text onto the next line.
>bthis will be bold
6.2. Adding Images
Images are widely used on the web to enhance the user experience of sites. However, the use of images should be considered inconjunction with accessibility issues. Images should not be used in isolation to convey information to users.
Images are often kept in a separate folder called 'images'. To add an image from this folder to a web page you will need to do the following.
>img src="images/my_picture" width="200" height ="150"
This information tells the browser there is a picture called 'My_picture', 200 x 150 pixels and it is in the 'images' directory. The image needs to have a description for those users who cannot see the image. You can add a short description to the image tag using the 'alt' attribute. Your image tag would then look like this:
>img src="images/my_picture" width="200" height ="150" alt="my picture
If you have a complex picture you might need to give a longer description. This can be supplied in the form of a link to another file via the 'longdesc' attribute of the image tag. Your link would then look like this:
>img src="images/my_picture" width="200" height ="150" alt="my picture
6.3. Linking to other pages and sites.
One of the greatest features of the web is the ability to link any document
to any other, and to follow a link by a single mouse click. Links are
defined with the
>a (anchor) tag. To link to a page in the same
directory, you need to do the following:
This is a link to
>a href="page2.html">page two</a
To link to an outside page you need to supply the whole URL:
This is a link to
>a href="">OUCS home page</a
Images can also be turned into links. You need to place the
<a> tag around the image as shown below:
>a href="page2.html"><img src="images/my_picture"
width="200" height ="150" alt="my picture description"
To remove the blue border from around the linked image, the border attribute of the image tag should be set to '0'. The link should now look like:
>a href="page2.html"><img src="images/my_picture"
width="200" height ="150" border="0" alt="my picture description"
6.4. Making a list.
>/litags to define the list. An example is shown below.
<ul> <li>Apple</li> <li>Carrot</li> <li>Milk</li> </ul>Which renders as:
>/ulare replaced with
<ol> <li>Apple</li> <li>Carrot</li> <li>Milk</li> </ol>
A definition list is slightly more complex. The list starts with a
>dl and ends with a
>/dl tag. Each term uses
>/dt and each definition
>/dd. This list
would look as follows:
<dl> <dt>Apple</dt> <dd>A fruit</dd> <dt>Carrot</dt> <dd>A vegetable</dd> <dt>Milk</dt> <dd>A liquid</dd> </dl>
Lists can also be nested inside one another for more complex layouts of information.
Tables can be used in two ways; To format data or to provide a more precise layout of your web site. The code below shows a simple data table with 4 cells.
<table> <tr> <td> Cell 1</td><td> Cell 2</td> </tr> <tr> <td> Cell 3</td><td> Cell 4</td> </tr> </table>
This will produce the following output:
Each cell can be given content - either text or images, by placing the
content in between the
>/td tags. If the borders of
the table are not required they can be turned off by the addition of
border="0" to the starting
Tables can also be given background colours or images:
This is achieved by adding bgcolor="#hexadecimal number"
e.g. bgcolor="#FFFFFF" = white
bgcolor="#000000" = black
bgcolor="#FF0000" = red
bgcolor="#008000" = green
The web-safe hexadecimal numbers for colours can be found at: http://www.dtp-aus.com/htmlchrt.htm
6.6. Text Formatting
Text formatting of the page can be done in two ways.
The second method is the preferred technique for many sites - including OUCS! By linking to a page containing definitions of how text should be formatted, you can make site-wide changes by altering a single file. As your site grows, the usefulness of this technique becomes ever more apparent.
For further information about CSS visit http://www.w3c.org/Style/CSS/
For formal courses on HTML visit our IT Learning Program pages.
7. Feedback from your site.
Web sites often allow visitors to send information back to the site, either to join email lists, to order goods or just to communicate with the owner. This is achieved through interactive web forms and scripts. All the script does is to email the information back to a specified name. A useful script is available to users on our web servers which can send a reply to an Oxford University email address only (that is, an email address within ox.ac.uk domain and subdomains).
The script is available at:
Vhost users should instead refer to the script using their own vhostname:
You do not need to copy this file to your own area, just use it in the form as shown in the next section.
7.1. Setting up the form
Forms consist of start and end FORM tags:
>form method=POST action="http://users.ox.ac.uk/cgi-bin/FormMail.pl" /
Two form fields are required when creating your feedback html form, namely a
recipient field, and an
>input type="hidden" name="recipient" value="email@example.com" /
Using "recipient" in the
name attribute of this field is important,
and you must give it a value using the
value attribute. This is
where you put your University email address, which the form data is later sent
The second required form field is the
>input type="hidden" name="email" value="firstname.lastname@example.org" /
Would set the "From" address of the final email to be from your University email address (if it is "email@example.com"). Whereas using:
>input type="text" name="email" /
in the form would require the user submitting feedback to enter their address for use as the message's "From" address.
Note: If your form has two
There are many other "hidden" fields that are available, two of which will likely be
of regular use, namely
former provides the text that will be used as the subject header of the email
message delivered to you. If left out, the email message will have a generic
subject header. If the latter field,
redirect, is present, it
should contain a valid HTTP URL, to which the user will be redirected after
successful submission of the message.
Other hidden fields can control various configuration aspects of your form. Below is a brief list of the more useful fields.
return_link_urlwill enable the default success page to provide a link to the target URL. This is normally used to provide a link from the success page back to your main page or back to the page with the form on. For example:
>input type="hidden" name="return_link_url" value="/home.html" /
>input type="hidden" name="return_link_title" value="Back to my home page" /
alphabeticfor alphabetic order, or the string
order:followed by a comma separated list of the input names, for example:
>input type="hidden" name="sort" value="order:name,email,age,comments" /
order:is used you must supply the names of all of the fields that you want to be in the body of the mail message.
>input type="hidden" name="print_blank_fields" value="true" /
nameattribute included, otherwise data will not be included in the message.
You can view an example form
for use on your site. To save this file
right click on the
mouse button and select
[save as]. Please rename the file as .html
when incorporating into your site.
7.2. Form validation
You can configure form mail to require certain fields to be completed. To enable
the checking of required fields, use the the
required hidden form
field, this is a list of fields that the user must fill in before they submit the
form. If they leave any of these fields blank then they will be sent back to the
form to try again. For example:
<input type="hidden" name="required" value="name,comments" />
would require the
comments form fields to
be non-empty. If you want finer control over the the error that the user see's if
they miss out a field you can add another hidden field, namely
missing_fields_redirect. This field must have a valid URL as its
value attribute, and the user will be redirected there if any of
the fields listed in
required are left blank.
If you would like the email returned to you to contain certain information about
the remote host, browser agent, and referring host that used the form (and possibly
some user information, if known), then you can include the
env_report hidden form field, which lists the variables you would
like included (as long as those variables are supported by the FormMail.pl script).
<input type="hidden" name="env_report"
would provide a selection of potentially useful information (although not all variables are guaranteed to be present). What you do with the data from there is up to you!
8. Creating Image Maps
An image map is a picture that has various URLs attached to different areas of it. There are two types, one operates on the client side (i.e. the users' browser) and the other works on the server side. A simple client-side example is given below:
By moving your mouse over the three areas shown as links you will see that the url and the description popup box change.
The essential parts for a client-side image map are:
There are many programs available to help produce an image map (some are built into HTML editors); one useful one is called 'mapedit' and is available to buy from: mapedit
Image maps can also be made using Paint Shop Pro and ImageReady software.
Alternatively there are resources on the web where you can build an image map online. Our client side image map was built using the online resource at : Linked Resources web site
The code generated by the online application is shown below.
<img src="images/imagemap.gif" border="0" usemap="#imagemap"> <map name="imagemap"> <area href="http://www.link1.html" ALT="link1" shape="poly" coords="43,75,16,68,22,11,47,11,66,26,69,33,56,33,55,43,43,45,40,75"> <area href="http://www.link3.html" ALT="link3" shape="poly" coords="46,49,46,113,91,70,58,70,56,49,44,48"> <area href="http://www.link2.html" ALT="link2" shape="poly" coords="61,40,142,40,142,64,61,63,61,39"> </map>
All you need to do with this code is to place it within your HTML document, save it and view the page with a browser. All the work in converting this information into an image map is done by the visitors browser. The image below is the working version of the code above:
Server-side image maps
Note: The OUCS server has internal imagemap support, and you do not need a CGI program for server-side image maps.
9. Server Side Includes
Server Side Includes (SSI), are a special type of HTML comment that tells the web server to dynamically generate data and place it in a web page when requested. The general format of an SSI is shown below.
#command can be various commands that are supported by the Web
server. The simplest command is
#include, which inserts the
contents of another file at that point in the document. This is especially
useful for ensuring that headers, footers and even navigation systems are the
same on all pages throughout a Web site. To change a header or footer element,
you need only modify the include file, instead of updating each individual Web
Web pages that contain SSIs often end with a
'.shtml'. This is a
requirement for the OUCS web servers. The filename extension enables the Web
server to differentiate those pages that need to be processed before they are
sent to the browser.
A general tutorial on SSI can be found at the following site: