IT Services



A Guide to HTML


Contents



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:

  1. Internet Explorer 
  2. Mozilla (and Mozilla Firefox)
  3. Opera

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.

Directory structure

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.

Graphics tips:

  1. You should aim to make your graphics as small as possible, but without too much loss of clarity. 
  2. 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.
  3. 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.
  4. 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
  5. There are tools available from the web to splice your images if necessary.
  6. There are tools on the web to make image maps - often used in navigation systems.
  7. There are sites on the web which will optimise your images for you.
  8. 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: 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:

http://www.webmasters-resources.com/HTML/Link_Checkers/

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:

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:


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:
  • >strongBold>/strong recommended over:
  • >bBold>/b
  • >emEmphasis>/em recommended over:
  • >IItalics>/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="">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" 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.
  1. Unordered list
  2. Numbered lists
  3. 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:
  • Apple
  • Carrot
  • Milk
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> 
  1. Apple
  2. Carrot
  3. Milk

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.



6.5. Tables

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.

  1. Within the page itself with formatting tags such as >font, >H1 etc
  2. 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.



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: http://users.ox.ac.uk/cgi-bin/FormMail.pl. Vhost users should instead refer to the script using their own vhostname: http://www.example.ox.ac.uk/cgi-bin/FormMail.pl.

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:
  • Method
  • Action
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 email field. The former is a hidden field (this is not displayed to the user) and is the first to be received by the script and must contain your valid University email address:

>input type="hidden" name="recipient" value="example.user@unit.ox.ac.uk" /

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 email field. It can be added to the form in two ways: either as a "hidden" field, in which case you should provide your University email address as the field's "value"; or as a normal form field, in which case the person submitting feedback is required to enter their email address. For example:

>input type="hidden" name="email" value="example.user@unit.ox.ac.uk" /

Would set the "From" address of the final email to be from your University email address (if it is "example.user@unit.ox.ac.uk"). 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 email fields, only the first will apply.

There are many other "hidden" fields that are available, two of which will likely be of regular use, namely subject and 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.

return_link_url
If you're not using an immediate redirect, as mentioned above, return_link_url will 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" /
return_link_title
The label for the return link. For example:

>input type="hidden" name="return_link_title" value="Back to my home page" /
bgcolor
The background color for the success page.
background
The URL of the background image for the success page.
text_color
The text color for the success page.
link_color
The link color for the success page.
vlink_color
The vlink color for the success page.
alink_color
The alink color for the success page.
title
The title for the success page.
sort
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 alphabetic for 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" /

If 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.
env_report
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.
print_blank_fields
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.

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 name and 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.

Note: email is implicitly required, and does not need to be included in your own list of required fields.

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). For example:

<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: 

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:

link1 link3 link2 >

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 tag="value">

The #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 page.

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:

http://www.webreference.com/