Guide to HTML

Expand All

In order to view your website 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 website, 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 websites 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. 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.

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 website 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 website 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 websites 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. Websites 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 an 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.

  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.

 

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:

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.

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

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. It is 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.html file for each directory
  • Use restricted access directories where necessary
  • Remove obsolete files and images off the webserver

 

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.

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>

Images are widely used on the web to enhance the user experience of sites. However, the use of images should be considered in conjunction 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="https://help.it.ox.ac.uk/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="https://help.it.ox.ac.uk/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="https://help.it.ox.ac.uk/images/my_picture" width="200" height ="150" alt="my picture description" longdesc="https://help.it.ox.ac.uk/picture_info.html">

 

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="https://help.it.ox.ac.uk/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="https://help.it.ox.ac.uk/page2.html"><img src="https://help.it.ox.ac.uk/images/my_picture" width="200" height ="150" alt="my picture description" longdesc="https://help.it.ox.ac.uk/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="https://help.it.ox.ac.uk/page2.html"><img src="https://help.it.ox.ac.uk/images/my_picture" width="200" height ="150" border="0" alt="my picture description" longdesc="https://help.it.ox.ac.uk/picture_info.html"> </a>

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:

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> 

Apple

Carrot

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.

Tables can be used in two ways; To format data or to provide a more precise layout of your website. 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

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

 

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 website

The code generated by the online application is shown below.

<img src="https://help.it.ox.ac.uk/images/imagemap.gif" border="0" usemap="#imagemap">
<map name="imagemap">
  <area href="https://ox.ac.uk" 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="https://www.it.ox.ac.uk" ALT="link3" shape="poly"
coords="46,49,46,113,91,70,58,70,56,49,44,48">
  <area href="https://help.it.ox.ac.uk" 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.

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

Web pages that contain SSIs often end with a '.shtml'

 

Get support


If you cannot find the solution you need here then we have other ways to get IT support

Get IT support

 

Submit a suggestion, compliment or complaint