Please note:
Colour By Numbers has become a tutorial only site, the graphics linkware site can be found at:
Indigo Moon Graphics

:: Welcome :: :: Fonts :: :: HTML Tutorials :: :: PSP Tutorials :: :: Stationery Tuts :: :: Links :: :: Webrings :: :: GuestBook ::

Fonts Directory

Your First Page

Inserting Backgrounds

Inserting Graphics

Linking Pages

Choosing Fonts

Tag Glossary

Free Backgrounds

Linking Pages

By now I'll assume you have understood the basics of what you have learnt on the preceding pages. - I know ... I know - when you assume you make an ass out of u and me - ok - scratch that. ;o)

So now what we want to do is link the pages together. So we need the <a href=""> and </a> tags. These tell the browser where to go (in a nice way).

One thing to remember here, when you are travelling from one page to another, always remember to create a 'back' link. We've all been to pages where you click one link after another until you eventually lose sight of where you are, and want to get back to the main page. There's nothing worse than having to press the browsers back button and losing sight of just how many pages you have travelled through.

Okay, onto the creation of a link.

For ease I'm going to use the last page we worked on - so open it up in your notepad. I'll show you both a word link as well as a graphical link. So download these little graphics here:



Here is what you need to do, to link from one page to another. The words "My Second Page" are going to be the linked words.

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<center>
<img src="myfirstpagehead.gif">
</center>
<br>
<br>
<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
On to <a href="secondpage.html">My Second Page</a>
</body>
</html>


View Example

When you click on the link, you'll also find the next page has a back button as well.

NOTE: When making links always make sure you type the correct spelling for each page in the <a href=""> tags, don't mix your upper and lower cases and always makes sure you put in the </a> tag at the end of the link, other wise the whole page below your <a href=""> will link to the next page.

Now we'll use our little friend Pimboli to take us from one page to the other.

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<center>
<img src="myfirstpagehead.gif">
</center>
<br>
<br>
<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
On to <a href="secondpage.html"><img src="pimboli1.gif"></a>
</body>
</html>

View Example



And for the page to get back again:

<html>
<head>
<title> My Second Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<center>
<img src="myfirstpagehead.gif">
</center>
<br>
<br>
<p> Welcome to my second page...
On to <a href="firstpage.html"><img src="pimboli2.gif"></a>
</body>
</html>


Okay, I'll admit that blue/purple box around the graphics looks terrible. So this is how you code it to remove the box.

<html>
<head>
<title> My First Page </title>
</head>
<body bgcolor="#ff4040" background="bg1.jpg">
<br>
<br>
<center>
<img src="myfirstpagehead.gif">
</center>
<br>
<br>
<p> Hello.
<p>How are you?
<p>This is my first page.
<p>Karen is a twit!
On to <a href="secondpage.html"><img src="pimboli1.gif" border="0"></a>
</body>
</html>

View Example

Now that looks much better!

If you've made it this far - well done! Give yourself a pat on the back - or - get someone who loves you very much to come on over and stand behind you to give your shoulders a rub, because if - like me - you've been sitting here for hours, your shoulders will be killing you.

Now you have all of this straight in your head (??)

- we'll move on to choosing fonts.

:: Welcome :: :: Fonts :: :: HTML Tutorials :: :: PSP Tutorials :: :: Stationery Tuts :: :: Links :: :: Webrings :: :: GuestBook ::

This site is best viewed at 1024 x 768
IE6 Compatible

This website is owned and maintained by Kaysea.
All Rights Reserved.
2002 - 2004