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