A hyperlink is something you can click that takes you from one location to another. This can be a different site, different page, or different area on the same page. The address that your browser is viewing changes to the address the hyperlink tells it to. This will have the same effect as typing in the URL in the hyperlink. If the file the hyperlink points to isn't a page, the browser will attempt to view it if it has support for that type of file. Otherwise, you'll receive a "save as" box.
To create a hyperlink (more commonly referred as a 'link'), you use the <a> tag. The "a" stands for "anchor."
<a>Content</a>
To specify where the link will take us, we use the href attribute. The value of this attribute can be a full URL path or a relative file. The content between the start and end tags of <a> is what the user sees to represent the link. Links are underlined by default.
<a href="http://xfox.digibase.ca">The Tails Archive</a>
The content doesn't have to say the same thing as the href attribute, but it should accurately and effectively represent the link. To view where a link will take you on a page, put the mouse arrow over the link and look at the status bar (which is typically located at the bottom left of the browser window).
You can also use an image to represent the link. Images will have a border around them to let the user know they are clickable instead of being underlined like text. But always remember to use the alt attribute to display text instead if images aren't available. The border can be removed through CSS (will be taught in the future).
<a href="http://xfox.digibase.ca"><img src="logo.gif" alt="The Tails Archive" /></a>
When you click a link, it does the action in the href attribute. But when you go back to the page that the link was on, it will look different. Links can have several different status types. This section will show you the different types. But because you must use CSS to modify these, they will be discussed in further detail after CSS is explained.
An internal link is a link that doesn't leave the page. It takes you to another area on the same page. Pages that have a link saying "click here to go to the top of the page" use internal links. here's an example (top of the page):
<p><a href="#bottom">Go to the bottom of the page</a></p>
See how the href attribute contains a # sign? This tells it the link is an internal link. And here's how the bottom would look:
<p><a id="bottom"></a></p>
The id attribute can be used on any tag in the <body>. It's a unique name you can give to a tag. The name of the id cannot start with numbers and cannot contain a space. When we click the relative link at the top, the browser will search for the <a> tag that has the id specified in the link. It will then scroll up or down to that area in the page. In order to test this example, you'll have to have a page tall enough to need scrollbars (you can fill the page up with <br />). It's valid for an <a> to be empty. We only need the id attribute for this to work.
