14. Linking things

So it’s time to address one of the key reasons people get stuck on the Internet…hyperlinks! A hyperlink is how you create anything that links to something else and really is a fundamental web design concept.

The “<a>” tag
The “anchor” tag is how you create a link within your page. In our tutorial, our menu items will naturally have to link to their respective pages. This is done via code much like the following:

<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>

You’ll notice that inside my “a” tag I’ve included an attribute called “href“. This is the attribute that dictates where my link is supposed to go when you click on it…a pretty important attribute I think you’d agree! Between my open and close “a” tag is what becomes a link. In my case it’s just a word but you could put a picture in there if you wanted.

The next most important thing to know about links is how you reference another object. There are two important ways to reference another file in HTML, Internet Addressing and Relative Addressing.

Internet Addressing
This one is easy, if you want to reference a page or file on the Internet then you simply copy and paste it’s address into your “href” attribute:

<li><a href="http://www.google.com">Home</a></li>

In this case, my “Home” link would end up taking us to Google (not what I’m after but I’m just demonstrating how it works). The main thing to note about this is that you MUST include the “http://www.” bit at the front, HTML pages won’t just add it on like a browser address bar will!

Relative Addressing
This is how you get a link to open up another file that is within your project folder hierarchy. You may remember the following line from our “index.html” file:

<link rel="stylesheet" type="text/css" href="css/style.css" />

You can probably guess how this “href” works but in case you haven’t it means:

  1. Relative to the folder where this file is (i.e. “index.html“)…
  2. Find the folder called “css“…
  3. Go inside this folder and find the file called “style.css“…

Finding the correct path from the file you’re creating to the file you want to open is what relative links are all about. As we encounter more of these they’ll start to make more sense.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>