Blog

Links within pages

If we create another page of a website, we can link to it within our website using the <a href> </a> tags.

e.g.

<a href="about_me.html">About me</a>

If the file ‘about_me.html’ is in another folder above the root, we need to provide that folder name.

<a href="/mysitepages/about_me.html">About me</a>

If we are providing a link to an external site, it’s good, when the person clicks on the link, for a new tab to open in the browser, so they don’t easily navigate away from your site, this is done using the target attribute.

<a href="www.google.com" target="_blank">Google</a>

Instead of text for a link, we can use CSS to create a container which then becomes the actual link providing it’s in between the opening <a href> and the closing </a>

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link href="https://fonts.googleapis.com/css?family=Merriweather:300i,400,700" rel="stylesheet">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <h1>I'm creating a link below</h1>
    <a href="http://www.google.com" target="_blank">Google</a>
    <a href="http://www.bing.com" target="_blank">
      <div>

      </div>
    </a>
  </body>
</html>

style.css

H1 {
  font-family: 'Merriweather', serif;
  line-height: 50px;
  font-size: 20;
  font-weight: 400;
}

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

Gives the page looking like:


Clicking on the text ‘Google’ opens a new tab and takes the user to the Google page. Clicking on the red box, which is now behaving exactly like a link, opens a new tab with the Bing website in it.

Leave a Reply