Working with Links
NOTE: In this tutorial I have added some line breaks to the example coding. If you decide to copy this code for your own pages, you don't need to add the carriage returns unless you want to. It will work correctly either way.
This tutorial assumes that you know enough about computers to understand what a path is. If you can locate files on your own computer's hard drive, you're fine. If you don't understand this information, you can probably still use the information here by copying the samples and experimenting. This article covers the most basic versions of the linking tag. In a future tutorial, I'll cover some of the more advanced options, such as linking from within a frameset (for those of you who want to work with frames) and other more advanced link-related topics. There are three basic types of links you will need to use in creating your web pages:
- links to other pages
- links within the same page, or to a particular part of a page
- e-mail links
Once you have mastered these tags (and a few others) you will be able to create quite complex web sites.
Linking to Other Pages
When you want to link to other pages, you use the link tag. It looks something like this:
<p><a href="address">Description of the page.</a></p>
The word address would be replaced with the address of the page you want to link to. The address of the page as supplied here can be in one of two formats: relative or absolute.
Use relative addresses to link to other pages within your own Web site. For example, if I had a page called news.html, I could create a link to it like this:
<p>Read the latest <a href="news.html">news</a>
about this site.</p>
This assumes that the file "news.html" is located in the same directory where the page with the link is stored. You can refer to files in other directories on your site by including the relative path. For example, if I have a directory called "personal", and I want to provide a link to a file in that directory from a file in the main directory, I would use a link tag that looked like this:
<p>Take a look at
<a href="/personal/myresume.html">my resume.</a></p>
The second format for the address portion of the link, the absolute address, includes the full URL (Internet address) of the page to which you are linking. For example, if you wanted to create a link to my site, IS Web Designs, you would use this address in the link tag:
<p>Visit <a href="http://www.iswebdesigns.com">
IS Web Designs</a></p>
Linking within a Page
When you have a long web page, it makes it easier for readers to find the information they are looking for if they can click on click on an item in a list to go directly to that part of the page. There are two things you need to do in order for this to work. First you need to create an anchor by using a variation of the a link. Instead of including an href, an anchor tag looks like this:
<a name="location_name">some text</a>
You will use the name later on to refer to this exact spot in this page. The name you use must be unique for this page, but you could repeat the same name in anchors on several pages within your site. You'll see why when I talk about linking to a specific part of another page.
Once you have created the named anchors, you need to create links to shoe anchors in much the same way that you created a link from one page to another. The only difference is that a link to a named anchor uses a slightly different format for the href portion of the link. It looks like this:
<a href="#location_name">Go to location name.</a>
Often, on a long page, you'll have either a numbered or unordered (bulleted) list at the top of the page that includes links for all of the sections of the page. Let's take a look at a complete example. I've created a page that includes several named anchors and a list that includes a link to each of the anchors.
<html>
<head>
<title>Example of Using Anchors</title>
</head>
<body>
<h1><a name="top">Page with Anchors</a></h1>
<p>Introductory text.</p>
<p>List of sections on the page:</p>
<ul>
<li><a href="#begin">First Section</a></li>
<li><a href="#middle_1">Start of Page Middle</a></li>
<li><a href="#middle_2">Another Middle Section</a></li>
<li><a href="#bottom">Last Section</a></li>
</ul>
<h2><a name="begin">First Section</a></h2>
<p>Some text and stuff.</p>
<p><a href="#top">Return to top.</a></p>
<h2><a name="middle_1">Start of page middle.</a></h2>
<p>More stuff in the middle of the page.</p>
<p><a href="#top">Return to top.</a></p>
<h2><a name="middle_2">Another middle section.</a></h2>
<p>Yet more stuff.</p>
<p><a href="#top">Return to top.</a></p>
<h2><a name="bottom">The last section of the page.</a></h2>
<p>Even a little more stuff to make the page longer.</p>
<p><a href="#top">Return to top.</a></p>
</body>
</html>
If you want to see a page like this in action, simply copy the text above and paste it into your web page editor or even into notepad. (NOTE: You will have to add enough text so that the page is longer than a single screen full of text in order for there to be a visible result when you click on the link to one of the anchors, by the way.)
Save the resulting file somewhere on your computer where you will be able to find it again and then open it with your web browser. Try clicking on the links on this page so you can see for yourself how they work.
Linking to a named anchor on another page is not much more complicated. All you need to do is precede the name of the anchor with the name of your page. For example, if the page above was called anchor.html, I could link to the last section of the page like this:
<p>Look at the <a href="anchor.html#bottom">bottom</a>
of the anchor example.</p>
It's that simple.
Why would you want to use links like this? Although it is best not to create extremely long web pages, in some cases, you might have a good reason for a fairly long page. For example, if I created a single page that listed all of the tutorials on my web site, I would probably create internal anchors for each sublist so that you could go directly to the list of HTML Tutorials or the list of Graphics Tutorials rather than having to scroll through the entire page.
Creating E-Mail Links
The final type of link that you might want to include in your pages is the "mailto" link. This link allows people to send e-mail to you easily and it uses the <A> tag as well. The difference is in the way you specify the address. An e-mail link looks like this:
<p><a href="mailto:someone@someplace.com"> Send me a message!</a></p>
Begin the address with "mailto" and then insert the e-mail address of the person to whom the message will be sent. When a reader clicks on this link, it will bring up the person's e-mail program and let them send an e-mail message to the e-mail address listed. It's probably a good idea to list the e-mail address in a form that will be visible to readers as well, just in case their browsers don't support this kind of link. The chances of that happening are getting smaller all the time, but it doesn't hurt to err on the side of caution. In other words, instead of the saying "Send me a message," say something like this:
<p>Send me a message at: <A href="mailto:someone@someplace.com"> someone@someplace.com</A></p>
You can help the person out by adding a subject for the message as well if you change the link as follows:
<p>If you have questions or suggestions, send me a message at: <a href="mailto:someone@someplace.com?subject="Web site suggestion.">someone@someplace.com</a></p>
Of course, someone@someplace.com should be replaced with the e-mail address to which you want the e-mail addressed, and the text within the <A> tag, in this case "someone@someplace.com" can be whatever you want it to be. For example:
<p><a href="mailto:someone@someplace.com?subject=
"Web site suggestion">
Send me your suggestions!</a></p>
Using these three types of links, people can navigate more easily within your site and to other sites of interest that you might recommend, and you can make it easy for readers to send you e-mail.