Linking to Other Sites

One of the best parts about Web pages is the ability to create links to other pages on the Web. Using the following anchor tags, you can reference other people's work, point to other pages you like, etc:

<a href="URL">

Type in the title of the page after the anchor tag, and close the anchor with:

</a>

Example:

<a href="http://www.howstuffworks.com"> HowStuffWorks </a>

This is how it will look on your page:

HowStuffWorks

You can also easily combine bulleted lists with links to create a list of links.

New Windows
If you do not want visitors to leave your page when they click on one of your links to another site, add this tag to your anchor tag. When the link is clicked, instead of taking the user away from your site and into someone's else's, it will simply open a new, blank window to display the link's destination:

target="_blank"

Example:
<a href="http://www.howstuffworks.com" target="_blank">

Link Color
Blue is the standard default color for links. But you can change the colors of linked information on your page by inserting these tags within your <body> tag:

  • link="color"
  • vlink="color"
Vlink stands for "visited link." Links change colors when they have been visited. If you do not want visited links to change color, simply attribute the same color to both links and vlinks.

Example: <body link="green" vlink="green">

Linking to Receive E-mail

Try It Out!
If you would like to try out these HTML tags quickly, use the Try It! page. Simply type (or cut-and-paste) any piece of HTML code into the window and immediately see how it will look. Try It!
If you would like to receive e-mail from people who read your page, use the following anchor tag:

<a href="mailto:youremailaddress">

Then type your e-mail address (or whatever link text you would like to have shown on your page) again after the tag. Close the string with:

</a>

Example:

<a href="mailto:example@howstuffworks.com"> E-mail Me </a>

This is how it will look on your page:

E-mail Me

Creating Links to Your Own Page
Anchor tags are not only used for linking to pages on the Internet. You can also use them to link to information located within your own page. In this instance, you can omit the prefix "http://www" and just include the html document file name:

Example: <a href="company.htm"> Company Information </a>

To link to a specific portion of your page, you will need to name the section you are referring to, and include that name within the link's anchor tag. Here's how:

Name any section of your page by inserting the following tag immediately before the specific section you want the link to refer back to. You can choose any word, letter or character to use as a name:

<a name="name">

Example: <a name="5">

In the anchor tag, you refer to this portion of your page by putting a "#" in front of the name. If the named link refers to a location within the page that contains the link, the anchor tag linking to this named portion would look like this:

<a href="http://www.howstuffworks.com/#5"> Company Information </a>

If the named link refers to an html document separate from the page the link is located in, include the html document file name as well.

Example: <a href="http://www.howstuffworks.com/company.htm#5"> Company Information </a>

In the next section we'll find out how to add images.