Web Design and Authoring: Session one

Making Hypertext Links

We use hypertext links to navigate between and within websites on the World Wide Web (WWW).

Web designers usually make links visually apparent with a combination of underlining, bold text and different colours. A consistent signal that a section of text or an image is a link is that our mouse pointer turns into a pointing hand (colophon) when we move it over the link.

A link has several different states, including active, visited and hover, each of which can be made to look different to aid user navigation (more on this when we reach CSS).

How to make a link

To create a hypertext link you need three things:

the correct HTML tag to define the link
the text that will serve as the link, that is, the highlighted text which users select to follow the link
the name and location of the file you want to link to

Only the second element is visible in the browser window.

The Anchor Tag

To create a link between different documents, or to a specified point in the current document, we use the <a> anchor tag. The <a> tag needs a closing tag </a> to enclose the text which will form the clickable link. We also need a way to tell the browser which document we want to link to. For this, we need to add an attribute and value.

Attributes and Values

Many tags work just fine as they are, but other tags need additional information added into the tag to make them work. As in this example, we need to tell the browser not just that the text enclosed by the tag is a link but, also, which document we want to call up when the link is clicked.

To add this additional, required, information we use an attribute and value pair.

We write all attribute and value pairs in the same way:

A tag may contain multiple attribute and value pairs, each pair separated by a whitespace:

Some attribute and value pairs are required to make the tag work, others are optional, providing additional instruction on how the tag is to function (we'll see this in action when we add images to our pages).

To make our link we need the following HTML:

<a href="filename.html">linking text</a>

Syntax

Syntax means the particular way in which a code or language, such as HTML, is written down. With CSS and JavaScript, for example, the syntax is crucial, miss out a semi-colon, or put a comma in the wrong place and it won't work.

HTML has less strict syntax than most languages. For example, HTML tags are case insensitive, with <html>, <HTML> and <Html> all equally acceptable. Values in attribute and value pairs do not always have to be in lower case with values enclosed by quotation marks.

However, XHTML has very strict syntax, which includes all elements and attribute names being written in lower case, with all values quoted.

To make it easier for you to use XHTML in the future, should you need to, we learn to write our HTML in lower case, with values quoted.

HTML5 will have a slightly less strict syntax than HTML4.01 ...

Which file, and where is it?

We need to specify which file we want our link to point to. We shall discuss file referencing in more detail later on, but, for now, we shall use two types of reference: relative and absolute.

By the time you read this, we shall have created two web pages (files called index.html and links.html) within a single folder named coursework.

On our index.html page, to make a link to links.html we would write the following code:

<a href="links.html">go to my page of interesting links</a>

On our links.html page, to make a link to index.html we would write:

<a href="index.html">back to my homepage</a>

This is a relative reference, as we tell the browser to look for the new file in relation to the location of the current (active) file.

If we want to make a link to an external website we must add more information, including the protocol (http://), and the location of the server on which the file is stored. To link to the BBC homepage we would write:

<a href="http://www.bbc.co.uk">BBC homepage</a>

To link to a specific page we would need to include the file path too. In this example, to link to the Radio 4 schedule for 6 September 2010 we would write:

<a href="http://www.bbc.co.uk/radio4/programmes
/schedules/fm/2010/09/06">Radio 4 Schedule for 6 September 2010</a>

(the file reference would be written on one line in our code)

This type of reference is called an absolute reference.

Your two linked pages would look somewhat similar to mine:

How my first two pages look in Firefox

I've put my three links into an unordered list. See if you can do the same with your links.