CSc 050: Links

The ability to put hyperlinks (links for short) onto a web page is a critical one, since it not only gives the user access to other related web sites, but it lets you, the web author, create multiple web pages and then use links to connect them together.

Any link, such as this one going to the Union home page, must always have two things specified:

  1. the URL (web address) of the page you wish to link to (in the above example, the URL would be "http://www.union.edu")
  2. the text of the link itself (ie. the "blue text" which the user actually clicks on. In the above example, "Union home page" is this text.)

The Anchor Tag

Creating a link is done with the anchor tag, which specifies the two pieces of information listed above. It has the following form:

<a href="[URL goes here]">[link text goes here]</a>

Note the space between "a" and "href" above. You replace the colored text above with the appropriate information. Thus, I created the Union home page link by using this anchor tag in my HTML file:

<a href="http://www.union.edu">Union home page</a>

If you wish to link to another page which you yourself created, you just replace the URL in the anchor tag with the name of the HTML file you wish to link to. Let's say you made a home page called "index.html" and then another page called "friends.html" which contained info about your friends. To place a link in your home page that would go to your friend-info page, this anchor tag would go in "index.html":

<a href="friends.html">Check out my friends!</a>

Other Anchor tag uses

The anchor tag is quite versatile. You can create links to pictures and sound files, and you can also make an email link which lets users email you right from within the browser. All these things are done by replacing the URL in the original anchor tag with other things. The following table shows how to do them:

Link type What to do Example HTML Notes
Picture link Replace URL with name of picture <a href="dog.gif">My dog</a> Shows picture on a page by itself. See our image tutorial for how to place graphics within a web page.
Sound link Replace URL with name of sound to play <a href="song.snd">listen to this!</a> Assumes the browser has access to a sound player
Email link Replace URL with email address preceded by mailto: <a href="mailto:cfernand@union.edu">Mail me</a> mailto: is one word, no spaces. Don't forget the colon!

The anchor tag is one of the most powerful tags in all of HTML. There are even more uses than the ones listed here. See the Barebones guide or your instructor for more information.

Back to Tutorial Index