Marketing for Libraries Logo

HTML Section: Links

Many web pages contain links to places inside or outside the current website.

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.

"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.

"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.

Links

The <a> tag defines a link (also known as a hyperlink). This element directs the browser to change to another document.

The <a> tag requires the href attribute indicating the address of the link destination. The address is always placed in quotes. Also, notice the = after href and before the address. Finally, notice the placement of the <>.

Examine the following sample code.

Go to the <a href="http://eduscapes.com">EduScapes Website</a>.

This code will display as:

EdusSapes Website

By default, links will appear as follows in all browsers unless you specify a different style. In the example above the link is not underlined. That's because I've set my the styles to be without the underline:

Email Links

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.

Examine the following sample code.

<a href="mailto:alamb@hotmail.com">mailto:alamb@hotmail.com</a>

<a href="mailto:alamb@hotmail.com?subject=Website Comments">Email Website Comments</a>

This code will display as:

mailto:alamb@hotmail.com

Email Website Comments

 

Target Attribute

Sometimes you want the link to appear in the same window in your browser. At other times, you want it in a new window.

The target attribute defines where you want the link to appear.

Examine the following sample code. In the case below, the website will appear in a new blank window:

Open a new window and see <a href="http://cnn.com" target="_blank"> CNN </a>.

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.

try itTry It!
Go to w3schools and read about Special Links.
Use the Try It Yourself buttons to practice coding.

Internal Page Links or Bookmarks

Sometimes you want to create bookmarks inside a document so you can jump to a particular place in a document. They're invisible to the reader, but the link will go to a particular spot indicated.

Use the id attribute to mark the location inside the HTML document. Check out an example from w3schools. Notice that the word "tips" is used. It could be anything you wish. Some people use letters like a or b.

<a id="tips">Useful Tips Section</a>

Next, create a link on the same page. All that is needed is a # and the id name such as #tips.

<a href="#tips">Visit the Useful Tips Section</a>

You can also use these bookmarks from other pages. In that case, you need the name of the file or URL and the id name such as #tips.

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

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.

Examine the following sample code.

<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>

This code will display as:

Content Aspects
This is the section where I discuss the content aspects of the website I've nominated.

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.

<h3><a name="start" id="start"></a>Choosing a Pet</h3> 
<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><h4 name="cats" id="cats">Choosing Cats and Kittens</h4></p>
<p>When choosing a cat or kitten... </p>

<p><h4 name="dogs" id="dogs">Choosing Dogs and Puppies</h4></p>
<p>When choosing a dog or puppy..</p>

<p><h4 name="fish" id="fish">Choosing Fish</h4></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

try itTry It!
Go to w3schools and read about Links.
Use the Try It Yourself buttons to practice coding.

Image Links and Maps

Use images to make your links more interesting.

Image Links

Creating a link on an image is easy. To try an example, go to Image Link.

Examine the following sample code.

<a href="pets.htm"><img src="frog.gif" alt="frog icon" width="50" height="50"></a>

<a href="http://mcdonalds.com/"><img src="jumpingburger.gif" alt="jumping burger" border="0"></a>

jumping burger

Image Maps

Image maps are an exciting and engaging way to combine images with links.

If users click on particular coordinates on a visual, you can provide a link to a particular location. To try an example, go to Image Map.

Examine the following sample code.

<p>Click on the library floorplan to learn about that area of the library:</p>
<img src="library.gif" width="300" height="300" alt="Library Floorplan" usemap="#librarymap">
<map name="librarymap">
<area shape="rect" coords="0,0,82,126" alt="nonfiction" href="nonfiction.htm">
<area shape="circle" coords="90,58,3" alt="fiction" href="fiction.htm">
<area shape="circle" coords="124,58,8" alt="reference" href="reference.htm">
</map>

It can be a hassle to figure out the coordinates. Use online services such as Image-Maps and Online Image Map Editor.

You can also use a Web 2.0-type tool and embed the results. Speaking Images and ThingLink provide tooks for making hyperlinks on images.

CSS Navigation Bars

One of the most common applications of links is the creation of a navigation bar.

Vertical Navigation

A basic navigation bar consists of a series of links in a list.

Examine the following sample:

<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="dogs.htm">Dogs</a></li>
<li><a href="cats.htm">Cats</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>

Horizontal Navigation

Another approach is to create a list across the page.

Examine the following sample:

<p> | <a href="index.htm">Home</a> | <a href="about.htm">About </a> |
<a href="dogs.htm">Dogs</a> | <a href="cats.htm">Cats</a> |
<a href="contact.htm">Contact</a> | </p>

| Home | About | Dogs | Cats | Contact |

try itTry It!
Go to w3schools and read about Navigation Bar.
Use the Try It Yourself buttons to practice coding.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson