Coding: XHTML: Link Tags
Links are an important part of the power of the web. You can link to a particular file or a website. Keep in mind if you move files or if website change, your links won't work. Before you create links, be sure that all your HTML files are in the same folder.
Read Chapter 6: Links by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
Absolute vs Relative URLs
There are two types of links: absolute and relative.
An absolute URL contains then entire path to a file including the scheme (http://), server (www.eduscapes.com), path (.../nature/skunk/), and file (act.htm). A scheme can be http://, ftp, mailto, or other type of file.
Example
"http://www.eduscapes.com/nature/skunk/act.htm"
"http://42explore.com/subject.htm"
A relative URL contains a location that is based on the user's current position. For example, it might just provide a filename with no path if the file is within the same directory. Or, it might send the user to a file in another folder in the same root directory. In this case the path (week1/) and filename (baby1.html) would be listed.
Example
"baby1.html"
"week1/baby1.html"
The type you choose for a link is important. If you're creating a link outside your own website, you'll use an absolute URL. If you're moving within the same folder of your own website, you'll probably use a relative URL.
Link to Files
Links use the <a> tag. The href is the attribute that indicates the file to be referenced in the url.
Practice a link at TryIt Editor.
Example
<a href="filename"> type word to make active here </a>
Go to the <a href="zigzag.html">ZigZag Nomination Page</a>.
Result
Go to the ZigZag Nomination Page.
Special Link to Files
You can add targets to enhance your link tags.
Use target="_self" to open the linked file or URL into the window that contains the link. This is the default, so you usually don't need to specify it.
Use target= "_blank" to open the linked file or URL in a new, unnamed browser window.
Use target="_parent" to open the linked file or URL into the parent window that contains the link if you're using frames.
Use target= "_top" to open the linked file or URL into the full browser window removing frames.
Practice a new page link at TryIt Editor.
Example
Open a new window and see <a href="http://cnn.com" target="_blank"> CNN </a>.
Result
Open a new browser window and see CNN.
Links to URLs
If you wish to create a link to a website, be sure to include the entire URL including the http://. You can link to all kinds of files such as Word documents, PowerPoint presentations, and PDF files. Things that aren't HTML documents will normally saved to the user's hard drive for viewing later.
Examples
<a href="URL"> type word to make active here </a>
Go to the <a href="http://eduscapes.com">Eduscapes Website</a>.
Read the <a href="http://eduscapes.com/tap/occ1.pdf">One Computer Classroom </a> document.
Result
Go to the Eduscapes Website.
Read the One Computer Classroom document.
Links to Email
It's important to have an email contact on each of your web pages, so people can contact you if they find errors or have questions. Be sure to include mailto: before your email address. It's a good idea to spell out the email address so that people who do not have their web browsers configured to handle email can still know how to contact you. You can also indicate the subject you wish to have for the email.
Example
<a href="mailto:emailaddress"> enter word to make active </a>
<a href="mailto:alamb@hotmail.com">mailto:alamb@hotmail.com</a>
<a href="mailto:alamb@hotmail.com?subject=Website Comments">Email Website Comments</a>
Result
Links Within Pages
Sometimes you want to link within a page. For example, you might provide a list of topics at the top of the page and use a link to scroll down the page to the matching topics. For this, you need a link and a corresponding anchor or target.
First, set up the list at the top of the page. For the example, I used the topics of Content Aspects, Design Aspects, and Technical Aspects of the website. Next, enter the content with key headings down the page. For this example, I would have headings and paragraphs related to each of the four topics. I just included the Content Aspects topic as an example.
Now, create an anchor or target at each content heading. To do this you use the <a> tag and the id attribute (you can also use the name attribute, but it is deprecated). It is often a good idea to use both the name and id attribute to ensure the best results in all browsers. Use a meaningful name or id. I used the word aspects1.
Example
<a href="#markname"> word to make active </a>
Example
<ul>
...
<li><a href="#aspects1">Content Aspects</a></li>
...
</ul>
<a id="aspects1" name="aspects1"></a> <p>Content Aspects</p>
<p>This is the section where I discuss the content aspects of the website I've nominated.</p>
Result
- Content Aspect
- Design Aspects
- Technical Aspects
This is the section where I discuss the content aspects of the website I've nominated.
Practice links within a page at TryIt Editor.
You need anchors and links to anchors. The anchors generally go in front of your headings down the page. For example, you might have headings called Choosing Cats and Kittens, Choosing Dogs and Puppies, and Choosing Fish. You need anchors for each of these headings. Use a unique descriptive word in the id attribute for each heading. Next, return to your list of topics. To make the link active, you use the <a> tag. Instead of linking to a file or website, you enter the name of the anchor you created such as cats. You need to use the # character before the target or anchor name.
It's also a good idea to put a "Return to Top" anchor at the end of each section that returns the reader to the top of the page. Notice in this case I used both name and id attributes. Either would work.
Example
<a name="start" id="start"></a>
<h1>Choosing a Pet></h1>
<ul>
<li><a href="#cats">Choosing Cats and Kittens </a></li>
<li><a href="#dogs">Choosing Dogs and Puppies </a></li>
<li><a href="#fish">Choosing Fish </a></li>
</ul>
<p><h2 name="cats" id="cats">Choosing Cats and Kittens</h2></p>
<p>When choosing a cat or kitten... </p>
<p><h2 name="dogs" id="dogs">Choosing Dogs and Puppies</h2></p>
<p>When choosing a dog or puppy..</p>
<p><h2 name="fish" id="fish">Choosing Fish</h2></p>
<p>When choosing a cat or fish..</p>
<a href="#start"> Return to Top of Choosing a Pet Section </a> <br/>
Choosing a Pet
Choosing Cats and Kittens
When choosing a cat or kitten...
Choosing Dogs and Puppies
When choosing a dog or puppy..
Choosing Fish
When choosing a cat or fish..
Return to Top of Choosing a Pet Section
Links on Images
You can create a link on an image. In other words, when you click on the image, it will go to the file or page.
Practice a image link at TryIt Editor.
Example
<a href="http://mcdonalds.com/"><img src="jumpingburger.gif" alt="jumping burger" border="0"></a>
Result
Try It!
Add each of the types of links discussed to your practice page.
Your Document
Your document should now look something like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Annette Lamb's Personal Page</title>
<meta name="author" content="Annette Lamb" />
<meta name="keywords" content="pet, dog, puppy, cat, kitten, fish" />
<meta name="description" content="Choosing a pet." />
<meta name="copyright" content="© 2007 Annette Lamb" />
</head>
<body>
<a name="start" id="start"></a>
<h1>Choosing A Pet</h1>
<p>Before you choose a pet, it's a good idea to explore the possibilities. Are you ready for the responsibility of a pet? Read the book <b>Pets for Kids</b>.</p>
<p>The most popular pets are:</p>
<ul>
<li><a href="#cats">Choosing Cats and Kittens </a></li>
<li><a href="#dogs">Choosing Dogs and Puppies </a></li>
<li><a href="#fish">Choosing Fish </a></li>
</ul>
<p><h2 name="cats" id="cats">Choosing Cats and Kittens</h2></p>
<p>When choosing a cat or kitten... </p>
<p><h2 name="dogs" id="dogs">Choosing Dogs and Puppies</h2></p>
<p>When choosing a dog or puppy..</p>
<p><h2 name="fish" id="fish">Choosing Fish</h2></p>
<p>When choosing a cat or fish..</p>
<a href="#start"> Return to Top of Choosing a Pet Section </a> <br/>
</body>
</html>