Article
Beginners' HTML - Part 2
Organizing the Links
At the moment, our page looks pretty good. However, once you've added a few more links it will be much more difficult for a user to navigate the page and find the link they're looking for. So let's split the links up into categories (you'll notice that I've already added some more links to the list below):
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<i>
Web Development <br>
Search Engines <br>
Miscellaneous
</i>
</p>
<p>
<b>Web Development</b><br>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.webmasterbase.com">WebmasterBase</a><br>
<a href="http://www.promotionbase.com">PromotionBase</a><br>
<a href="http://www.ecommercebase.com">eCommerceBase</a><br>
<a href="http://www.servicesbase.com">ServicesBase</a>
</p>
<p>
<b>Search Engines </b><br>
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.altavista.com">AltaVista</a> <br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.dmoz.org">Open Directory Project (DMOZ) </a>
</p>
<p>
<b>Miscellaneous </b><br>
<a href="http://www.slashdot.com">SlashDot</a> <br>
<a href="http://www.theregister.co.uk">The Register</a> <br>
<a href="http://www.f-free.net">F-Free</a>
</p>
</body>
</html>
As you can see, I've also included a list of all the categories at the top of the page to help users find the category they want.
At the moment, it's pretty easy to navigate the links page. But as our list of links grows, it will become increasingly harder for a visitor to find what they're looking for. Fortunately, another function of the <a> tag allows us to link to other parts of the same document. It appears to the user just like any other link, but allows them to move to another position on the same page, or to a position on another page within the same site.
There are two main elements to this tag.
The Pointer
Firstly, we must place a pointer in the position on the page to which we want to link. The pointer is:
<a name="myposition"></a>
The name you specified in the tag will allow you to navigate to that area of the page through a normal link. This doesn't change the way the page appears to the user; it looks exactly the same as before.
The Link
The next step is to create a link to this pointer. Links to certain areas of pages work like this:
<a href="http://www.mysite.com/index.html#myposition">click here</a>
In our particular case, seeing as the destination is on the same page as the link itself, the full URL need not be specified - just the #myposition part will suffice.
So, once the category names have been made into links, our page will look like this:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<i>
<a href="#webdev">Web Development</a><br>
<a href="#search">Search Engines</a><br>
<a href="#misc">Miscellaneous</a>
</i>
</p>
<p>
<b><a name="webdev"></a>Web Development</b><br>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.webmasterbase.com">WebmasterBase</a><br>
<a href="http://www.promotionbase.com">PromotionBase</a><br>
<a href="http://www.ecommercebase.com">eCommerceBase</a><br>
<a href="http://www.servicesbase.com">ServicesBase</a>
</p>
<p>
<b><a name="search"></a>Search Engines</b><br>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.altavista.com">AltaVista</a><br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.dmoz.org">Open Directory Project (DMOZ)</a>
</p>
<p>
<b><a name="misc"></a>Miscellaneous</b><br>
<a href="http://www.slashdot.com">SlashDot</a><br>
<a href="http://www.theregister.co.uk">The Register</a><br>
<a href="http://www.f-free.net">F-Free</a>
</p>
</body>
</html>
Now, if you access a link to a particular category, you'll be moved down the page to that category, rather than to a separate page. Keep in mind that this example may not appear to work if you view the page on a high resolution monitor, simply because the screen won't scroll down if all the links fit onto a single page. However, if there were more links on the page, or you shrank your browser window, then you’d see the links do their thing.
Email Links
There is one other type of link we haven't looked at yet. This link has the ability to open up the visitor's email client and allow them to type a message to you. The tag is similar to those we've looked at previously:
<a href="mailto:you@email.com">Click here to email me!</a>
Often referred to as "Mailto Links", these provide a quick and easy way to let a visitor send you an email, perhaps with comments or suggestions about your site, or just to say hello!