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

Up: Contents Previous: 5. Site Management Next: 7. Feedback from your site.