2. Hyperlinks

Hyperlinks are created using the <a></a> tag. Like the <img> tag, the hyperlink tag will an attribute. The attribute in this case is named href which will contain and the value will be a URL. href is short for hyperlink reference and URL is an acronym for Uniform Resource Locator.

Inside the opening and closing tag, you will place the text. This is the text that appears in the browser and can be anything you like.

External Links

If you want to link to a web page that is not a page in your web site, the syntax is:

<a href="http://www.google.ie">Google</a>

External links generally begin with http://www. Some sites like banks encrypt the messages passed to the website, they begin with https://www. You will notice a green padlock beside the web page URL at the top for encrypted sites. Encryption is very important for websites that deal with money or your personal details. If a hacker intercepts an encrypted message, it will take them a very very long time to un-ravel it.

http link (without padlock)

https link (with padlock)

Internal Links

If you want to link to another page on your website, you only need to include the file name:

<a href="page2.html">Page 2</a>

Open Link in a new Tab

If you want the page to be opened in a separate tab, add the attribute target and set the value to _blank:

<a href="http://www.google.ie" target="_blank">Google</a>

Wrapping hyperlinks around images

The above examples wrap the hyperlink around plain text. Hyperlinks can be wrapped around other tags and a common use is to wrap hyperlinks around images which will allow the user to click on an image and be redirected to another page or website.

<a href="page2.html" title="Click to see a flower">

<img src="flower.jpg" alt="flower"></a>

I have also snuck in a new attribute into the hyperlink tag named title. Title can be used on a number of tags. Notice that when you hold the mouse over the image with the hyperlink on your webpage that the title is displayed. If the image did not include a hyperlink, you could have included the title in the image tag:
<img src="images/flower.jpg" alt="flower" title="A pretty flower">

You can include the title on both the image and the hyperlink tag. The title on the outermost tag which is the hyperlink tag will only be used.

Hyperlinks can be wrapped around other tags. Try wrapping it around the h1 or p tags.

CSS

Like other HTML tags, the styling of hyperlinks can be controlled using css styling.
The following example makes all hyperlinks a red colour:

a {

    color: #FF0000;

}

Notice when you hover over hyperlinks in your webpage that they change colour. Also when you click on a link it changes colour to remind you that you have already clicked on the link. This is what is referred to as the state of the link. 

The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

You can change these colours using the following examples:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Color is just one attribute of hyperlinks, try some others. The text-decoration property is mostly used to remove underlines from links and the background-color changes the background colour.

a:link {
    color: #FF0000;

    text-decoration: none;

    background-color: #B2FF99;
}

a:visited {
    color: #00FF00;

    text-decoration: none;

       background-color: #FFFF85;
}

a:hover {
    color: #FF00FF;

    text-decoration: underline;

        background-color: #FF704D;
}

a:active {
    color: #0000FF;

    text-decoration: underline;

        background-color: #FF704D;
}