Lesson 2 - Links

In this lesson we will be discussing web links. As you have already learned, links are the root of HTML. The entire WWW revolves around links. We are going to look into four distinct types of links and then we will look at an example.

<a>
This tag is the anchor tag. It is the main tag used for links, and is the only one we will discuss on this lesson. The anchor tag has many attributes, and we will not discuss them all in this lesson. We will only be discussing this tag in this lesson. To make things even easier we are only discussing one of its attributes.
The basic form of using this tag is as follows: <a href="URL">content</a>

Href is arguably the most important attribute of the anchor tag, and the only one we will be discussing here; it specifies the target URL of the link. Of the four different types of links we are going to be discussing, this attribute is where they differ.

The first type of link we will look at is the email link. This link is used to attach an email address to a web page. When an email link is clicked it launches the users default email software for an email to the person whom the link specifies. The link at the bottom of this page that says Contact Site Administrator is this type of link. To create an email link just use the basic form that we just discussed but alter the URL so that it contains the email address preceded with mailto: for example:
<a href="mailto:webdesign@webbymont.com">Contact Me</a>

The next type of link is the external link. This link is used to link your page to another entirely different page on the WWW. It is a very simple link and can be implemented as follows:
<a href="http://www.weather.com">Go to Weather.com</a>

The next type of link is a little more tricky but is very important, and helps us with images a in the next lesson. This link is the local link. The reason this link is a little trick is because you have to understand the folder/file structure of the pages in your website. You must build this URL from scratch. If the page you would like to link TO is in the same directory as the page you would like to link to it FROM then it is very simple just do the following:
<a href="nextPage.html">Go to the Next Page</a>

These next examples are a little different. Say for instance that you are in the folder Pages2 and you would like to link to a page in the folder Pages1, and Pages1 and Pages2 are both in the folder Pages (side by side in the hierarchy). To access the page in the Pages1 folder you would have to go up on directory then into the Pages1 folder to see how to do this look at the following example:
<a href="../Pages1/nextPage.html">Go to the Next Page</a>
../ is what you have to use to go up a directory if you had to go up 3 directories you would just use it three times for example: ../../../

The last type of link we will discuss here is the named anchor link. This link is used to link from one part of a page to another part of the same page or a specific part of a different page, it is typically used on very long pages where you would have to do a lot of scrolling to find what you are looking for otherwise (Example: Long alphabetical lists). To use this link you first have to create a named anchor; to do so create an anchor with only the name attribute present and no href like the following:
<a name="Part2OfThePage">This could be a Heading</a>

After you have created the named anchor somewhere on a page you can access it from the same page as follows:
<a href="#Part2OfThePage">Go to Part 2 Of This Page</a>

To link to this page from any other page do this:
<a href="http://www.someDomain.com/somePage.html#Part2OfThePage">Go to Part 2 of somePage.html</a>

Example:
These are the four basic types of links we will be discussing in this lesson. If you have more questions feel free to view the Advanced Topics page to see if we have any information on what you are looking for. Please review the following source code and formatted page to see examples of these links in action. Feel free to edit this source code and try to create your own links for practice then continue on to the next lesson.

View Source
View Formatted Page