XHTML Tutorial - Chapter 6: Links

If there were no means to link from one web page to another, the world wide web would obviously be a pretty boring place. You could even say the whole concept of the web and what made it so popular in the first place is this ability to create links between pages. So let's take a look at how it's done!

First, let's set up a simple example with a text containing a phrase in bold letters that we would like to link to another web site:

<html>
  <head>
    <title>Helping Google achieve world domination</title>
  </head>
  <body>
    <h1>An example of a link</h1>
    <p>
      If you would like to search for something on Google, <strong>Click here!</strong>
    </p>
  </body>
</html>

Obviously the "Click here!" is what we want people to click on. But how do we achieve this? The answer to that question lies in the anchor tag, <a>.



The anchor tag can be used for more than just clickable links, but since that is its main use we'll only look at that for now. By now, you've probably already guessed that you're supposed to stick <a> and </a> around the phrase you want to make into a link, which would be correct. But where do we actually supply the URL address to link to?

The answer is, we add an attribute called href="" to the first <a> tag, in which we put our URL. The final example looks like this:

<html>
  <head>
    <title>Helping Google achieve world domination</title>
  </head>
  <body>
    <h1>An example of a link</h1>
    <p>
      If you would like to search for something on Google,
      <a href="http://www.google.com">Click here!</a>
    </p>
  </body>
</html>

Not as hard as you thought it would be, eh?



Now, before we wrap this up, there's just one more little thing you might like to know - how to open the link in a new browser window. You do this by supplying a target. Set the target value to "New_". Like so:

<html>
  <head>
    <title>Helping Google achieve world domination</title>
  </head>
  <body>
    <h1>An example of a link</h1>
    <p>
      If you would like to search for something on Google,
      <a href="http://www.google.com" target="New_">Click here!</a>
    </p>
  </body>
</html>



That's it! You now know all that's worth knowing about linking :o)





< Previous: Bold and Italic text

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl