HTML Notes #4 – Linking with Anchor Tag
Summary
Now this is really what makes HTML worthwhile. We will create two pages that link to each other. This is the basis of the World Wide Web and all that jazz. Please remember from the beginning that it is very useful to have the text that you click on have something to do with the page that you are linking to. In other words, try to avoid “click here” as much as possible, even though it is a popular thing to do.
The HTML element used for linking is the “anchor tag”, which is abbreviated with the letter “a”. It has an opening and closing tag, and what is between them is what will be highlighted as a link. The other abbreviation you need to know is “href”, which is the hypertext reference of the link, and it is the actual address that is followed, versus the descriptive text that you click on.
<html>
<head>
<title>Linking with Anchor Tags - Page A</title>
</head>
<body>
<a id="top"></a>><h1>Linking with Anchor Tags - Page A</h1>
<p>Clicking on the link we create will take you to <a href="/linking-page-B.html">Page B</a> IF AND ONLY IF you first create a file with the name "linking-page-B.html" and you put it in the same directory (folder) as the original page. You can use this page and a command like "File SaveAs".</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>All of these break tags are a bad way to add space to the page, but I'm trying to make sure you see how you can move around *within* a page using an internal anchor tag. Scroll down as far as you can and then try to <a href="#top">go to the top</a> of the page</p>.
</body>
</html>You need to create a second file in the same directory (using the previous tips) named “linking-page-B.html” to see this work.
Go to the first HTML page if you are not sure how to test the example.
Remarks
Listing just the file name in the “href” part of the link implies that it is a file in the same directory, so “file_name.html” is the same as “./file_name.html”. For relative paths, “../” means “one directory up”, and you can keep going “../../../”, for example. For absolute paths, you either start with a “/”, which is the top of the world for your instance of the Apache server, or start the path with a “http://” for a file that is on another server.aAnchor Tag for linking to other pages or to a specific place within a page.
a Anchor – Tag for linking to other pages or to a specific place within a page.
