1. Browser Software
In order to view your web site you need to have a browser installed on your computer. We recommend you 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:
- Internet Explorer
- Mozilla (and Mozilla Firefox)
- Google Chrome
All three are available for Mac and PC platforms. If you require a browser for a Linux system, 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.
- 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.
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.
There are services on the web that can examine your site and help you make it more accessible to your visitors:
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.
Another common problem for web sites is broken links. These can occur because:
- the linked site moves to a new server
- the page is moved in the linked site
- the site shuts down altogether
To avoid this problem you should regularly check your internal and external site links. There are online services which can check for broken links on your site. Examples of such services can be found at:
A well maintained links collection will attract your visitors back to your site regularly.
To aid future site maintenance, you need to organise your files into folders and directories from the outset. There are several key points to remember:
- Keep backups of new and old files on your local drive
- Give files sensible names
- Use server side includes (SSIs) for navigation and common page features
- Use folder hierarchies - don't put all your files in a single top-level directory
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.
To help you maintain your site:
- Give your files meaningful names
- Create one
index.htmlfile for each directory
- Use restricted access directories where necessary
- Remove obsolete files and images off the webserver
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 <body></body> tags.
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.
There are several tags that can be used to make your text stand out. These tags are:
- <strong> Bold </strong> recommended over:
- <b> Bold </b>
- <em> Emphasis </em> recommended over:
- <I> Italics </I>
To use these tags on your pages, surround the text to be emphasised by the start and end tags e.g. <b> this will be bold </b>
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 description">
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 description" longdesc="picture_info.html">
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="">IT Services 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" longdesc="picture_info.html"> </a>
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" longdesc="picture_info.html"> </a>
6.4. Making a list.
Lists can be important tools on a web page either as a list of links, or to make succinct points within prose. HTML supports several forms of lists.
- Unordered list
- Numbered lists
- Definition lists
Unordered lists use <ul> </ul> and <li> </li> tags to define the list. An example is shown below.
<ul> <li>Apple</li> <li>Carrot</li> <li>Milk</li> </ul>
Which renders as:
For a numbered list the <ul> and </ul> are replaced with <ol> and </ol> instead.
<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> </dt> and each definition <dd> and </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:
|Cell 1||Cell 2|
|Cell 3||Cell 4|
Each cell can be given content - either text or images, by placing the content in between the <td> and </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 <table> tag.
Tables can also be given background colours or images:
|Cell 1||Cell 2|
|Cell 3||Cell 4|
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.
- Within the page itself with formatting tags such as <font>, <H1> etc
- 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 IT Services! 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).
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> </form>
Inside the opening form tag, several parameters are necessary in order to send the form to a named user:
Your form tag should look similar to the following:
<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="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 to.
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.
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
redirect. The 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.
- 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
orderfollowed 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.
The design of the rest of the form is up to you. There are various field types available for you to use. These include:
- Pull down selection box
- Text input box
- Radio buttons
- Check boxes
- Text area boxes
All should have a
name attribute included, otherwise data will not be included in the message.
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
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
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT,HTTP_REFERER" />
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:
- 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
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.
Server-side image maps
Note: The 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
Web pages that contain SSIs often end with a
A general tutorial on SSI can be found at the following site: