Basic HTML

How To Add Links?

Links in a website are elements that you can click and to move you to a different website or a different part of the same website and so they link the pages together.

The easiest way for Aria to understand these is that they are like website catflaps; you use them to move from one place to another.

There are three steps to adding a link to your webpage. Firstly, as with all of the other HTML elements we’ve looked at, you need to add the correct HTML tag for a link to your code.

Links use the ‘a’ tag and so the initial HTML code for a link looks like this:

        <a> </a>
      

Why is it 'a'?

'h' for headings made sense, so why 'a'?

Good question.

Ermmm.

It stands for: Ah, I wonder where this link goes.

You don't know do you?

Ok, I do. It actually stands for: anchor

But to be honest, this isn't very memorable or clear on what it actually is.

So I prefer 'a' for 'Ah, I wonder where this link goes.'

The second part is to add something in your link element to be shown. This gives your user something they can see to click. Here is an example Aria wrote.

        <a>Pat me!</a>
      

And here is what Aria's example looks like. Notice how it changes colour when you hover your cursor over it. This is so users know that the text is a link and can be clicked.

While I think she means to say ‘click me!’ the code is correct and will display text much like paragraph text made with the ‘p’ tag. If you prefer you can include a p tag within the link element, to do this just write all the code for the paragraph element after the opening ‘a’ tag and before the closing ‘a’ tag, like this:

        <a><p>Pat me to learn about HTML tags!</p></a>
      

Here is the same code again, but this time the 'p' tag is used. At the moment there is no difference but when we look at CSS, you'll see that this method is preferable.

So that’s a link in HTML?

Almost, there is one bit missing.

What’s that? I’ve written the code for my digital catflap just like you said.

You have, but at the moment we don’t know where the catflap opens.

Aria's Catflap Takes Her To The Great Outdoors

The code written above is correct but cannot truly act as a link because it doesn’t connect to anywhere.

To go back to our catflap example, it’s like a catflap that doesn’t actually open and so doesn’t go anywhere. The code needs to include the location of the website which the link takes you to, whether it is another part of your website or a different website altogether; to do this you need to use the ‘href’ attribute.

      <a href=”LOCATION GOES HERE”><p>Pat me!</p></a>
    

The href attribute is used just like the id and class attributes in that it needs an equals sign and the value, or the next location in this case, goes in between the speech marks. It’s like a sign in a pet shop which tells you which aisle to look in for something specific.

When linking to other parts of your website you can simply use the name of the file you want to link to. When linking to other websites you need to use the full location, or full web address, of the page.

The examples below show code for a link to another page on this website; this particular file is not a HTML file but works just the same.

The second example is to another website and so includes 'http://www.' at the beginning. This is to tell the browser not look for this file on your computer or server but to go to the specific website.

      <a href=”what-are-html-tags.php”><p>Pat me to learn about websites!</p></a>
      <a href=”http://www.google.com”><p>Pat me to go to Google!</p></a>
    

When the href attribute is complete, it doesn't effect how the link looks. Below are the two links for the code above; notice how the first one doesn't differ from the earlier example even though it has a location associated with it now.

The first example is for a file on the same website; we call this a local file. The second example is to Google which is outside of our website and so is an external link. The address used in a link is often called a hyperlink but people will understand you perfectly well if you use the term link.

Practice coding links below. Try changing the 'href' attribute to another website and clicking the link to see if it works.

And if your digital catflap link does work, please come back.

      
    

Be careful when linking to local files which are not in the same folder as you may need to add the folder names and forwards slashes (which look like this / ) to write the correct location; this will be covered in more detail later when we add pictures.