Basic HTML: Creating Links to Other Pages

Quality Management ROI Calculator - Focus on Test Automation
The Rational Quality Management ROI calculator is intended to give you an idea of what return you can garner from implementing our functional testing solutions. Our quality management solutions offer tools to develop a continuous process, powered by automation to govern software delivery. »
Gartner MarketScope: Application Quality Management Solutions, 1Q 08
This Gartner MarketScope provides guidance for enterprises seeking to purchase tools to manage risk and software quality. We focus on tools fit for large-scale enterprise use and that are ready out of the box to manage quality requirements and functional testing. »
Whitepaper: Tips for Writing Good Use Cases
Writing a good use case isnt easy, but, fortunately, our experience can be your guide. The concepts and principles assembled here represent the works of many people at IBM, and they form a foundation of proven best practices. »
Whitepaper: The Role of Integrated Requirements Management in Software Delivery
Learn about the critical role integrated requirements management can play in helping ensure your business goals and IT projects are continuously aligned-whether you are sourcing, integrat-ing, building or maintaining your software. It also looks at ways that integration and automation can help ensure managing projects and the required changes can be executed using manageable processes that satisfy stakeholders and development teams. »

HTML GOODIES TO GO NEWSLETTER

(with updates by editorial staff)

Use these to jump around or read it all
Creating A
Hypertext Link
Here's What's Happening
E-Mail Links From
Your Page

Creating A Hypertext Link

Welcome to day four. Today you will learn only one thing: How to create a link to another page. It's a set tag format like any of the others you have seen so far. Once you learn the format, you can make as many links as you want to any other page you want.

Now an example: What is below would create a link to the HTML Goodies home page.

<A HREF="http://www.htmlgoodies.com">Click Here For HTML Goodies</A> Here's What's Happening

A stands for Anchor. It begins the link to another page.
HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
http://www.htmlgoodies.com is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag, a command inside of a command. Remember that from Primer #3?
Where it reads "Click Here For HTML Goodies" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So, write something that denotes the link.
/A ends the entire link command.

Here's what will appear on the page using the command above...

Click Here For HTML Goodies

Now, without clicking, simply lay your pointer on the blue words. You'll see the address of the link you created come up along the bottom of the browser window, down where it usually reads "Document Done".

What To Write For The Link?

There are a couple different schools of thought on this. One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...". The other states that since the hypertext links will be blue (or whatever color they're set to), that the links should be just another word in the text set up as a link.

In reality it depends what you're doing. If you're building a menu bar down the side of your page (like down the left hand side of this page) then the last thing you want is for every single link to say "Click here for HTML Primer 1 - an introduction" - simply because your menu would be as wide as your page...

However, for accessibility reasons you should try to make sure your links make sense out of context - diasbled people navigating your page can jump around hyperlinks using the "tab" key (there should be one on the left of your keyboard too). If the have skipped directly to your hyperlink which says "here" then they won't know what it's about. If they skip to one that says "HTML Primer: Introduction" then they know whether or not they want to click.

E-Mail Links From Your Page

This is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above. What this format does is place blue wording on the screen that people can click to send you a piece of e-mail.

Here's the pattern:

<A HREF="mailto:jburns@htmlgoodies.com">Click Here To Write Me</A>

Notice it's the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address. Yes, you still need the </A> tag at the end. Please notice there is NO SPACE between the colon and the e-mail address.

Here's what you get using the "mailto:" command above:

Click Here To Write Me

Go ahead, click on it. I know you're dying to. You'll get an e-mail dialogue box addressed to me. Then you can write if you want. The same thing will work for you. Just place your e-mail address in place of mine following the format above.

However, please be very careful when using this, for two reasons:

If the person only has a web based email account, and hasn't configured an email program on their computer (e.g. if you use Hotmail or Gmail instead of Microsoft Outlook) then it will open their email program for the first time and try to walk them through setting it up. This isn't a good idea if they're new to computers...
There are now little programs called 'bots' which wander round the internet looking for email addresses to send spam (junk emails) to. If you don't want to receive them, then one part of this is not publishing your address on the internet. So think long and hard before you use a mailto!

And that wraps up Primer #4. Next time we get into the fun part of the World Wide Web, images.

Creating A
Hypertext Link
Here's What's Happening
E-Mail Links From
Your Page