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.
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. .
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.
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.
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.
- You should aim to make your graphics as small as possible, but without too much loss of clarity.
- GIF file format is good for images with consistent blocks of colour, such as a logo, lines, text and screen shots. It can support both transparency and animation but is limited to 256 colours.
- JPEG file format should be used for complex images such as photographs. It can support 16 million colours and compresses very well. However, you should only save in this format when you are certain you have finished, as each time you save in JPEG format you lose some picture quality.
- Many graphics packages will allow you to specify a web colour swatch so that you can choose safe colours when designing your images.The web-safe hexadecimal numbers for colours can be found at: http://www.dtp-aus.com/htmlchrt.htm
- There are tools available from the web to splice your images if necessary.
- There are tools on the web to make image maps - often used in navigation systems.
- There are sites on the web which will optimise your images for you.
- Scale graphics to the size you actually want, rather than doing it dynamically from within a web page.
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.
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.
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:
<html> <head> <title></title> <body> Your text and images go here. </body> </html>
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>
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.
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.
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:
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:
>/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>
<dl> <dt>Apple</dt> <dd>A fruit</dd> <dt>Carrot</dt> <dd>A vegetable</dd> <dt>Milk</dt> <dd>A liquid</dd> </dl>
<table> <tr> <td> Cell 1</td><td> Cell 2</td> </tr> <tr> <td> Cell 3</td><td> Cell 4</td> </tr> </table>
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
The web-safe hexadecimal numbers for colours can be found at: http://www.dtp-aus.com/htmlchrt.htm
- Within the page itself with formatting tags such as
- Using Cascading Style Sheets (CSS)(often a separate file which is linked to by the HTML page).
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.
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).
Two form fields are required when creating your feedback html form, namely a
recipient field, and an
>input type="hidden" name="recipient" value="firstname.lastname@example.org" /
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="email@example.com" /
Would set the "From" address of the final email to be from your University email address (if it is "firstname.lastname@example.org"). 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.
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.
If you're not using an immediate redirect, as mentioned above,
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" /
The label for the return link. For example:
>input type="hidden" name="return_link_title" value="Back to my home page" /
- The background color for the success page.
- The URL of the background image for the success page.
- The text color for the success page.
- The link color for the success page.
- The vlink color for the success page.
- The alink color for the success page.
- The title for the success page.
This sets the order in which the submitted form inputs will appear in the email
and on the success page. It can be the string
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.
- This is a list of the CGI environment variables that you would like to be included in the email. For more details, see the section regarding validation below.
If this is set to a non-empty value then fields that the user left blank will
be included in the email, for example:
>input type="hidden" name="print_blank_fields" value="true" /
Normally, blank fields are suppressed to save space.
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.
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!
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:
- The image file (i.e. a GIF, JPEG or PNG picture)
- Coordinates for each link area
- URL to new page - operates when area clicked by the mouse
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
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
<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 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.