The conclusion - How and when to use links in HTML pages - Part 3

The final part of this series will cover the remainig forms of linking not covered in part 1 or part 2. By now you should feel comfortable with how you link to pages within your own website structure. You should also feel comfortable linking from the top level down and back up again as many levels deep as you want to go. So to start of part 3, which is the conclusion of this series I am going to start with three bits of code that covers all the scenarios that have been covered.

Your root index.html file should have a link structure that looks as follows:

<ul>
            <li><a href="../index.html" title="Return to front page">Home</a></li>
            <li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
            <li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
            <li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
            <li>
                <a href="pets/index.html" title="Take home your best friend">Pets</a>
                <ul>
                    <li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
                    <li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
                    <li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
                    <li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
                </ul>
            </li>

            <li>
                <a href="products/index.html" title="View our unique product catalogue">Products</a>
                <ul>
                    <li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
                    <li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
                    <li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
                </ul>
            </li>
        </ul>

Your navigation one level down should look as follows:

<ul>
            <li><a href="../index.html" title="Return to front page">Home</a></li>
            <li><a href="index.html" title="Read our helpful tips and more">Advice Corner</a></li>
            <li><a href="../bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
            <li><a href="../contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
            <li>
                <a href="../pets/index.html" title="Take home your best friend">Pets</a>
                <ul>
                    <li><a href="../pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
                    <li><a href="../pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
                    <li><a href="../pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
                    <li><a href="../pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
                </ul>
            </li>

            <li>
                <a href="../products/index.html" title="View our unique product catalogue">Products</a>
                <ul>
                    <li><a href="../products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
                    <li><a href="../products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
                    <li><a href="../products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
                </ul>
            </li>
        </ul>

And for your two level deep pages your navigation should look like this, I used the index.html page inside the cats folder for this:

<ul>
            <li><a href="../../index.html" title="Return to front page">Home</a></li>
            <li><a href="../../advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
            <li><a href="../../bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
            <li><a href="../../contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
            <li>
                <a href="../index.html" title="Take home your best friend">Pets</a>
                <ul>
                    <li><a href="../dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
                    <li><a href="index.html" title="See our variety of cat breeds">Cats</a></li>
                    <li><a href="../fish/index.html" title="See our variety of fish species">Fish</a></li>
                    <li><a href="../exotic/index.html" title="See our variety exotics">Exotics</a></li>
                </ul>
            </li>

            <li>
                <a href="../../products/index.html" title="View our unique product catalogue">Products</a>
                <ul>
                    <li><a href="../../products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
                    <li><a href="../../products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
                    <li><a href="../../products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
                </ul>
            </li>
        </ul>

At this point you can review the code above and see where the differences lie with your current code base. Next thing is to download the code that will bring you up to par to where we are now. I have also added some content to some of the pages to assist in the final types of linking we will be exploring in this part of the series. When you have downloaded the zip file go ahead and extract it to a directory of your choosing.

The first new type of link we will discuss is called an anchor link. This link allows you to not only link to a specific page in your site but to a specific section of the page you are linking to. The process of creating an anchor link is very simple. The first step is to open the index.html file located in the grooming_products folder. You will see that this page list three products. We are going to add an anchor link to product 1 as follows:

<h3><a name="prod1"></a>Product 1</h3>

Next, open the root index.html file. Here you will find a section entitled the 'Product Spotlight' and it features product one. The first step is to link the heading to the page that contains the product as follows:

<h4><a href="products/grooming_products/index.html">Product One</a></h4>

This will then link to the page where the product is listed but, will not link to the specific section. To enable this we add a little something extra to the code listed above:

<h4><a href="products/grooming_products/index.html#prod1">Product One</a></h4>

The #prod1 is what is known as the anchor part of your anchor link. So having changed your link to reflect the above go ahead and click on the link again. Wow! It actually jumps right to the exact product we wanted it to. You will also notice that when you hit the browsers back button it still goes back to the home page right where you left off. That is it! Simple and easy anchor links. For the next type of link, open the index.html inside the advice_corner folder.

This page contains a heading called 'Some links to usefull resources'. From this page we are going to link to external websites that resides outside your website structure. This is even easier then creating an anchor link. The first link list item contains the text 'Pet food and treats from DogMor' so, we will have this link to a page on another website. To do this apply the following:

<li><a href="http://www.nola.co.za/home.asp?pid=44">Pet food and treats from DogMor</a></li>

You will see that the difference here is that instead of using relative linking we are using an absolute path that includes the http prefix as well as the domain name and the page under that domain we want to link to. Go ahead and apply the change and test out the link. The next list item stated 'Purina' and as such we want to link to the Purina website. The URL for this is http://www.purina.com/. Go ahead and make the Purina list item link to the Purina web page.

If done correctly the link will bring you to the Purina website homepage. Now what if you wanted to link to a specific section on an external website i.e. an anchor link to an external web address. Well, that is very easy, lets say that the DogMor webpage we linked to before had a product that you wanted to link to. The first thing you need to know is what the anchor is called, for this example let's assume it is called 'product'. To link to this section of that page the link above will change by simply appending the anchor to the current link:

<li><a href="http://www.nola.co.za/home.asp#product?pid=44">Pet food and treats from DogMor</a></li>

There is only one other type of link we will be exploring and that is the mailto link. This allows you to place a link on a page and when clicked on will automatically tell the browser to open your default mail client and add the address named in the link added to the 'To' field of the composer window. To do this, open the index.html page inside the contact folder. There you will find a line such as the following:

<p>feedback@thepetstore.com</p>

To make this a mailto link simple change this line to the following:

<p><a href="mailto:feedback@thepetstore.com">feedback@thepetstore.com</a></p>

Click on this link and see what happens. Simple isn't it? Ok, now we have covered all of the types of links we use on the web on a daily basis. Go ahead and have some fun! Download the code, experiment and have fun! There will be a follow on article, not part of this series, that will go into the best practices of linking and how to ensure your links are accessible and usable by all users. Eveything we have done up to know is also live and can be accessed by going to the web builder zone PetStore.