| Anchors
As we saw
earlier in this guide, you can have multiple pages on a website and you can link
all these pages together. This will then allow visitors to your website to be
able to browse or navigate their way around your site.
These links are
created by using an HTML tag called an anchor.
<A> & </A>
The anchor tag has two main uses. It can link to another
section within the same page or link to another HTML page. To do this you
need to use additional commands with the tag.
NAME=""
The name attribute defines a target
point within the current page, i.e:
<a
name="top">Top of page</a>
HREF=""
The
HREF part tells the browser to follow the link. If you are moving to
another part of the page defined with a name="", you would use a hash (#)
followed by the name, for example:
<a
href="#top">Click here to return to the top</a>
If
you want to link to another page you put in the name of the page - lets
look at the HTML we will insert into our index.htm page:
<a href="page2.htm">Click here to see my second
page.</a>
Between the opening and closing anchor tags
you insert the text that will appear as the link, which above is "Click
here to see my second page." This is what the visitor to you webpage will
click on.
Note: As you can see in our original HTML you can
change the font and font size before inserting the anchor
tag. |
| Create a page |
The screen shot below is of the second page we want
to create, and beneath that is the HTML code required to do so. Copy this
into Notepad, making any alterations you wish and try it out for yourself.
To view your page save the file somewhere on your desktop as "page2.htm"
and then view it in your browser by double clicking on your newly created
html file.
|
| The HTML |
<html>
<head>
<title>My
Second Page</title>
</head>
<body
bgcolor="#FFC300">
<p align="center"><font size="4"
color="#000000"><b><u>Hello and welcome to my second
page.</u></b></font></p>
</body>
</html> |
Linking
In our two examples you can see the way in which the pages are
linked.
In our first example, to the left, you can see that you start at
the index page, you can then only move to the file1.htm page. Once there you can
then go to the file2.htm page.
Our second example, to the right, shows
that you start on the index.htm page and you have a choice to move to either,
the file1.htm or the file2.htm page.
To help you understand how linking
works, here is a picture of a simple layout of a freenetname
website.
As you can see, all the files are stored in a directory called
public_html. Let's say, for example, that the index.htm page has to
display the title.jpg image stored in the images directory. In this case the
link to use will be "images/title.jpg" - as you are telling the browser to move
from the current (public_html) directory into the images directory, then look
for title.jpg.
This time, imagine the page2.htm page needs to display the
banner.gif. Here the correct link would be "../images/banner.gif". You can see
that the ../ tells the browser to move up a directory, then we move into the
images directory and look for banner.gif. So in short: To move down a directory,
use it's name then a slash. To move up a directory, use two dots and a slash. If
your files are in the same directory, just type the filename.
You can
also link to other websites using a HREF - just type the website address or the
address of a specific page between the quotes, i.e:
<a href="http://www.freenetname.co.uk">freenetname's
website</a>
| Create a page |
The screen shot below is of the page we want to
create, and beneath that is the HTML code required to do so. Copy this
into Notepad, making any alterations you wish and try it out for yourself.
To view your page save the file somewhere on your desktop as "index.htm"
and then view it on your browser by double clicking on your newly created
html file.
|
| The HTML |
<html>
<head>
<title>My Home
Page</title>
</head>
<body
background="background.gif" bgproperties="fixed">
<p
align="center"><font size="5"
color="#3333FF"><b><u>My
Website</u></b></font></p>
<hr>
<p><font
color="#000000" face="Arial, Helvetica, sans-serif"
size="3">Hello,</p>
<p>Welcome to my website. I hope you
like it.</p>
<p>Below is a lovely
banner.</font></p>
<img src="fnn_linkbanner.gif"
border="0" alt="FNN Banner">
<p><font
size="5"><b><a href="page2.htm">Click here to see my second
page.</a></b></font></p>
<p
align="right"><font color="#000000" face="Arial, Helvetica,
sans-serif"
size="7"><i>Rob</i></font></p>
</body>
</html> |
You are here: Home-USEFUL INFO-Webmaster-HTML-Hyperlinks
Previous Topic: Working with images Next Topic: Advanced
|
PRODUCTS · 
USEFUL INFO · 
Webmaster · 
