Creating Hyperlinks and Anchors

Hyperlinks to Other Pages

One of the fun parts of creating Web pages is making links to your site's other content, pages or Web sites that you find interesting, or images that you like. Some of the least fun aspects of creating and maintaining Web pages is making sure that your links work properly, and keeping them updated in case your favorite Web sites change names or locations. Fortunately, HTML is easy to work with and you'll find that you have more issues dealing with text alignment, spacing, and font styles than you do with your links.

Hyperlinks are created using the anchor tag, represented by . This same tag is used for external and internal links. Below is a sample:

Content for your link

Tips and Tricks

Something to consider when constructing your Web pages: how portable do you want the pages? For most people creating personal Web sites, you probably want to construct as many of your links as possible to be relative path names in the anchor. Why? If you change ISPs and lose access to your old server, you will need to update all links that refer to documents on that server. If your links are to local URLs, just make sure to post your pages using the same directory structure layout on the new server and everything will work as it did on the old one.

Be aware also of case sensitivity. You may be posting your pages to a Unix server or a Windows server. Windows does not care about case, so "MYDOC.html" is the same as "mydoc.html"; Unix sees those files as separate entities and may return a "404: Document not found" error. Directory structure separators on Windows-based machines are indicated by back slashes (\), whereas they are indicated by slashes (/) on Unix systems. Use whichever you wish; between your browser and the Web server, they'll figure it out. I use forward slashes in the Unix style just because it's an easier key for me to hit on my keyboard.

Give people an opportunity to tell you about broken links, but make sure that link never goes bad. How do you do that? It's a special URL trick for an anchor. Take a look at the example below:

Send me an email!

By specifying "mailto:" as the initial part of the URL and putting your email address behind it, the user is in for a treat when they click on the link. Their default mail client will start up, opening the message composer for a new mail message addressed to you. Want to be really cool about it? Try this:

Send me an email!

When you tack on the "&subject=" to the link, the subject line of the email message is filled in as well. Aren't you loving this??? Just remember that if you include a link like this so that people can rave about your site or tell you about links that aren't working, you must ensure that this link is valid!. If you change email addresses, change the link.

In the very first code sample on this page, I listed "Content for your link" between the opening and closing tags. Why didn't I say "text"? Because you can use images as well, as you'll see in the next part of this walkthrough.


So we have links, now; what's next? How would you like to add some images to your site, or maybe even figure out how to put wallpaper on your site rather than using a solid color as your background?