Website Building → Tutorials → HTML: HREF Linking (Part 2)

Have you noticed how the World Wide Web is structured? How you get around from one page to another? Links!

Everybody links from here to there and back again and you can move around without having to worry about typing each address into the address bar! Well, here we go...

Links are very easy to implement, take a look at the following code:

<a href="http://www.benwiggy.com">Visit Benwiggy.com</a>
<a href="http://www.benwiggy.com" target=_blank>Visit in new window</a>
<a href="../index.php">Website Building homepage></a>

You can even link to points on a page:

<a name="top"> - place this at the point on the page you wish to link to
Now you can access it from anywhere using: <a href="page.html#top">Top of page</a>

Email links:

<a href="mailto:jobloggs@yahoo.com">Email Jo</a>

Points to note:

'/' in a path, e.g. href="/page1.html" takes you to the Root (top directory).
'../' in a path, e.g. href="../page2.html" takes you up a directory one at a time.
'./' is a way of saying "same directory", and is normally unnecessary.
You can combined '../' so that you get: "href='../../subfolder/page.html'".

Now try it out:

Try creating two pages, now link from one to the other and back.
Try using the #links to link to places on a page - make sure the page is long enough (e.g. use lots of '<br>' tags) to make this effective!
Try making use of complicated directory structures and link from page to page for a harder challenge!

→ Colors and backgrounds! →