Playing with Web Design

Working with Links

NOTE

In this tutorial I have added some line breaks to the example coding. If you decide to copy this code for your own pages, you don't need to add the carriage returns unless you want to. It will work correctly either way.

There are three basic types of links you will use in creating websites:

When you want to link to other pages, you use the link tag. It looks something like this:

<a href="address">The text that people click to get to the page.</a>

The word address would be replaced with the address of the page you want to link to. There are two types of link addresses: relative and absolute. Use relative addresses to link to other pages within your own web site. For example, if I had a page called news.html, I could create a link to it like this:

Read the latest <a href="news.html">news</a> about this site.

This assumes that the file "news.html" is located in the same directory where the page with the link is stored. You can refer to files in other directories on your site by including the relative path. For example, if I have a directory called "personal", and I want to provide a link to a file in that directory from a file in the main directory, I would use a link tag that looked like this:

Take a look at <a href="/personal/myresume.html">my resume.</a>

The second type of link, the absolute link, includes the full internet address of the page to which you are linking. For example, if you wanted to create a link to my site, The Tangled Web, you would create a link tag like this one:

Visit the <a href="http://www.tangledwebgraphicsets.com">Tangled Web</a>

The last type of link that you might want to include in your pages is the "mailto:" link. This link allows people to send e-mail to you easily and it uses the same link tag that is used to link to another web page. The difference is in the way you specify the address. An e-mail link looks like this:

<a href="mailto:irene@playingwithwebdesign.com">Send me a message!</a>

Begin the address with "mailto" and then insert the e-mail address of the person to whom the message will be sent. When a reader clicks on this link, it will bring up the person's e-mail program and let them send an e-mail message to the e-mail address listed. It's probably a good idea to list the e-mail address in a form that will be visible to readers as well, just in case their browsers don't support this kind of link. The chances of that happening are getting smaller all the time, but it doesn't hurt to err on the side of caution. In other words, instead of the saying "Send me a message," say something like this:

<p>Send me a message at:</p>

    <a href="mailto:webmaster@tangledwebgraphicsets.com">
      webmaster@tangledwebgraphicsets.com<
    /a>

That's it for basic link tags. There are other parameters you can include, but this will get you started.

Exercises

  1. Go back to your About page and add some links. Maybe links to your employers or to some of your favorite websites.
  2. Add an email link to that About page so people can contact you by email.
  3. One more thing. Go through the About page one last time and add id attributes. Then add links at the top of the page that will allow readers to jump directly to the sections.