HTML Section 5: Linking to other pages

HTML Hyperlinks

Hyperlinks are the backbone of the Web. They provide a means to connect one piece of information (a web page, for example) to another piece of information. If you have designed two web pages, a hyperlink will provide a way to jump from one page to the other. If you have one long web page, a hyperlink can be used as a bookmark to help people jump from one part of the page to another, and back again. This is what a hyperlink looks like (the blue underlined text):

But let's discuss what happens when the link is clicked on.

What is a Hyperlink?

When you click a hyperlink to another website (assuming you are connected to the internet), this is what happens.
Your browser gathers the information about the link and sends the request to something called a naming server. The naming server translates the link text (www.homeandlearn.co.uk, for example) into a series of numbers. These numbers are called the IP address. These are needed because computers don't speak in a written language. So the computer needs something it can understand. An IP address is a set of four numbers separated by full stops (IP version 4). Each set of numbers is between 0 and 255. So when you click the link, the text address will be translated into an IP address, something like 213.209.156.97.
The IP address will be used to identify a particular computer. If the computer, usually the naming server, doesn't have the address in its database, it will pass the address further up the naming server food chain. If no naming server can find the IP address, the failure is passed back down to your browser. At this stage you'll probably see a 404 error message.
If the address is found, however, the IP address is sent to your browser. The browser then contacts the web server that has the web page you requested. The page is then sent to your browser. However, that's not the end because requests are done one at a time. If the web page has images, the browser will see this and then request that the images be brought back to the web page as well. One image at a time.

Uniform Resource Locator

A uniform resource locator, or URL, is commonly called an address. The URL of our web Page is http://www.homeandlearn.co.uk/. Let's break this down a bit.

http://
http stands for hypertext transfer protocol. A protocol is a set of standards that one computer uses to speak to another. There are quite a lot of different protocols. For web communications, the two most common protocols are hypertext transfer protocol and file transfer protocol (FTP). There�s another layer of protocols underneath this called Transmission Control Protocol/Internet Protocol (TCP/IP). The http in a web address is followed by a colon and two forward slashes.

www.homeandlearn.co.uk
This is the Domain Name, the part that gets translated into an IP address. The domain name is split into three parts, separated by full stops:

www The host name
homeandlearn The enterprise domain name
co.uk The top-level internet domain name. Others are .com (commercial), .org (organisation), .gov (government)

/
If no html page is specified, the forward slash tells the server to look for the default web page. This is usually index.html. The index.html page is one that you have created. That�s why naming the first page of your internet site index.html is so important.

The index.html Page

Your web site will probably have lots of individual web pages. Suppose somebody comes to your site for the first time. How does the browser know which of your many pages to load first? After all, your visitor may well have just typed this in the address bar:

www.homeandlearn.co.uk

The answer to the question is - "default page". When you buy web space with a web hosting company, you are given a folder to upload all your files. The hosting company will have already specified a default web page for that folder. This is usually index.html. So if somebody types the above address, the browser will look for the default page. You don't have to type this:

www.homeandlearn.co.uk/index.html

The browser already knows to serve up the default page. If you haven't uploaded a page called index.html then your visitors may well get an error page when going to your site. So it's important that you have a web page called index.html, as this is the first page on your site your visitors will see when typing your domain name into the browser's address bar.

OK, we've learnt what a link is, and what happens when you click one, but let's see how to create them.

Linking to other Web Pages

Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A" in the tag is then followed by an attribute. For a link to another web page, the "A" is followed by "HREF". To set a bookmark in the same page, the "A" is followed by "NAME", which you'll see how to do later.
Take a look at this example, which is a link to the popular search engine Google:

<A HREF = "http://www.google.com/">Google Search Engine</A>

Notice where all the angle brackets (< >) are in the link. After the first one, we have the "A" part of the tag. Then we have the HREF part, signifying a link to another web page. After that comes an equals sign (=). After the equals sign comes the address of the web page itself. The address is case sensitive, so if there is a capital letter in the address, make sure to include it. This addresswww.google.com is different from this address www.gOOgle.com.
After the address comes the right angle bracket ( > ). Next comes the text that people see, the text you want them to click on. To close an anchor link, you use the end anchor tag. Which is this: </A>
But let's get some practical work done.
Open up your template text file. Click File > Save As from the menu in Notepad (or whatever text editor you are using). When the Save As dialogue box appears navigate to your HTML folder:

So we are going to save the new web page outside of the pages folder.
In the file name box, type index.html. Make sure the Save As Type area says All Files, if you use Windows. Before you click the Save button your Explorer window should look like this:

When the Save button is clicked, you should then have a web page called index.html in the HTML folder:

What we're going to do is to place a hyperlink on our index page. When this hyperlink is clicked we'll tell the browser to load a page called about.html. We'll save this new about page in our pages folder.
So, use your template text file to create a new web page. When you save the page, double click the pages folder to move inside it. In the file name box, type about.html. Then save your page:

So, we have a web page in the HTML folder and a web page in the pages folder. We now need to link them together.
Open up you code for the index.html page. Insert the following line between the two BODY tags:

<A HREF="pages/about.html">About this site</A>

Your code should look like this (we've added a TITLE):

Save your work and load the page in your browser. You should see this:

And that's a hyperlink! Notice that the only thing on the page viewable to the visitor is the text "About this site". The code we wrote turns it from normal text into a link that people can click on. The code itself was this:

<A HREF="pages/about.html">About this site</A>

So to turn text into a link you start with an angle bracket followed by the letter A. After a space, type HREF. An equal sign comes next. The page you want to link to goes between quotation marks. But notice we started with the folder name: pages/about.html. This says, "Look for a page called about.html. This page is in the pages folder".
Type a right-pointing angle bracket to end the first part of the link code. The text you want people to see comes next "About this site". To wrap it all up, you need the closing hyperlinks tag : </A>.
When you click your link, you should find a blank page loads in the browser. If you look at the address bar, you should see it says about.html on the end. You have successfully linked to a new page!
To get back to the index page, you need another link.
Open up your code for the about.html page. For the about page, we need to construct the correct HREF. We can't do this:

<A HREF="pages/index.html">Go to the Home Page</A>

The above HREF is pointing to an index page in the pages folder. But our index page is not in this folder. It is in the HTML folder, which is one folder up from pages. Just like we did for images, we can use two dots and a forward slash:

<A HREF="../index.html">

Two dots and a forward slash, remember, mean "Go up one folder".
So insert the following code in your about.html page:

<A HREF="../index.html">Go to the Home Page</A>

Save your work and refresh the page in your browser. Click your hyperlink on the about.html page. You should find that the index page will load. When you click the link on the index page, the about page will load.

Exercise
Create a third web page. Save it in your pages folder and call it contact.html. Create a link from the index page to this new page. Create a link back from the contact page to the index page.

When you complete the above exercise, you will have two links on the index page. They might look like this:

You can use the HTML techniques you've learned so far to improve the look of these links. For example, you may want the links going vertically instead of horizontally. In which case, surround you hyperlinks code with P tags. Here's the code for two vertical links on the index page:

The result would look like this:

However, don't worry too much about the presentation for now as you'll see how to improve navigation links with CSS and HTML Lists a little later. But try this exercise.

Exercise
Have two links on each of your three pages. The about.html page should have links that lead to the index page and the contact page. The conact.html page should have links to the index page and the about page.

The tricky part about the exercise above is getting the HREF part right. Just remember that when the html pages are in the same folder you only need to type the name of the page you're linking to. So this:

HREF="page_name_here.html"

instead of this:

HREF="../page_name_here.html"

or this:

HREF="pages/page_name_here.html"

You're just using the same file referencing rules that you learned in the images section.

The Target Attribute

Just like the IMG tag, the A HREF tag can take attributes. One of these is called TARGET. The TARGET attribute is used to tell the browser where you want to open the link. For example, you can tell the browser to open the linked page in a new browser window. There are several values to choose from:

_blank
_parent
_self
_top

However, the only really useful one in HTML version 5 is BLANK. The default is SELF, so you don't need to specify a TARGET attribute most of the time. If you want the link to open up in a new window, the code is this:

<A HREF="pages/about.html" TARGET="_blank">About this site</A>

Notice the underscore character before the word "blank". Miss this out and your TARGET attribute won't work.
The other two TARGET attributes are for when your website uses something called FRAMES. Frames are going out of use, though, and are not recommended for HTML5.

Hyperlink Colours

You can set up your own colours for hyperlinks. The default is whatever the user has set in the browser, usually blue, with a blue underline. But you don't have to have blue. The A tag comes with three attributes that can help you to override the browser default:
LINK
Set the colour of a link before it has been clicked on
ALINK
Set the colour of a link when the link is clicked on
VLINK
Set the colour of a link after it has been clicked on
The A and the V above stand for Active and Visited. You use them like this:

<A HREF="pages/about.html" LINK="red">About this site</A>

So you select the attribute you want to use, and then choose a colour for your links. This can also be a hexadecimal or RGB value.
Try them out for yourself with the links in any of your three web pages. Bear in mind, though, that people expect a hyperlink to be blue with an underline - it's a visual clue that you're linking to some extra content. Also, link colours used this way are now out of fashion. It's better to use CSS styles for your hyperlinks. You'll see how to do this in a later lesson.

Other Types of Hyperlinks

Bookmark Hyperlinks

A bookmark link (commonly called an Anchor link) is useful when your web page is rather long, and users have to scroll down to read it all. You can insert Bookmark links to aid navigation. When users click on your links, they will jump to different section of your web pages. You can even use a bookmark link to jump to a different web page, and back to the same spot where they left.
There are two parts to the bookmark: The clickable link itself, and the place where you want to jump to.
The place where you want to jump to, the destination for the click, again uses the <A> tag. This time, the added attribute is not HREF but ID (it used to be NAME in previous versions of HTML). You then surround some text or image with the tag. Like this:

<A ID = "section1">In</a> this first section, we'll discuss Links

We've surrounded the word "In" with our destination bookmark. The name of the ID itself, the part after the equal sign, can be anything you like. But you'll use that ID in the Link part of the bookmark. Here's the actual link, the part people see and click on.

<A HREF = "#section1">Click here for Section One</A>

Note that we're back to the HREF attribute. This time, after the equal sign, there is a hash/pound symbol ( # ). After the hash symbol you type the ID you used in step one. You then type the text that people will click on. Finally, you close the tag with </A>.
You can add a bookmark to another web page, if you like. In which case, the link would be this:

<A HREF = "page2.html#section2">Click here for Section Two</A>

Note where the hash symbol is now - after the name of a web page. The ID of the destination bookmark follows the hash symbol. There is no space between the two.
The destination link itself would then go somewhere on page2.html. If you had another bookmark on page two, you could have the user jump back to the same spot where they left.

Email Links

An email link can be added to web pages, too. When people click on this email link, their Email software will start up. In the "To" box of the email software, your email address will appear. The code for an email link is this:

<A HREF = "MailTo:online@homeandlearn.co.uk">Email us</A>

Notice that the link is the HREF type. After the equals sign you have this:

Mailto:

Mailto is all one word, and is followed by a colon. Then you put your email address after the colon, without typing a space. You then type a right angle bracket ( > ) before typing the text you want people to click on to send you an email. The Anchor closing tag </A> finishes it all off.
And that's it for email address - quite simple!
Try the email code out in a web page, save your work and see what happens when you view the web page and click the email link.
There is, however, a big danger to using an email link in your web pages: spammers have written programmes called "bots" to crawl the internet looking for MailTo. If the "bot" finds it, your email address will be harvested. In short, it's better not to use the email tag. Much better is to use scripting for your email addresses. For example, he's some JavaScript that does the job better, as the spammers' automated "bots" can't read it:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

document.write("<P></P><Center><H1>Contact Me</H1></Center>")

document.write("<P align = Center>Click below to send me an email</P>")
var atSign = "@"
var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"
var wholeAddress = firstPart + ispP1 + atSign + ispP2 + ispP3

var mToPart1 = "mai"
var mToPart2 = "lto:"
var mt = mToPart1 + mToPart2
var hrefP1 = "<a href= " + mt + wholeAddress + ">Click here to email me</a>"

document.write("<Center>" + hrefP1 + "</Center>")

</SCRIPT>

You don't need to be able to understand all of the above code. But notice how the email address is chopped into pieces with these lines:

var atSign = "@"
var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"

The address is them reassembled later and written out.

Links to other files (Word documents, ZIP files, PDFs, etc)

You can place a link on your web page to files other than images and web pages. A link can be made to all sorts of different file types. For example, if you have PDF file that you want to share with others, the code would be this:

<A HREF = "MyPDF.pdf">Download my PDF</A>

When the link is clicked on, the browser will see the file extension .pdf and try to open it up. You can have the document open up in a new window by adding TARGET="_blank" to the A HREF code, just like you did above.
You don't have to add anything special to have people download files like PDFs, or Word documents, or zipped files. Just a normal link with the name of the file after the HREF part will do it.

Images as Links

You can turn images into hyperlinks. The only thing you need to do is surround your image with an A HREF tag. Like this:

<A HREF="pages/about.html">

<IMG SRC="nav_icon.gif"> About this site

</A>

The result would be this, in the Firefox web browser:

However, Internet Explorer will display the icon like this:

The icons now have a blue rectangle around them. This is because they are hyperlinks first and images second. To get rid of the blue rectangle you can add this to the IMG tag:

<A HREF="pages/about.html">

<IMG SRC="nav_icon.gif" BORDER="0"> About this site

</A>

So we've set the BORDER attribute to zero. This gets rid of the blue rectangle in Internet Explorer.

CSS and Hyperlinks

If you're formatting a hyperlink, you can place all the formatting in a CSS Style. In the style below, we've specified an Arial font for all of our links:

This style will apply to all the hyperlinks on the page. You don't need to add any CLASS attributes to the A HREF tag because we're using the HTML selector A.
If you want to set up colours for your links, you can do it like this:

A:link {

color: red;

}

Notice that a colon follows the A this time, then the word "link". In between the curly brackets we've set the colour to red.
If you want to use the ALINK attribute, it's this:

A:active {

color: green;

}

The VLINK is this:

A:visited {

color: blue;

}

One more style that you may be interested in is this:

A:hover {

color: red;

}

With the above style, whenever you move your mouse over a hyperlink the colour will change to red.
When we used the colon above we were using something called a Pseudo Class. These are just extensions to the normal CSS class rules. Another way to extend classes is by inserting your own CLASS names between the HTML selector and the property you want to change. For example, examine the following code:

A.MyHoverColor:hover {

color: red;

}

To use the above code, you apply a CLASS attribute to your hyperlink:

<A HREF="pages/about.html" CLASS=" MyHoverColor ">About this site</A>

Now, only this link will change colour when you move your mouse over it, the rest will behave normally.
You don't need to add a value at the end (the :hover bit, for example). Suppose you want the first link to be an Arial font with no underline, and the second one to be 20 pixel Verdana. You could set up two Pseudo Classes. Like this:

You'd then apply them like this:

<A HREF="pages/about.html" CLASS="FirstFont">About this site</A>

<A HREF="pages/contact.html" CLASS="SecondFont">Contact Us</A>

Notice how we've switched off the hyperlink's underline:

text-decoration: none;

Try out the above code and see the results in your browser. Try using a different hover colour, as well. (Make sure the hover code comes last, as some browsers will ignore it, otherwise.)
But extending your Classes this way enables you to have more control over most of the elements on your page, and not just hyperlinks.

External Stylesheets

The CSS you have been using so far has been placed in the HEAD section of your HTML code. A better place to put all your CSS, however, is in an external file. (By this, we mean a separate file.)
In a new text file type the following (click File > New in Notepad, if you're using this):

This is going to be our external stylesheet. It has just one Class set up, a Pseudo Class for the hover style. Underlines are switched off when the mouse is over the link, and the text colour turns red.
The main thing to notice here is that we don't need any opening and closing STYLE tags: you just type your selectors and curly brackets.
Click File > Save in Notepad to save your work. When the dialogue box appears, navigate to your HTML folder and create a new folder called css. Move inside of this folder. In the File Name box, type styles.css. Make sure that Save as type read All Files, if you're using Windows. After you have saved your new document, your explorer window should look like this:

When you go one folder up to your HTML folder you should have this:

So that a web page can see our new external stylesheet, you need to add some code in the HEAD section.
Open up your about.html code. Add the following in the HEAD section:

<LINK REL = Stylesheet TYPE ="text/css" HREF ="../css/styles.css">

Your code should look like this:

To link to an external stylesheet, then, you start with the word LINK, after a left-pointy bracket. The other three attributes are these:

REL=
TYPE=
HREF=

The REL stands for relationship, meaning the relationship between this about.html file and the document you're going to be pointing to. REL can take many other values, but only Stylesheet is commonly used.
The TYPE refers to something called a MIME type. For stylesheets, you need the value "text/css".
The final attribute is HREF. This is the path to your CSS file. It is used in exactly the same way as for hyperlinks. Note the path for us:

HREF ="../css/styles.css"

The link is in the about.html page. The location of the stylesheet is one folder up, hence the two dots and the forward slash, followed by the folder name css. If our stylesheet was in the same folder as the about.html page we could have just done this:

HREF ="styles.css"

But save your work and load up your about.html page in your browser. Move your mouse over your hyperlink. If all went well then it should turn red, and the underline will disappear. If it doesn't, make sure your file referencing is OK, and that you have your stylesheet in the right place.
Placing all your CSS code in an external stylesheets is much better than placing it in a particular web page, as you can just make changes to the external stylesheet and it will affect the whole site. For example, if your H1 headings are all blue, it could take you many hours of work to change them to red, if you have placed CSS code in all the web pages. With an external stylesheet, you only have to make one change and your site is updated! So if you can, always use external stylesheets.

Using HTML Lists to aid Navigation

You have already seen how to create HTML lists. However, one of the most popular uses of the HTML list is for navigation. You'll see how this works now. What we'll do is to create this type of navigation list:

When the mouse is over one of the above links, you'll see this:

The above navigation list starts out as a simple unordered list of hyperlinks:

You then use CSS to change the styling of the HTML list. Let's see how.
Open up the code for your about.html page. At the top of the page, change your stylesheet link to this:

<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/nav_list.css">

We're going to be creating a stylesheet called nav_list.css, and the above code places a link to it in the HTML.
To create the unordered list, change your code to the following:

What we have here is an unordered list with six list items. Each list item is a hyperlink. We've only got three pages, so the HREF parts have been copied and pasted. Notice that each hyperlink is placed between two LI tags.
The other thing to notice is the DIV tags surrounding the unordered list. We'll apply a CLASS to these DIV tags. This will affect anything between them. As an example, take a look at the following DIV with a style applied:

Here's what the above code will look like in a browser:

The only thing we've done here is to apply a border around some text. Notice that the border stretches right across the page. We can apply some padding, a background colour, and float the DIV to the left:

When we do, it will look like this:

Because we floated the DIV left, the border has now shrunk. The size is the width of all the text plus the 30 pixel padding we specified.
The thing to bear in mind here is that anything between the two DIV tags is affected.
Back to lists, then. We can apply some styling to the unordered list that sits between our two DIV tags.
Create a new CSS file. Save it to your CSS folder and call it nav_list.css. Now add the following CSS to your new file:

.navigation {

float: left;
font-family: Geneva, Arial;
border: 1px solid #000000;

}

Don't forget the full stop (period) at the start of navigation.
Go back to your about.html page. Add the CLASS information to the DIV tag (in bold below):

Save your work and reload your about.html page in your browser. Your list of hyperlinks should look like this:

We have a border around the links, and also a change of font. The DIV has also been floated to the left.
Back to the CSS file. Add this new rule below the navigation one:

.navigation ul {

margin: 0px;
padding: 0px;
list-style-type: none;

}

Your text file should look like this:

We're extending the navigation CLASS with this line:

.navigation ul {

By doing this, we can just home in on the UL part of the list. What we're saying is, "look for the navigation class, and then the UL item. Apply the style between curly brackets to just this part".
The style we're applying is to have no margin and no padding. But the important part is this line:

list-style-type: none;

The list style is the bullets. We're switching them off altogether with the value none. Other values for the list-style-type property are:

Asterisks
box
check
circle
diamond
disc
decimal
none
square

As you can see, there are lots to choose from (there's even more than shown here). However, not all are supported in every browser.
Save your work in your CSS file and refresh the web page in your browser. The result is this:

The black border is completely surrounding the hyperlinks now. And the bullets have disappeared.
We can continue the styling of our list by specifying only the A parts of the list items. Add the following rule to your CSS code:

.navigation li a {

}

Again, we're extending the navigation class. This time, we're drilling down even further, picking out the LI tag then the A tag, with a space separating the three elements. (This is not case sensitive.)
Between the two curly brackets, add the following CSS properties and values:

display: block;
padding: 2px;
width: 180px;
color: #0000FF;
background-color: #D0DBF0;
text-decoration: none;

Your CSS code should look like ours below:

We'll get to the display: block part soon. But the other five properties set the padding for the hyperlinks, a width of 180 pixels, a text colour and a background colour behind the text. The text-decoration switches off the underlines for hyperlinks.
Save your work and refresh your browser. Your navigation links will then look like this:

With these new styles applied, we have a background colour with underlines switched off. Notice that there is more space between each link.

Exercise
Play around with the values for your new CSS properties. Try changing the padding and the width to see what happens. Experiment with different colours.
Exercise
In the first CSS rule, we have floated the DIV to the left. Change this so that it floats to the right. Change it back when you're done.

To get the background colour to change when the mouse is over a hyperlink, we need to just home in on the hover property. You do it like this:

.navigation li a:hover {

background-color: #00DBF0;

}

So we still have .navigation li a. After the a, however, we have a colon followed by the CSS property hover. In between the curly brackets of this new rule, we've selected a different colour.
Add the new rule to your own CSS code. Save your work and refresh in the browser.
If you want to, you could also change the colour of the link when someone has clicked on them:

.navigation li a:visited {

background-color: red;

}

The only thing different is the word visited instead of hover.
Here's what your complete CSS code should look like, though:

And here's a reminder of what your browser should look like when you move your mouse over a link:

Horizontal Lists

Your navigation links don't have to be vertical. You can have horizontal links as well. The way this works is by changing the display property from block to inline. The property block means to set out the elements one top of the other. The property inline means keep them on the same line.
Examine the following CSS code:

It's not that different from the code you have.
With your nav_list.css open, click File > Save As. Change the file name tonav_list_horizontal.css. In the HTML for your about.html web page, change the file reference for your CSS LINK tag:

<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/nav_list_horizontal.css">

Your about page will now be getting its CSS styles from the new nav_list_horizontal page.

Exercise
Compare your old code to the new CSS code above. Most of it is the same. But change the lines that aren't.
If you complete this exercise, your browser should look like this:

Our list is now going from left to right, at the top of the page. This is all the result of display: inline, plus one or two more tweaks.

We'll leave HTML lists and move on. For more navigation lists, check out this site:

http://css.maxdesign.com.au/listamatic/

There's some very creative use of navigation lists at the above site. Well worth a visit!

CSS used in the Lists section

CSS Property	CSS Value	Explanation
a:hover	A colour	Used for mouseover colours
a:visited	A colour	Used for visited pages colours
display	block, inline	Blocks of elements or all in a line
height	A px or % value	Set a height for an element such as a DIV or P tag
list-style-type	none	Use to switch off bullets for lists
text-decoration	none	Switch off the underlines for hyperlinks
width	Red	Set a width for an element such as a DIV or P tag

Images and DIVs

HTML Tag	Attributes
IMG	SRC, ALT, HEIGHT, WIDTH, USEMAP
DIV
FIGURE
FIGCAPTION

Hyperlinks

HTML	Explanation	Attributes	Options
A HREF	The HTML for a hyperlink	TARGET	_blank _parent _self _top
		Mailto:	An email address
A ID	Jump to a section of your page, a bookmark