 |
|
|
|
Linking to other pages and sites |
|
Linking pages together
There are very few web pages that are completely isolated documents.
Usually they have one or more links to other documents within them, and
nearly every page is linked to from one or more pages. It is this linking
structure that gave the Web its name.
The anchor tag
To make links from your page to another you need to use the anchoring
tag. It looks like this <A HREF>. Remember to close the tag with </A>.
It is an easy tag to remember, the 'A' stands for Anchor, and the 'HREF'
for Hyper Reference.
Between the tags you need to write the address, or URL, of the page you
want to link to. If you want to link to a page that already exists on the
Internet, you will need to write the full address. The address is always
enclosed within "quotation marks".
For example, if you wanted to write a link to The Complete Works of
William Shakespeare you would write this:
<A HREF= "http://ipl.org/reading/shakespeare/shakespeare.html"> Shakespeare, Complete Works</A>
It would look like this:
Shakespeare, The Complete Works
Notice how the words between the brackets become red. (Your browser may
use a different default colour for the links you write.) The colour change happens
automatically when you write the anchor tag. This clearly identifies the
words as a link, so people know to click on them if they want to follow it.
If you want to write a link to another page that does not yet exist on the
Internet, but is in your own folder of HTML pages, then you do not
need to write the full address beginning "http:"
For example, imagine you have created an HTML page containing your last holiday
photographs and called it "myholiday.html". Now you want to link to this
page from your own index page. The anchoring tag you would use would
look like this:
<A HREF="myholiday.html">Look at my holiday pictures!</A>
As long as your two files, 'index.html' and 'myholiday.html' are in the same
folder, then the computer will have no trouble finding them and linking them
together.
Some people keep all their pictures in one big picture folder, they can
then link to this folder to find the picture. For example, let's imagine that
those holiday photos were in a picture folder imaginatively called
"pictures". Within this folder, the holiday photos are called "holidayphotos".
If this was the case, then the anchoring tag might read:
<A HREF="pictures/holidayphotos">Look at my holiday pictures!</A>
Other anchoring tags
There are other tags that begin with <A HREF>. 'Mailto' is a useful one.
For example, if Shakespeare was creating a Freespace page he might
include this:
<A HREF="mailto:w.shakespeare@virgin.net">Write to me
here</A>
This would look like this: Write to me here
If you click on the example "Write to me here" above, you will see a new
window open. This new window allows you to write an e-mail to
w.shakespeare@virgin.net. Though we can't guarantee you'll get an answer!
Other HREF tags include:
A HREF="NEWS:" which links to a news site
A HREF="FTP:" which links to an FTP site
Using a picture as a link
You can use images as links to other pages in the same way that you use
text. All you have to do is place the filename of the image you want to use
as a link inside the anchor tag. If, for example, you wanted to use
'ghead.gif' as a link to The Complete Works of Shakespeare, this is what you
would write:
<A HREF="http://ipl.org/reading/shakespeare/shakespeare.html"> <IMG SRC="freespace.gif"
ALT="Free Space image acts as a link to Shakespeare's works"> </A>
This is what it would look like:
You will be able to see that the image has been placed within a red border,
identifying it as a link. You can remove this border. If you want to, you
need to specify "border=0" within the image tag.(See the example below.)
Experiment with your own borders so that
visitors to your pages are aware of which images are links, and are able to
navigate their way around them easily.
There are other ways to control the space around the image, which might
be important if the image is surrounded by text or other images. You
need to use the commands "HSPACE" and "VSPACE". "HSPACE" stands
for horizontal space, and "VSPACE", logically enough, for vertical space.
These commands should also be placed within the image tag. You would
write:
<IMG VSPACE=5 HSPACE=5 Border=0 SRC="freespace.gif">
Aligning your image
You can control where your images go on the page using the "image align
tag". If you want your image to be on the right hand side of the page, you
would write:
<IMG ALIGN=RIGHT SRC="freespace.gif">
If you want the image on the left, you would write almost exactly the same,
only replacing "right" with "left".
If you want to put the image in the centre, the command is slightly different.
<center><IMG SRC="freespace.gif"></center>
It would look like this:
|
|
|
|
