Slacker's Guide to HTML: Making Links with HTML

Without some links on your site no one will ever want to be your friend. So unless your some kind of hermit serial-killer who doesn't need any friends I suggest you read this entire page.

The Basic Link

Links are the HTML tags that make the world-wide-web a web. Without links to different sites, people wouldn't be able to navigate around the Internet and find whatever it is they need. For the most part, each and every page on the 'Net is connected, whether it be through one link straight from Mr. Popular themselves or through a series of 10,000 links. It's like Six Degrees of Kevin Bacon except for the fact that the Internet isn't named after a delicious and salty snack made from a pig's fatty belly.

Anyway, in order to make a link you have to know one thing: what the address of the site you are linking to is. Once you know that, you're set. A link has two ends, called anchors. The link starts at the "source" anchor and points to the "destination" anchor.

Now, let's assume that you want to link to Google for some reason. Google could be the destination. And this is what that link would look like: Google

That link was created using the following HTML:

<a href="http://www.google.com/">Google</a>

The string of letters and characters http://www.googlel.com/ is the address of Google. Internet addresses are also known as URL's. URL's, as explained in the HTML Basics section, are Uniform/Universal Resource Locators.

The opening and closing tags for a link are as follows: <a href="address"> and </a>. as you can see the opening tag is more elaborate than the closing tag and that is because the opening tag includes the reference to the exact place the link will point to. You should place the title of the link in between those two tags. The title is what will display and what you visitors will click on.

That, my friend, is all you need to know to make links. Everything that follows is extra. Keep in mind that a true HTML pimp would know how to make more than just a standard text link, so I suggest you keep reading a little while longer.

Image Links

Image links are images that act as links. It's very easy to turn a simple image into an image link. Everything you just learned in the above section on basic links is used in this lesson, plus a little bit of HTML for images. In the simplest and truest of terms, image links are just the HTML for images and links mixed together. The HTML for an image link going to Google, which is located at http://www.google.com and presented by an image of the Google logo would appear like this:

<a href="http://www.yukyuk.com"><img src="googlelogo.gif" border="0"></a>

As you can see, instead of text title representing the object you click on to activate the link, an image named googlelogo.gif is used. Also, there is an attribute used in this: border="0". That attribute specifies the width of the line that can be used as a border to designate where the image and the link ends. Borders are in most cases undesirable unless you want it there for style consideration.

Anyway, the product of that above HTML linking to Google.com is below. Alongside that is an example of what it would look like with a border.

And that's all there is to image links. Moving on...

Email links

E-Mail links are very easy to do and very useful. No one wants to cut and paste E-Mail addresses, they just want to click somewhere and have the hard stuff done for them. You can also use the image tag inside the email link in order to use an image for the email link. Below we have a sample link which will open up your Email program (if you have one already set up) and get a new message started with the email address already filled in.

E-Mail me!

That email link was created using this HTML:

<a href="mailto:yourname@yourhost.com">E-Mail me!</a>

Like all links you shouldn't forget the closing tag (</a>). Pretty easy, huh? And there's even more to learn!

Adding the Subject

To make an email link that already has the subject filled out, then just add ?SUBJECT=" on to the end of the email address inside the email link tag, right before the end of the quotes and the closing bracket. To get an idea of what I am talking about just click on this link and take a look at the subject field: Email me...again!

And the complete HTML for that email link with the subject already filled out is below:

<a href="mailto:yourname@yourhost.com?subject=this 
is the subject">Email me...again!<7/a>

Go ahead, click that link again if you still don't understand what is going on.

And don't despair! There's even more you can do with the E-mail link. Yes! It's true! On top of adding the subject, there are some other things you can do. You can add a carbon copy recipient, a blind carbon copy recipient, or use a combination of the subject with either or both of these.

To send a carbon copy, you add the cc= element after the question mark, followed by the e-mail address of the person you want to send the carbon copy to. Click on this link for a sample: Send Me Mail with a CC added!

And the HTML for that cc element is below:

<a href="mailto:yourname@yourhost.com?cc=otherperson@otherhost.com">>
Send Me Email with a CC added!</a>

Same thing for doing a blind carbon copy, except you use the bcc= command in place of the cc= command. Check out another sample email: Email me with a blind carbon copy!

And the HTML for that bcc element added is below:

<a href="mailto:yourname@yourhost.com?bcc=blind carbon 
copy, beotch!">Email me with a blind carbon copy!</a>

But WAIT! It gets even better! You can send the carbon copies and blind carbon copies to multiple addresses by separating them with commas: Check it out!

And the HTML for that is...BELOW!

<a href="mailto:yourname@yourhost.com?bcc=billgates@microsoft.com, 
someother@theother.com">Check it out!</a>

Now, if you want to combine more than one of these commands after the question mark, you add them in using an & sign at the end of the first command or between any extra commands. For instance, if you want a subject and a blind carbon copy it would look like this:

<a href="mailto:billgates@microsoft.com?subject=Guys, time to be pals 
again&bcc=stevejobs@apple.com">Hey, Steve & Bill! Be friends!</a>

And the output of that code can be seen by clicking on this link: Hey, Steve & Bill! Be friends!

Simple as that! it's just a bunch of simple tags which are easy to learn all jammed together.

File Links

A link to a file is the same as a link to a page. As a matter of fact every web page you look at is a file, an HTML file. Simply use the file's address instead of a web page URL. Example:

Download Pixie (62Kb ZIP), a program which shows the RGB Hex value for any pixel you move the pointer over.

That link would lead to a file being downloaded. In most cases (if you are have your browser and anti-virus software set up correctly) you will be prompted and warned that downloading a program can be dangerous. In this case it is a ZIP file and it's not going to set off many alarms.

The HTML for that link would appear as this:

<a href="pixie.zip">Download Pixie</a>

As you can see it is just as easy to make a link to a file as it is to make a link to a web page.

Jumping/Interpage Links

Interpage links, or whatever you want to call them, are links which lead to other spots that are on the same page as the link. Let's set up the basics right now and then I'll totally explain it. The word anchor in this lesson will apply to the target of the internal link. If you clicked on the link at the top of this page to go to this section of the page, then you used an internal link and the destination anchor was the text right above you which says Jumping/Interpage Links.

The destination anchor is the spot you go to.

With internal links, the link (source anchor) and target (destination anchor) are both on the same page, obviously. So, the link has to point to something other than a conventional anchor. We can't simply type in the address of the page because we are already at the target page. We must place destination anchors in the page so that out internal links will have targets within the document. The way we will point to targets is going to be with a pound sign (#) and chosen term for the target. Look at this stunning graphical representation:
Internal or Jumping Links Diagram Example
This is what "Dick's Online Viagra Deals" might look like. As you can see there is a table of contents and there are targets on that page. The link "Available Brands" leads down to the identically-named "Available brands" target lower on the page.

Now I will show you the HTML since you should have a solid understanding of the idea by now:

<a href="#availablebrands">Available Brands</a>
          > > > > 
<a name="availablebrands">Available Brands</a>

You can jump to specific areas on another page, too. Simply point to the address of the page area you want to go and add the pound sign and term: <a href="http://www.domain.com/webpage.html#targetterm">Link On Other Page</a>

That HTML would lead you to the page known as webpage.html at the section (anchor) called targetterm.

Let's sum it all up: <a href="#sample">Go to sample</a> points to this <a name="sample">Sample is here</a>

New Window Links

You might want outgoing links to open up in new windows in order to keep your hapless victims stuck on your site forever. Which could mean that you are either very smart or that you lack confidence.

To make a link open up in a new browser window, add the following code to your link in HTML: target="resource window"

The finished product in a link to YAHOO! that opens up a new window would look like so:

<a href="http://www.yahoo.com" target="resource window">YAHOO!</a>

And that would make a link that opens up a new window when activated. Check it out.

It's brilliant, isn't it? Now put that in your pipe and smoke it!

Changing the Text in the Status Bar

In order to change the text in the status bar, you need to include some code inside the link tag. In a normal link tag when you move the mouse over the linked text, the URL will appear in the status bar. The status bar is the grey bar at the bottom of the browser window. Go hover over a link and you will see the URL in the status bar. If you don't see the status bar at all then play with the browser settings a bit.

With this code you can force the browser to display a personalized message in that bar instead. You might want to add a personalized message in order to confuse your visitors or to get them to click a link they would rather not click on.

Here is an example of such a link: Sample Link.

And this is the code that was needed to do that: <a href="http://www.google.com/" onmouseover="window.status='This is the Message'; return true">Sample Link</a>

If you simply want to mask, or hide, the URL of a link you can simply leave the space between the quotes empty. Or, if you're really an asshole, you can put a misleading URL in that spot.

Access Keys

You can give different links different access keys quite easily. An access key is a key that, when combined with ALT, will perform a function.

For example, look at this code: <a href="http://www.quickrob.com/html/" accesskey="c">Link with Access Key "c"</a>

And that code would create this resulting link: Link with Access Key "c"

So, if you were to hit ALT+C your cursor's focus should be shifted to that link. Then you can hit ENTER and the link will be activated.

Alright!

That's the end of the section on HTML links. You can now make plenty of different types of links.