Web Pages Made Easy - Notes from Lesson 4

Lecture and Discussion

---

Lesson 4: Creating Links

What's a Web page without a link? It's a dead end! Links are the most important mechanism of the Web. In fact, they're one of the reasons the Web is called the Web in the first place. Links allow you to jump from one location to the next and find the information you're looking for. In this lesson, you'll learn how to create links to your own Web pages, other Web sites, and to specific locations in your own pages.

Linking to Other Pages

The <a> tag, or "anchor" tag, creates a link.
You then need to specify the destination for that link. To do this, you
use a hypertext reference, which is simply the address of a page
or other resource on the Web. You specify the address with the href
attribute.

For example,
if you want to create a link from your home page to another page in your
site, called "myfamily.html", you would simply write:

<a href="myfamily.html">This
is the text that will display as a link.</a>

Notice that
the <a> tag contains the text that you want shown as a link. Links stop
when the closing </a> tag is reached. By default, all links are displayed
as blue, underlined text, like this:

This
is what links look like.



Relative URLs

If you're creating a link to another page in your site, you can simply
specify the HTML page you're linking to, as the example above illustrates.
This is a relative URL, which means the page is accessed relative
to the currently viewed page.

However, if
you decide you want to store some of your pages in their own folders for
better organization, you need to specify the folder name as well. For example,
if you want all of your poetry pages stored in a separate folder named
"poetry", and you want to link to a page in that folder, you need to specify
the folder name, followed by a forward slash ( / ), and finally, the name
of the page, as follows:

<a href="poetry/page1.html">Check
out my poetry pages</a>


Linking to Other Web Sites

You can also
create links to other Web sites, such as Yahoo!, Google's search engine,
and any other site you can think of. For example, to create a link to the
Google search engine, you would write:

<a href="http://www.google.com">Search
the Web at Google!</a>


Absolute
URLs

The example
above uses an absoute URL to specify the destination page. This
is required if you want to link to a page outside of your site. An absolute
URL is the full address of a page or resource. Most addresses on the web
begin with http://, which stands for hypertext tranfer protocolβ€”the
standard means of delivery over the Web. The second part, www defines
the address as part of the world wide web, more or less. While some addresses
leave out this part, the reason isn't particularly important. More often
than not, your external address will require it.

Opening Links
in a New Browser Window

When you create
a link to another page on the Web, you're creating an exit door for your
site visitors. The external page will open in the same browser window,
so they will have essentially left your site. Do you really want them to
leave your site so quickly? Maybe, or maybe not. Depending on the nature
of your site and your own preferences, you might want to set all external
links so that they open in a new browser window.

This way, when
visitors to your site click on one of your external links, the destination
page opens in a new window, leaving the original window open. This provides
an easy way for you to keep visitors on your site.

To do this,
you need to use the target attribute
in the anchor tag, with the value "_blank",
as follows:

<a href="http://www.yahoo.com"
target="_blank">Yahoo!</a>

Link Titles

Whenever there's
information about a link that is not provided by the link text, you should
use a link title. You create a link title by using the title attribute
of the <a>
tag. The value of the title
attribute should be a text statement that provides users with information
about the destination page. For example, if it's an external page and you've
set the link to open in a new browser window, you should write something
like:

<a href="http://www.yahoo.com"
target="_blank" title="Opens in a new browser window.">Yahoo!</a>

Other circumstances
that warrant the use of a link title include:

• 
  The link downloads
  a file. Indicate the size of the file and the file type.


• 
  The link is to
  an external Web site that requires registration. (No one likes to click
  a link to an article, only to find that they need to fill out a long form
  before they can read it.)


• 
  Any information
  about the link that isn't provided by the link text.

Link titles create
"tooltips", the same feature created by alternative text for images. When
you place your mouse over a link that has a title, a tooltip pops up, displaying
the title text, as shown here:

Creating
Links to Specific Locations on a Page

As mentioned
on pages 50-51 in your book, you can also create links to specific sections
of a page. These links are commonly known as bookmark links,
or named anchors. They're generally only useful when you have a
long page that would require a lot of vertical scrolling. For example,
say you have a single page that is a long list of all your favorite links
on the Web. You have organized these links by category, but the page is
still extremely long, because, hey--there are a lot of good sites out there.

To make it easier
and faster for users to find links they might be interested in, you can
create a series of links for each category. When a user clicks on one of
these links, the browser will display the desired category at the top of
the page, so they don't have to scroll down the page and look for it.

TIP! Note that the name is logically related to the category. Naming your targets in this way will help you to read and understand your own code if you ever need to update your page in the future.

To do this,
you need to give each destination a name
by using the name attribute in the a tag. You can wrap any html tag inside
this link. For example, if you want a heading to act as a target for a
link, you would write:

<a name="music"><h2>Music
Links</h2></a>

Then, to create
a link to this location in the document, you would write:

<a href="#music">Music
Links</a>

Here, the value
of the href
attribute must start with the pound sign (#), followed by the name you
have chosen. Clicking on this link will take you directly to the tag that
has that name.

TIP! If you create a long page, you should also provide an easy way for users to return to the top of the page, as this external Web page demonstrates. To do this, you can give the first tag in your document a name, such as "top", and then create a link to this anchor after each "section" in the page.

To see a good
example of this technique, visit this
site.

Setting
Images as Links

It's easy to make images on your page links to other
pages. You already know how to embed an image, and you know how to create
a link. Now you'll simply combine the two. To make an image a link, wrap
your <img>
tag inside a link tag, for example:

<a href="TargetPage.html"><img
src="MyImage.gif"></a>

Removing
the Border on Image Links

By default,
any image that's a link will have a blue border around it to indicate that
it's a clickable region. You don't often see these on the Web because they
tend to make images look pretty ugly, as shown below.



To remove the
border from around the image, you need to use the border
attribute on the <img>
tag, and set it to 0, as follows:

<img src="MyImage.gif"
border="0">

Discussion

Now that you
know how to add links to your Web pages, you can connect your first page
to other pages you might want to create. To facilitate further learning
and the sharing of information, post your comments to the following discussion
items in the message board:

1. 
   When might link
   titles be unnecessary?


2. 
   Do you know of
   any other way to create "bookmark" links? If so, share it with the class.