One of the main features of web pages is how they link to lots of other web pages and locations. It's how you find more information on certain topics. If you've created a web site all about socks you might want to link to other resources on the web about socks. If your site on socks becomes quite substantial you will find it much better to separate your site into different pages and link them all together using links probably from a main contents page. You can also link to different points on the same page with links. Links are very useful and make it easier to navigate your way around the web.
Internal links are links that link to other pages in your own web site. These are very easy. The tag looks like this <A HREF="page.htm"> then a short description of where you are linking to and then a </A> tag. Where it says "page.htm" you insert the name of the page you want to link to. The new page must be in the same directory as the page you're linking it from. If it's in a higher directory you must include the name of that directory like this "h_directory/page.htm", if you want to go to the lower directory you use "../page.htm"
These are links that link to other locations on the internet, they are very similar to internal links. The only difference is that you include the full location instead of just the name of the page. Here is an example of both an internal link and an external link:
|
<HTML> <HEAD> <TITLE>Links.</TITLE> </HEAD> <BODY>
This is an internal link back to
</BODY> |
As you should see from this example the bit of text between the two A tags is the bit which is highlighted for you to click on. Instead of having link text, you can have a picture. This is done by simply inserting a picture tag between the two A tags instead of text. Here is an example:
|
<HTML> <HEAD> <TITLE>Links.</TITLE> </HEAD> <BODY BGCOLOR="#ffffff"> <CENTER>
<A HREF="html.htm">
</CENTER> |
This example includes two links, both to the same place and with the same picture. The only difference is that the first has a blue border around the picture. This can be nice but if you don't want it you have to add an extra parameter to the image tag which is BORDER=0 just like I've done in the example.
If you create a long page with a lot of headings a bit like this page you can have a list of all the headings at the top of the page that link to that part of the page. I have chosen not to do this because I didn't think it was necessary. You can also link to these parts of the page from a different page.
These kinds of links consist of two parts. One is a marker in the page, the other part is an actual link that links to that part. The marker tag looks like this <A NAME="name"> heading text and then </A>. The tag that links to that would look like this <A HREF="#name">. Here is an example that should make it clear. Where I've put etc. I've inserted lots of pointless text so you can see the example working.
|
<HTML> <HEAD> <TITLE>Links.</TITLE> </HEAD> <BODY BGCOLOR="#ffffff">
<A NAME="top"><H3>The Top</H3></A>
</BODY> |
That example also shows how you link to a section of a different page. You put the name of the page and follow it with the name of your marker, like this "html_5.htm#link".
There is no better feeling than getting a nice friendly email from someone you don't know. This
doesn't however happen a lot. A good way to encourage people to write to you is to include a mail
link on your page along with some pleading text. This is very simple and done like this:
<A HREF="mailto:richard@garsonix.co.uk"> PLEASE email me!!!</A>.
This would look like this:
PLEASE email me!!!
By the way if you would like to ask any questions or would just like to be friendly, please do feel
free to email me.
As standard links that you haven't been to before are blue and ones you have been to are purple. For stylistic reasons you might want to change this, for instance your background might be blue. The colour is changed by adding an extra parameter to the <BODY> tag just like we did in chapter 2. This extra parameter is LINK=" " and VLINK=" ". Between the " " you put a colour number just like we did in chapter 2. LINK changes the colour of links you haven't been to and VLINK changes the colour of links you have been to. Here is an example.
|
<HTML> <HEAD> <TITLE>Links.</TITLE> </HEAD> <BODY LINK="#ffffff" VLINK="#00ff00">
<A HREF="html_5.htm">Here is a link back to the page you've just come from so it should be green.</A>
</BODY> |
That's it for linking, now you know all you need to know to make a perfectly good page. What you learn from here on is extra stuff to make your site look better. Some of it is only supported by later browsers. It's all worth knowing, but if I were you, I'd go over the first five chapters again and experiment a little before you go on.