Introduction to HTML 2

There are a range of elements used to format text. The main ones are headers, paragraphs and line breaks.

There are six levels of headers, marked by a tag with an 'h' followed by a number from 1 (the largest) to 6 (the smallest).

e.g.

Text can be positioned on a new line by inserting a line-break (<br />) or in a new paragraph, by enclosing it in the <p>...</p> tags.

e.g.

which produces:

Additionally, there are a number of styling tags which can, among other effects, underline, italicise or embolden text. Some of these are:

You can view the default sizes and fonts of the headers and paragraphs in your browser, along with the effects of some of the text styling tags above by selecting the 'view page' link in the following learning activity:

CLOSE

CLOSE

The basic tag for creation of links is:

This produces a link as follows:

It is possible to change the link through adjusting the position of the tags:

This produces:

It is important to avoid enclosing other tags such as paragraph tags within the link tags as this is likely to prevent the link from working correctly.

A basic link will open in the same window. To open the link in a new window, target="_blank" is added:

produces:

Where these types of links are used, it is good practice to inform the user that the link opens in a new window and to ensure that such links are used consistently throughout. This is likely to reduce the usability problems that can occur when users are unaware that a new window has been opened and are thus confused by the fact the 'back' button appears to have been deactivated.

CLOSE

Images can also be used as links:

This produces:

Linking from an image automatically adds a border around the image. To remove this, border="0" is added to the link. As with all images, it is also necessary to add 'alt' text to provide an alternative description for text-only browsers or in any situation when the image cannot be displayed.

produces the following:

CLOSE

It is also possible to add a mailto link which automatically opens the user's email program (if available) with the correct address automatically filled in:

This produces:

N.B. It is a good idea to add the email address in full within the link (as above) rather than using a link such as email us. This allows users who do not have or use an email program that can be automatically activated to see and copy the address easily.

A final type of link that can be used is a link within a page. This is done by inserting anchors in the page at the point you wish to link to The anchors are named using <a name="insert name here""></a> tags. The following tags produce anchor links to the headings 'Anchor 1' and 'Anchor 2'.

This produces:

To link to these anchors, the following code is used so that when the link is clicked, the user is taken to the appropriate anchor point.

This produces the following links. Their effect can be seen by selecting them.

Such links can be used within a questionnaire to add skip patterns allowing participants to click on links to different different points in a one-page questionnaire depending on their answers to particular questions.

CLOSE

Links between pages are of fundamental importance in the creation of a website. Absolute linking involves the inclusion of the entire URL as it would appear in the browser (e.g http://www.le.ac.uk/etc/etc.htm). This would be the typical way of linking to external sites.

However, the usual method of linking pages of the same site and located on the same server is through the use of relative links. This section explains how these links work.

If all the site files are located in the same folder:

they are linked simply by adding the name of the document to be linked to.

E.g. For a link on the homepage (index.htm) to 'page1.htm', it is simply necessary to include the page name and extension in the link:

If the folder was placed on the server for the URL 'http://www.le.ac.uk', the link would take the user to the following URL:

Similarly, if 'page2.htm' includes an image called 'image1.gif' it is simply necessary to link to the image through its name and extension.

However, if the page is held in a folder:

it is linked by including the folder name.

E.g. A link on the homepage (index.htm) to 'page1a.htm' is as follows:

The folder name must be included with a forward slash

E.g. 2. A link on the homepage (index.htm) to 'page1ba.htm' is as follows:

Both folder names in the path are included.

If the folder structure was then placed on the server for the URL 'http://www.le.ac.uk', the link would take the user to the following URL:

For a link to a page further up the file tree, '../' is added to the link.

E.g. for a link from 'page1ba.htm' to 'index.htm', the link would be as follows:

Using this notation in combination, it is possible to link to any file in the same site.

Consider the following folder structure:

A link from 'page1ba.htm' to 'page2a.htm' would be as follows:

i.e. open the page called 'page2a.htm in the folder called 'section2' in the folder two levels above this one ('section1b').

and a link from 'page2a.htm' to 'page1ba.htm' would be:

i.e. open the page called 'page1ba.htm in the folder called 'section1b' in the folder called 'section1' in the folder one level above this one ('section2').

CLOSE

Though others are available, the two most common types of images in use on the internet remain the Graphic Interchange Format (GIF) and Joint Photographic Experts Group formats (JPEG). The filename extension for a gif is imagename.gif and for a JPEG, imagename.jpg.

In general terms, the use of gifs is more appropriate for graphics with a limited number of colours or line drawings. Jpegs are suitable for images with a greater number of colours such as photographs.

In either case, it is essential that the correct extension is used for the image to work.

CLOSE

As seen in the links section above, the basic tag for the insertion of an image is as follows:

The image source (src) value is the path to the file name which can be expressed in absolute or relative terms (see the links section).

In addition to this, the following attributes and values are available for use. Some should be always be included, while others are optional.

Attribute	Possible values	Comment
width="value" height="value"	a value in pixels. E.g. width="50" height="50"	Although an image that is included without the height and width attributes will display at its original size, it is good practice to always include them. This allows the browser to load the information more effectively and to layout the page correctly even before the image loads. This is helpful for slow connections.
alt="value"	A description of the purpose or function of the image to allow its significance to be understood by users who have text-only browsers or in any situation when the image cannot be displayed.	To make pages accessible, all images should have an alt description. However, it is not necessary to describe every detail. The text should give as concise an indication of the image's function as possible. Where longer descriptions are required, these should be provided through links. Images with no importance such as spacing images should be given an empty alt tag "" to make it clear that this is the case. Any images used for buttons, icons, logos etc, should provide the information in the clearest and most concise way possible. E.g. "*", "[?]", "[!]".
border="value"	A value in pixels. E.g. border="2"	This is most commonly used to remove the border automatically placed around images used as links, by adding a value of "0".
align="value"	left, right top, middle, bottom E.g. align="top"	To centre an image it is necessary to place it within a centered paragraph using the <p></p> tags. This can also be used to align left or right. The top, middle and bottom values align the image on the horizontal line.
hspace="value" vspace="value"	A value in pixels E.g. vspace="10" hspace="10"	Sets the space around the top and bottom edges (vspace) and left and right edges (hspace) of and image. This graphic has an hspace of 10 pixels. This has an hspace of 30 pixels.

CLOSE

The following full image tag:

produces the following:

CLOSE

The creation of lists in web pages is straightforward. It basically involves the following tag pattern:

<type of list>

<list item>First list item</list item>

<list item>Second list item</list item>

<list item>Third list item</list item>

</type of list>

The three main types of list are shown in the table with the HTML that produced them.

CLOSE

It is also possible to 'nest' a list within a list.

E.g. if an unordered list (ul) is placed inside one of the items of an ordered list (ol), as follows:

The result is a nested list as follows:

It is important to remember to close all tags in a list correctly and maintain symmetrical tagging. It can become difficult to track the tags in a nested list, and any unclosed or unsymmetrical tags may affect the way the list renders in a browser.

E.g. The tags for a basic nested list should be symmetrical, as follows:

The symmetrical tag structure in a nested list.

CLOSE

The element tags for the creation of a table are as follows:

Thus, the following code creates a 2x2-cell table:

Further columns can be added by increasing the number of <td>...</td> tags (New lines are marked with ):

and further rows can be added by increasing the number of <tr>...</tr> tags (New lines are marked with ):

CLOSE

The browser renders the table width as the maximum number of cells on any one row. It then lines the cells on other rows up with these cells. If a row has fewer cells than this maximum, it will not automatically stretch these cells to fill the space but will line them up with the ones in the longest row, and leave an empty space in the table.

Thus a table with 2 cells on row 1, 3 cells on row 2, and 1 cell on row 3, as follows:

would produce the following (a background has been applied to the cells to show the spacing clearly):

In order to stretch the cells to fill the space in the table, the column-span attribute (colspan) is used.

Thus, if colspan = "2" is added to the HTML creating the first row as follows:

the result is:

Similarly, if colspan="3" is added to the <td> tag in the third row, the result is:

In the same way, the row-span attribute (rowspan) is used to control the spacing of rows.

If rowspan = "2" is added to the HTML creating the second row as follows:

the result is:

Note that this only works down a table. Adding rowspan ="3" to cell five will only be effective if the cell is moved to the first row as follows:

It is also possible to place a new table within a table cell.

A great deal of control can be added to the spacing of tables though the use of tables within table cells, alongside colspan and rowspan. It is thus common to use them to create the overall layout for webpages.

Where this is done, however, it is important to be aware of how the information may be presented for users of text-only browsers or screen-reading software, which 'read' the information from left to right.

For example, in the following table, a text-only browser would be likely to present the information from cell 5 before cells 3 and 4.

It is also important to use relative sizing (e.g. in percentages) rather than absolute sizing (e.g. in pixels) to ensure that the table will be visible on a range of screen sizes. (See the 'Key design issues' section of this technical guide for further information on this issue).

CLOSE

The attributes used to format the style and layout of tables are applied to the table tag <table attribute ="value">...</table> and the table cell tags <td attribute="value">...</td>.

Table attributes and values

Table cell attributes and values

CLOSE