Adding links to your document
In this lesson, you will learn how to include
links in your HTML document.
You will need three windows open on
your screen at this time. A Internet Explorer window displaying this tutorial,
an experimental window to view your HTML document, and a window in which you
will type the HTML document.
Linking to Local Documents
For this part of the tutorial you will create three HTML documents:
one document containing links to the other two. All three of these documents
will be local documents because you will be saving them to your diskette or hard
drive.
Create an HTML document that
displays your first name only.
Save this file and call it first name
.
Create another HTML document that
displays your last name only.
Save this file and call it last name.
Lastly, you will create a document which will have two hyperlinks in it.
The first hyperlink will link you to your first name file and the second
hyperlink will link you to your last name file.
It's time to create the third HTML document
which will contain the links to your first name file and your last
name file.
Type in the source that follows, but do not type it in word
for word. You must fill in the URL's of your first name and last
name files, between the double quotes.
<html>
<head>
<title>Document with two links
</title>
</head>
<body>
Hello, this is my
<a href="URL of your first name file">First
Name </a>
and
<a href="URL of your last name file">Last
Name </a>
</body>
</html>
Observe the new tags: <a href=" filename">and
</a>
These tags make up the two pieces of a link.
The
<a href=" filename"> tag is the first part of the link. The
<a href=" filename"> tag signifies a link is coming and the file name
is the target of the link (where you will jump to).
The text between
the <a href=" filename"> tag and the closing tag </a>
is the second piece of the link. This text will be highlighted in your document.
When the reader clicks on this highlighted text, they will jump to the target
(i.e. the filename you typed in the <a href=" filename"> tag).
In the above example first name and last name will be highlighted in
your third document and will link you to the files first name and last
name.
That is, your third HTML document should look like this:
Save this file and call it links .
Click on the experimental window and view the file links .
Click
on the two links to see if you have been successful. If something has gone wrong
check your syntax carefully and make sure you typed in the correct URL's.
Creating a Graphical Link
You can use a picture as a
link.
In the tutorial we will use the flower as a graphical link.
When you click on the flower, you should jump to the file containg your
first name (first name). To create this graphical link you need to
download the image of the flower and remember where you saved it.
Download the flower image below and save it to
your diskette or hard drive. Remember where you saved it to.
Click on the window containing your HTML
document links . Within the source, replace the text that is contained
between the first set of <a href=" URL of your first name file">and
</a> tags, with the following:
<img src="URL of the flower file">
and save your
changes.
You have just substituted the text 'first name' with your
flower image.
Click on your
experimental window and open your links document. The image of the flower
should appear and it should have a border line around it, which indicates that
it is a link. Click on your new graphical link and see if it works.