Basic Html 3: Hyperlinks
July 13th 2006 05:35
Well today we're going to deal with links: those pieces of writing that take you to another website when you click on them.
These links are called anchors and use the <a>your text here</a> tags. However, as with the <font> tag, you generally add more information to these. So the general link to a website is:
<a href="url">your text here</a>
So to link to http://www.google.com you would write <a href="http://www.google.com"> This links to Google</a>
If you are linking to a website that is in the same directory then you can just write the website name. So if you save this as "lesson3.html" in your lessons folder and then create a basic website:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
your text here
</body>
</html>
and where it says your text here you write:
<a href="lesson1.html">This is the first lesson we learned</a>
<a href="lesson2.html">This is the second lesson we learned</a>
<a href="http://www.google.com">This is a link to Google</a>
you will see the way the different links work (although you may find the page looks neater if you insert a break [by writing <br>] after every link.)
You can also use hyperlinks to move to a specific place within a document. You do this be creating an anchor at the place you want to jump to, by enclosing the heading in an anchor tag like below:
<a name="anchorname">your text here</a>
and to navigate to that section you write the link, followed by #anchorname where anchorname was whatever you named the anchor.
To experiment with this just create a new website and save it as "extra.html". Add the following code.
<html>
<head>
<title>Extra</title>
<head>
<body>
<a href="#second">This link takes us to part 2 of this page</a>
<p>This is the first part of extra</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><a name="second"> This is the second part of extra.</a></p>
</body>
</html>
I have added all the breaks in so it is easy to see the difference between the first part and the second part.
You may not the line: <a href="#second">This link takes us to part 2 of this page</a>
This shows you how to navigate to a particular part of a website if you are already in that website. You just go straight to the #anchorname part of the code.
Now go back to lesson3.html and add two more links after the others:
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
So lesson3.html should look like:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html">This is the first lesson we learned</a><br>
<a href="lesson2.html">This is the second lesson we learned</a><br>
<a href="http://www.google.com">This is a link to Google</a>
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
</body>
</html>
Now open lesson3.html by clicking on it so it opens in your web browser and play around.
And that is hyperlinks. If you have any questions then just add a comment and I will try to answer them.
Adam
These links are called anchors and use the <a>your text here</a> tags. However, as with the <font> tag, you generally add more information to these. So the general link to a website is:
<a href="url">your text here</a>
So to link to http://www.google.com you would write <a href="http://www.google.com"> This links to Google</a>
If you are linking to a website that is in the same directory then you can just write the website name. So if you save this as "lesson3.html" in your lessons folder and then create a basic website:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
your text here
</body>
</html>
and where it says your text here you write:
<a href="lesson1.html">This is the first lesson we learned</a>
<a href="lesson2.html">This is the second lesson we learned</a>
<a href="http://www.google.com">This is a link to Google</a>
you will see the way the different links work (although you may find the page looks neater if you insert a break [by writing <br>] after every link.)
You can also use hyperlinks to move to a specific place within a document. You do this be creating an anchor at the place you want to jump to, by enclosing the heading in an anchor tag like below:
<a name="anchorname">your text here</a>
and to navigate to that section you write the link, followed by #anchorname where anchorname was whatever you named the anchor.
<html>
<head>
<title>Extra</title>
<head>
<body>
<a href="#second">This link takes us to part 2 of this page</a>
<p>This is the first part of extra</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><a name="second"> This is the second part of extra.</a></p>
</body>
</html>
I have added all the breaks in so it is easy to see the difference between the first part and the second part.
You may not the line: <a href="#second">This link takes us to part 2 of this page</a>
This shows you how to navigate to a particular part of a website if you are already in that website. You just go straight to the #anchorname part of the code.
Now go back to lesson3.html and add two more links after the others:
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
So lesson3.html should look like:
<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html">This is the first lesson we learned</a><br>
<a href="lesson2.html">This is the second lesson we learned</a><br>
<a href="http://www.google.com">This is a link to Google</a>
<br>
<a href="extra.html">This links to the extra website</a><br>
<a href="extra.html#second">This takes us straight to the second part of extra</a>
</body>
</html>
Now open lesson3.html by clicking on it so it opens in your web browser and play around.
And that is hyperlinks. If you have any questions then just add a comment and I will try to answer them.
Adam
| 102 |
| Vote |
subscribe to this blog
