The HTML Files: A web site design and HTML tutorial brought to you by Didilogix.com.

3.1 Internal or Relative Links

So, you want to link to your other stuff? Here's how...

A well designed site has sufficient internal (or relative) links to make it easy for the visitor to jump quickly - or navigate - to other pages, BUT also so they can get back to where they came from easily. You design relative links pretending that the "back" and "forward" buttons of a browser don't work, and thinking about any ways you can make things easier for your visitors!

Text Link to a Page on the Same Site

<A HREF="filename.htm"> bit of text </A>

...where "filename.htm" is the actual name of the HTML file to which you wish to link and "bit of text" is anything you like - a description of where you are linking to would be useful, I guess! Note that you may not need the space before or after the "bit of text" - if there is a space before the < start of the tag then you won't need a space - just experiment!

Here's an example of a link in the real world to To page 2-5 of this site. Have a look at the source. How simple is that?!

Text Link to a Specific Location On The Same Page

At the link: <A HREF="#keyword">e.g. TO TOP</A>
At where you want it to go: <A ID="keyword">Text</A>

So, you put the code at 1 above where you want the actual link to be. Then you put the code at 2 above by the part of the page you want the link to jump to. Look at the source code of this page and look for the text at the very bottom that starts with "NEXT:"... Can you see the code <A ID="Next"> next to the word "NEXT:"? That's what is called the placeholder. You can probably see from this example that you can use any text you want in the link, just so long that the link - and the placeholder - share the same name and the name should be only one word! Now, if you go back to this actual web page and click HERE (I have kept the underline to make the link stand out) it should jump you straight to the bottom of the page... Cool huh!

Text Link to a Specific Location on a Different Page Of The Same Site

Note that in the above two topics, I use "of the same site" in the heading! This is because, unless you manage the other site yourself, it is unlikely that there will be placeholders exactly where you want them on someone else's site for you to link to unless you ask the webmaster to do it!

At the link: <A HREF="filename.htm#keyword">Text</A>
At where you want it to go: <A ID="keyword">Text</A>

As an example, I have put the code <A ID="Hello"> on the "NEXT:"... bottom part of the page "1.0 Welcome" (see the menu on the left), and the code I will use to link to that page is <A HREF="HTMLindex.htm#Hello">Link Text</A>. So what does this link do? Well, just Click Here to see what happens! Does it do what I meant it to? Yes it does, I just checked!

Removing Link Underlines

Don't you just hate the line that as default appears beneath the text used for links? Most web site designers do and they have a nifty trick to remove it. See the below code...

<A HREF="filename.htm" style="text-decoration: none;"> bit of text </A>

...and here's what it looks like. Cool huh! In fact, that bit of code is not HTML but is an example of an inline CSS code - like the one I introduced under "backgrounds" in the section 2.5 about Inlining Images. In fact, you can do a lot of other stuff with links such as change the colour - we'll explore that in the next bit below...

Playing with Link Colours

Text links will be displayed using the default colours (blue for links and purple for visited links) unless you specify otherwise using one of the three methods below:

In your <BODY> tag - remember that we specified page background colour and default text colour in the body tag back in section: "2.1 Page Layout"? Well, the body element can also take the attributes link and vlink, their variables being hex codes for colour. Note that vlink simply stands for "visited link" - what the text colour changes to when a user has clicked a link. Here's an example of a full body tag that includes code that defines the link text colour and the visited link text colour:
<BODY bgcolor="#hex colour code" text="#hex colour code" link="#hex colour code" vlink="#hex colour code">
If you use this method, you will still need to use the <A HREF...etc> stuff and the closing </A> either side of any links you want to create. And you will still need to use the bit of code mentioned in the previous section to remove the underline from the link if you want to do that too. If you want a link in the page to be different from this default you specified in the BODY tag, then you will need to use one of the methods below in addition to what you have put in the BODY tag.
Using <FONT...> tags - we introduced the FONT element in section "2.3 Text Formatting" so refer back to that at this point if you are unsure about this element and what you can do with it. To use this element to specify link colour (and size if you want that to be different too), you simply insert it outside the <A HREF=..> tag, as follows:
<FONT COLOR="#hex colour code" SIZE="x"><A HREF="filename.htm">TEXT THAT YOU WANT THE LINK TO SAY</A></FONT>
If you want to remove the annoying underline, no problem - the above just turns into:
<FONT COLOR="#hex colour code" SIZE="x"><A HREF="filename.htm" style="text-decoration: none;">TEXT THAT YOU WANT THE LINK TO SAY</A></FONT>
The x in SIZE="x"... above should be replaced with what font size you want, e.g. "3".
Using inline CSS look back at the bit above about "Removing link underlines" - see the bit in the code that says style="text-decoration: none;"? Well, you can add bits of code in the Style part of the code that specify things like font colour and size - you just have to remember to separate each part with a 5, otherwise it won't work! Have a look at the below:
<A HREF="filename.htm" style="text-decoration: none; color: #00ff00; font-size: 10pt; font-weight: bold;"> bit of text </A>
From the above, you can see that we've put in the colour green, made the font-size 10pt and the text bold (the font-weight bit).

So which is the easiest way to specify link colour? Well, I prefer to use the first method - if you get it right in your body tag, you don't then have to mess with other code in the page. The second method is a rather outdated form of HTML so I no longer use that. The third method is very useful if you want one particular link to be different from how you specified it in the first method (i.e. by using the body tag).

NEXT: now let's have a look at how to link to other people' stuff...

Didi Barnes is a member of:

The International Webmasters Association

© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.