Computer Science Illuminated, Third Edition

eLearning

Animated Flashcards
Live Wire
Cryptic Crossword Puzzles
Ethical Issues
Biographical Sketches
Did You Know
Goin Live
Google Code Digital Lab Manual
Online Glossary
The Learning Store
Language Library
Download PEP/7
Instructor Resources
Student Resources

eLearning Home

Lab #5

Links


5.1 The Anchor Tag

The anchor tag (<a>) provides us with the ability to link from one document to another on the World Wide Web.  When you think about it, the anchor tag makes the web possible, since it permits us to create a virtual web of documents.

To use the anchor tag (and create a link in our document), we surround the link's text with the <a> and </a> tags.  The opening anchor tag must also contain the href attribute specifying the location of the destination document we are linking to.  Thus, an anchor tag takes the form of:
<a href="URL of destination document">link text to display</a>
For example, if we wished to create a link to the web site at Virginia Tech, we would use the following:
<a href="http://www.vt.edu">Virginia Tech's web site</a>
This would result in a link such as: Virginia Tech's web site.  Note that when specifying the URL of the destination web site, we included the http:// part of the URL to correctly specify what we are linking to.  Technically, we can specify a variety of communications protocols in a URL (like http, ftp, and others), so it is a good idea to be clear which protocol we would like to use.  This particular example links to a site that is not part or our network or web server (and is known as an external link).

To link to a page you create (that is served from your web server), we remove the http:// and address of the web site, and simply put the name of the document as the link destination in the href attribute.  Thus, if we wanted to link from our Cat Window Lounger page to the main page of our site we could simply create a link that looks like
<a href="main.html">Return to home</a>
and place it in the Cat Window Lounger's web page.

We are going to take advantage of links now and grow our web store!  We will create several more web pages of products, as well as an "entry page", or "home page" for the front of the store.  The new product pages will look similar to the existing product page we have already created (but with new products listed).  We'll add links to each of the product pages to return us to the "home page" for the store, and similarly, we'll use links on the "home page" to provide access to each product.  The code below is from our new "home page" for the store.  A screen capture of the result can be seen in Figure 1, while in Figure 2 we point out one of the new links on the product page.
<html>
<head>
<title>Pete's Pet Store</title>
</head>
<body>
<center><img src="storeLogo.gif"></center>
<hr width="75%">
<p>Welcome to Pete's Pet Store!  Located in the heart of the old city, we specialize in unique and unusual products for your cherished friend.  Pete's Pets started in 1975 with just products for cats, however in 1990 we expanded our location and opened up our canine department.</p>

<p>We feature on-site grooming for your pet, and also obedience and training classes for both cats and dogs.</p>

<p>We're currently working to expand our on-line presence with this store, so please bear with us.  Below, you can find a link to our current offerings via the Internet.  We ship anywhere in the continental United States, Europe and Canada!</p>

<hr width="75%">
<center><b>Our products</b></center>
<p><a href="catLounger.html">Cat Window Lounger</a> - A rest area for your feline which mounts on the sill of a window.</p>

<p><a href="catnipToy.html">Deluxe Catnip Toy</a> - Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</p>

<p><a href="litterScoop.html">Cat Litter Scooper</a> - Our most popular item!  No home should be without one!</p>
<hr width="75%">

<center><b>Our Favorite Links</b></center>
<p><a href="http://www.petswelcome.com">PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</p>

<p><a href="http://www.petdental.com">PetDental.com</a> - Information about caring for your pet's teeth and gums.</p>

<hr>
Pete's Pet Store
<i>&copy; 2002</i>
</body>
</html>
  Our store's "home page", linking to our products and external sites.
Figure 1: Our store's "home page", linking to our products and external sites.

  The new "Return to home" link on the product page.
Figure 2: The new "Return to home" link on the product pages.

Lab Activity #1:
Create several additional web pages for your web site as we did for ours.

Consider creating a home page linking to a page for your resume, a page linking to all of your school-related links (school's web site, course web pages, school sports team schedule pages) and a page linking to some of your favorite web sites on the Internet (search engines, web sites for your favorite bands, etc.).


5.2 Internal Links

Links don't always need to point to other web page on the World Wide Web or to other pages on the same server.  You can create a link that points to a specific location within the same document by using a pair of anchor tags.  First, to define a location in a document which will be the destination of a link, we use the anchor tag to name the location.  For example, if we wished to create a named location for Section 5.4 of this web page, we could use the following HTML:
<a name="section5_4">5.4 Link Attributes</a>
Generally speaking, browsers will display links as blue underlined text (so that it is recognizable as a link to the user).  Named link targets (as we defined above) are not displayed as links, but rather are hidden to the user.  However, to reference this named location, we do need to create a link that the user can click their mouse on.  To do this, we'll use the href attribute to specify the named location, however, the name will be proceeded with a # character.  For example, to link to our named location for Section 5.4 we would use the following:
<a href="#section5_4">jump to Section 5.4</a>
Now, when the user clicks the link that says "Section 5.4", the browser will display the portion of the document which was named "section5_4".

We can take this one step further.  We can reference a named location in another document by specifying the document name followed by the name location in the href attribute of an anchor tag.  Thus, to link the Section 5.4 location from another web page we would type:
<a href="lab5.html#section5_4">jump to Section 5.4 of Lab 5</a>
Lab Activity #2:
Create named locations on your resume web page which correspond to key areas of the document.  For example, create named locations for your address, previous work experience, and educational details.

Then, provide links on your "home page" to the named locations on the resume page.

5.3 Images as Links

Nearly any part of a web page can be the basis of a hyperlink.  In fact, everything that is between the opening and closing anchor tags can be turned into a link.  One popular example of this is using images as links.  You can create a link that is an image by embedding the image tag inside of the anchor tag.

By default, an image will have a one pixel border around it, when when rendered as a link will generally be blue.  However, if we use the border attribute of the image tag, we can control the thickness of the border to help enhance it.  We can even turn off the border all together to hide the link.  The table below contains several examples of the logo used on the main page for our store, each linked to the main page of the store.

A linked logo with a one pixel border
A linked logo with a three pixel border
Store logo with a one pixel border
Logo with a three pixel border
<a href="main.html"><img src="storeLogo.gif"></a>
<a href="main.html"><img border="3" src="storeLogo.gif"></a>
A linked logo without a border
Logo without a border
<a href="main.html"><img border="0" src="storeLogo.gif"></a>

Lab Activity #3:
Modify at two of the images on your web pages to be a hyperlink.  Add different sized borders around these images.

5.4 Link Attributes

There are two other attributes for the anchor tag we should introduce as well.  The first is the target attribute.  We'll use this attribute extensively when we cover HTML frames, but you can start to use one aspect of this attribute right away.  If we include the target="_blank" attribute value in a anchor tag, a new browser window will appear with the contents of the linked page (once the user has clicked on the link).  Many web sites use this technique to keep one browser window on their site (the original window), while permitting the user to "click through" to another site.

In the HTML code fragment below, we have modified the links to the external web sites on our main store page such that when a users clicks on these links a new browser window is opened.
<center><b>Our Favorite Links</b></center>
<p><a target="_blank" href="http://www.petswelcome.com">PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</p>

<p><a target="_blank" href="http://www.petdental.com">PetDental.com</a> - Information about caring for your pet's teeth and gums.</p>
The other attribute to note here is tabindex.  By providing the anchor tags on a page with this attribute (and a number between 0 and 32767), we can control the focus order that each link receives.  This concept is important to people with disabilities who browse web pages.  Since not every uses a mouse, most browsers will support more than one method of clicking on a link.  For example, many browsers will allow the user to hit the Return or Enter key to follow a link.  By tapping the tab key, we can "visit" each link in the sequence defined by the tabindex attributes and then hit the Return or Enter key to visit the link.

In the example below, we have reorganized the links on our main web page so that the tab sequence is now from the last link on the page to the first (bottom up).  Note that neither the target or tabindex attributes provide instructions on changing how the link is displayed in a user's browser.  Any changes to their display would be browser specific.
<hr width="75%">
<center><b>Our products</b></center>
<p><a tabindex="5" href="catLounger.html">Cat Window Lounger</a> - A rest area for your feline which mounts on the sill of a window.</p>

<p><a tabindex="4" href="catnipToy.html">Deluxe Catnip Toy</a> - Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</p>

<p><a tabindex="3" href="litterScoop.html">Cat Litter Scooper</a> - Our most popular item!  No home should be without one!</p>

<hr width="75%">
<center><b>Our Favorite Links</b></center>
<p><a tabindex="2" href="http://www.petswelcome.com">PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</p>

<p><a tabindex="1" target="_blank" href="http://www.petdental.com">PetDental.com</a> - Information about caring for your pet's teeth and gums.</p>
Lab Activity #4:
Modify two of your links so that you utilize the target attribute as we did.

Change the tab sequence of the links on one of your page so that the sequence flows bottom up, rather than top down.


5.5 Absolute vs. Relative Links

Finally, we should say something about links to documents served by the same web server.  Generally speaking, it may be better to organize our web pages in directories.  Up to this point, we have assumed that all of your web pages (and images) are all contained in the same directory location on your computer (or web server).  If you look closely at the underlying source code for these web pages, you'll see that we created a subdirectory named images, where we store the images used in our examples.  

Despite how we organize our files, we can access them as links or images in our HTML by using relative path names to our files.  For example, we might want to create a products directory which stored the web pages for our products, and an images directory for all of the images for our web site.  We can create these directories and place them in the same directory that contains the main page (main.html) for our web site.  This would result in a file system that appears as:
(Some directory holding our main page)
    main.html
    /products
        catLounger.html
        catnipToy.html
        litterScoop.html
    /images
Then, from within main.html, we can link to our products pages with a href attribute that appears as:
<a href="products/catLounger.html">
Note that we did not preced the products directory with a forward slash (those were shown above to indicate that they were directories in our file system).  This is known as a relative link.  That is, we linked to a file via a reference that is relative to the page that the link is contained on.  Similarly, a link from the Cat Window Lounger product page can contain a relative link to the main page with an anchor tag such as:
<a href="../main.html">
Again, the web page specified in the href attribute is a relative link to a file located in the directory above the directory which contains the product web page.

An absolute link is a little more tricky and implies that you know something about your web server.  Absolute links point to web pages which are stored in directories relative to where all of the documents reside.  This special location is known as the Document Root.  For example, your web server may have the Document Root pointing to the directory C:\WWW\Files, and your web pages may really be located in the C:\WWW\Files\Students\YOURNAME directory.

If you wished to link to a file named introCourse.html in the directory named C:\WWW\Files\Courses, you can use an absolute link such as:
<a href="/Courses/introCourse.html">
Here, the absolute link points to a file located in the Courses directory which falls under the Document Root directory (C:\WWW\Files).  Don't worry that the slashes don't point the same way, the web server will take care of that.  (Windows and UNIX computers use different directory separation characters, but the web servers can distinguish your intention no matter which way your directory separation characters point (forward or backward slashes).

Lab Activity #5:
Modify the structure of your web pages and use directories to help organize your growing web site.

Leave at least one file in the parent directory, and ensure that it contains relative links to your other web pages in the subdirectories.

Talk with your web master if you are serving your web pages via a web server, and find out what documents you can link to with absolute links.  Some schools will provide system or web server documentation in this area, making for excellent absolute link destinations.




About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN:  0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.

 
Educators: More Information About This Text Other Computer Science Titles at Jones and Bartlett
Copyright 2019 Jones and Bartlett PublishersContact webmaster