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:
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:
- At where you want it to go:
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
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...
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
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:
If you use this method, you will still need to use the
<BODY bgcolor="#hex colour code" text="#hex colour code"
link="#hex colour code" vlink="#hex colour code">
<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
<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:
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">TEXT THAT YOU WANT THE LINK TO SAY</A></FONT>
<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>
SIZE="x"... above should be replaced with what font size you want, e.g.
- 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:
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).
<A HREF="filename.htm" style="text-decoration: none;
color: #00ff00; font-size: 10pt; font-weight: bold;"> bit of text </A>
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...