Euro PC Solutions Blog

HTML – Creating Links

In the last chapter I taught you how to create a simple XHTML page. I agree that it was very ugly, but it was still an XHTML page. You have learnt a lot of things in one go. To give you the time to remember and get used to the code this lesson will be a lot easier than before.
In this chapter we’ll learn how to make links between your pages.

I suppose that everybody knows what a link is : an image or text that you can click on to go somewhere else. We can create a link from a page a.html to b.html but we can also create links towards another web site (ex : http://www.europcsolutions.com). In both cases the links work the same way.

Before showing you the XHTML code to create links, I must absolutely teach you the difference between absolute links & related links.

Related Or Absolute ?

As I told you there are two different types of links :

• Internal links in the site : normally your site will have several pages (or it won’t have a lot in it !). If you want to link from one page to another, mainly you should use related links. A related link is a short link and gets the address of the target file in relation to the current address. ex : folder/target.html.
• Links to other sites : They are links for example towards http://www.europcsolutions.com or towards a specific file in another site (ex : http://www.europcsolutions.com/file.html). These links are absolute links and on the contrary to related links, they often start with http://.

At first glance the easiest links to use are absolute links :
http://www.europcsolutions/link.html
…is an absolute link. Not very complicated but a bit long to write.

Now suppose that you have two XHTML pages that are in the same folder on your hard drive (or on a server) :
C:/site/source.html
C:/site/target.html

You want create a link from source.html to target.html. That is very easy, as the files are in the same folder you just need to write target.html !

If the files aren’t in the same folder :

• If your file target.html is in a sub-folder, for example :
  C:/site/folder/target.html
  The file source however is still in C:/site/source.html
  You need to write the name of the folder first folder/target.html. If there are several sub-folders you just write them one after the other :
  
  folder/folder1/folder2/target.html

  Do not confuse the anti-slash () of Windows : on the Internet, we ALWAYS use slash (/)

• Lets imagine the same scenario with the roles inversed now. target.html is in the parent folder, for example in :
  C:/site/target.html
  The source is in C:sitefoldertarget.html
  In this case we simply use ../ to go back a folder. In our case the path to target.html would be ../target.html

I don’t want to lose you with these new and slightly abstract notions. You’ll see through the practical exercises how easy it really is. As in most web sites we will work mainly with related links and for starters we’ll just put all of our html files in one folder so you’ll just need to write the name of the page you want to link to, for example page.html.

Linking To Another Page

Right, now that that’s out of the way, we can start the proper stuff

To make a link we use the tag <a> (it’s easy to remember )
We must add the attribute href to indicate the address that we want to go to.

We’ll start by doing something very important : a link to the euro pc solutions blog ( how could you live without knowing how to do that ?)

<p>Hey! I know a wonderful site : <a href="http://blog.europcsolutions.com">Euro PC Solutions</a><br />
Don't hesitate to visit it, it is <em>really</em> good.</p>

You see, it’s really easy ! You put your text between the tags <a> and </a> and indicate the address of the page with href=”".

If you are creating a link towards a page whose name contains & like :
http://blog.europcsolutions.com/?s=html+tutorial&x=35&y=16
You need to replace all the & with &amp; like this:
http://blog.europcsolutions.com/?s=html+tutorial&amp;x=35&amp;y=16
You won’t notice any difference but this is necessary for your site to respect the standards of XHTML.

We’ve just created an absolute link towards another site (http://…). Now we will see how to create a related link.

Create 2 pages : source.html & target.html
source.html contains a link in it to target.html, the 2 pages are in the same folder. Copy the following code :

source.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Source Page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>source.html</h1>
     <p>You are in the flie source.html<br />
     Would you like to visit <a href="target.html">the page target.html</a> ?</p>
</body>
</html>

target.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Target Page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>target.html</h1>
     <p>Well done ! You have just got to target.html using a link !</p>
</body>
</html>

Well, the whole idea is there : the link is <a href=”target.html”> which is a lot shorter and will be quicker to find as the browser knows it doesn’t have to look all over the internet for the page. However in this case the pages are in the same folder. If target.html was in a sub-folder we would have had to write the link as I explained earlier : <a href=”folder/target.html”>

Adding Information Boxes To Links

This isn’t necessary, but if you want to, you can add a tooltip using the title attribute. In this case a small box will appear when you pass your mouse over the link. It will look like this :

This can be useful to let visitors know what to expect before having clicked on the link.

Here’s the code :

<p>Go and see <a href="http://blog.europcsolutions.com" title="Web Design Tutorials">Euro PC Solutions</a></p>

Links To Open A New Window

And if I want my link to open in a new window ?

It’s not possible.
I know a lot of sites do it, but it doesn’t respect the standards of XHTML.

It’s a decision that was taken : so now we can’t force our links to automatically open a new window without breaking the standards of XHTML. This is to avoid disrupting the navigation of the visitor who doesn’t necessarily want 50 different windows open (ok, maybe I’ve exagerated a little there ).
It’s up to the visitor to decide himself if he (or she) wants to open a link in a new window. He needs to do ctrl+shift+click to do this.

Because of this I won’t be teaching you how to open links in a new window however I will teach you how to open a new tab.
It is really easy : all you have to do is add the attribute target=_blank to your link.

Example :

<a href="http://blog.europcsolutions.com" title="Web Design Tutorials" target="_blank">Euro PC Solutions</a>

Links To Send Mail

If you want your visitors to be able to send you a mail, you can use “mailto” links. Nothing changes in regards to the tags, it’s just the href attribute that you’ll need to change as follows :
href=mailto:name@email.com

So you simply need to make a link starting with mailto: and write the email address you want to contact. An example :

<h2>Contact Us</h2>
<p>To contact us, <a href="mailto:info@europcsolutions.com">click here</a> !</p>

When you click on the link, a new empty message opens, ready to be sent to your email address

If you want the subject or body to be filled in for the visitor simply add Subject= or Body= with an & between each field you want filled in and a ? between the fields and the address. Here’s an example :

<h2>Contact Us</h2>
<p>To contact us <a href="mailto:info@europcsolutions.com?Subject=Put your subject here&Body=Put your message here">click here</a> !</p>

As you can see the subject and body fields have been filled in with your text !

Links Towards Anchors

Errmmm, what is an anchor ?

An anchor is a kind of bookmark that you can put in large XHTML pages.
If your page is very big it can be useful to insert links going straight to a certain part of the page.

To create an anchor, you have to add the attribute id to the tag you want to act as an anchor. This can be applied to any tag, a heading, image or paragraph for example.
Use the attribute id to give a name to the anchor which will be used afterwards to be able to link to the anchor. For example :
<h2 id=”my_anchor”>Title</h2>

After that you just make a link as usual, only this time the attribute href will contain a # before the anchor name. Example :
<a href=”#my_anchor”>Go to anchor</a>

Normally, if you click on the link it will take you lower down the page (on the condition that your page has enough lines in it to activate the scroll bars).
Here’s an example of a page with a lot of text and containing anchors (the text is the print and web industry standard : lorum ipsum. Don’t worry it doesn’t mean anything, it just fills the page to allow us to see the layout)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Anchors & Links</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>My Big Page</h1>
     <p>
          Go straight to the part talking about :<br />
          <a href="#cooking">Cooking</a>
          <a href="#skating">Roller Skating</a>
          <a href="#arc">Archery</a>
     </p>

     <h2 id="cooking">Cooking</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>

     <p>Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.</p>

     <p>Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.</p>

     <h2 id="skating">Roller Skating</h2>
     <p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>

     <p>Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.</p>

     <p>Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.</p>

     <h2 id="arc">Archery</h2>
     <p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>
</body>
</html>

If nothing happens when you click on the links, there’s not enough text to activate the scroll bars. In this case just add more text to the page, or shrink the size of your browser a bit so that you have to scroll to read all the text.

The attribute id gives a unique name to each tag to use it as a bookmark. And believe me you haven’t heard the end of this attribute.
Here we are using it to create a link towards an anchor but in CSS it will be useful to “find” a precise tag, you’ll see

Links To Anchors On Other Pages

The idea is that you can open a new page AND go straight to a certain part of the page.
Really it’s quite easy to do. You simply have to type the name of the page, followed by #, followed by the name of the anchor.

For example :
<a href=”target.html#skating”>
…will take you to the page target.html, directly to the anchor called skating.

Here is a page containing 3 links, each one going to one of the anchors from the last example :

<h1>The Megamix <sup>TM</sup></h1>
<p>
     Go to somewhere on another page :<br />
     <a href="anchors.html#cooking">Cooking</a><br />
     <a href="anchors.html#skating">Roller Skating</a><br />
     <a href="anchors.html#arc">Archery</a>
</p>

Pffff, it’s too easy
Right we’ll stop there, if not even 10 year olds will be able to do XHTML without any problems

(ps : if you are 10 years old & are reading these lines, don’t hate me ! I know that there are several readers of that age, I was just saying that as a joke )

So, as a quick summary, there are 2 types of links :

• Links to other pages, by far the most common
• Links going to anchors

There is also, as you saw, the possibility to go to anchors on other pages.
The main aim of this chapter was to show ou the difference between related links and absolute links, and to teach you how to write related links. If you haven’t understood don’t hesitate to re-read the lesson or ask us.