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