PageResource.com - Web Development Tutorials

Linking to Other Pages

How to link to other pages in HTML
All right, it's time to learn how to link to another page. So let's start out by seeing what tag we use for linking:

<a href="http://www.someplace.com">Display Text</a>

The a stands for anchor, and the href="" is asking for a location to link to. The </a> is the closing tag. The text between the tags is what will show up on your Web page as a link. So, if you would like to link to our site, you would place our url, or net address, inside the quote marks. Our url is http://www.pageresource.com, so to create a link to us, place this command on the page where you would like the link to show up:

<a href="http://www.pageresource.com">The Web Design Resource</a>

It will show up on your page like this:

The Web Design Resource

See how the text was colored and underlined? In most cases, this will indicate the text is a link. If you move your mouse over the link, you should see the cursor change into a pointing hand. The mouse attribute comes in handy when a page has a whole lot of underlined text...

As another example, let's create a link to this particular page. Look in your location box near the top of your Web browser. You should see the url for this page, which is http://www.pageresource.com/html/linking.htm. To create the link, insert this url into the link tag:

<a href="http://www.pageresource.com/html/linking.htm">Linking to Other Pages</a>

Which gives us this link:

Linking to Other Pages

If you click on this link right now, your browser will simply display this page again. If you click on the link from the first example, you will end up at our home page. Great isn't it? Now, if you want to link to your own pages from your home page, just type in the address for your page inside the link tag. This will work for any page because we are using the absolute url, which means we are using the complete address to every page we are creating a link to. If you have all of your files in the same directory, you may use a shortcut called a "local url". Before you try this, be certain any file you want to create a local url link to is in the same directory as the page you are editing. (In most cases, it will be) Now, rather than typing the full url inside the tag, you can just use the filename, like this:

<a href="linking.htm">Linking to Other Pages</a>

This will create the same link we just did, but we didn't have to write as much.

Linking to Other Pages

If you aren't sure or have doubts, always use the absolute url. Typing in the full address will allow the link to work no matter where it is located on the Internet.

If you would like to see some related tutorials, try one of these:

Changing the Link Color
Using an Image as a Link
Linking Within the Same Page

Now that you have linking down, let's move on to even more fun: Adding Images to your Page.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy