HTML Workshop: Links


 

CFH Web WorkshopThe first HTML book I read looked as if it was written in a foreign language-- which it was. Imagine the thrill I felt when I made my first successful hyperlink. Previously I had taken websites for granted, assuming that anything I clicked on would magically deliver me to a new place. Now I knew what made links work. This new communication with my computer was equally as exciting as successfully ordering a meal in French.

I hope this lesson will spark the same excitement in you.

What to link

You can link any text or image on your site. This is achieved by surrounding the text, or the image tag, with an anchor tag.

Here are two sample tags:

<A HREF="page_to_link_to.html">Linked Text</A>

<A HREF="page_to_link_to.html"><IMG SRC="image_to_link.gif"></A>

What the code means

The first A in the anchor tag tells the browser that this will be a link. HREF tells the browser to reference a hyperlink-- or a clickable item. The destination of the link is placed between the quotes in the form of a URL. Your text, or image tag, follows and the link is completed with an ending anchor tag. You will notice that omitting the ending tag will cause everything following this link to be linked as well so don't forget it.

If you would like to know more about the image tag, read this article.

Proper code

URLs need to be written correctly for them to work. To link to an outside website you must use an absolute link which means using the entire URL. It should look like this:

<A HREF="http://www.dunfee.com">

This is not necessary when linking within your own website. In this case use a relative link. With relative linking, rather than writing out the entire URL, you simply define the file you're linking to by its relative position to the current file you are in. Say you have a file called cats and another file called dogs in a folder called animals. To link between them simply write dogs.html.

Many websites have levels of folders. That means your main page might point to a folder that houses your products. The images might live in another folder. Simply using the file name as the URL might not work if you need to link to a separate folder.

In order to reference a page in a folder other than the folder your document is in, add two periods and a forward slash (../) in front of the folder name, then add another slash and the file name you are referencing. Add a new ../ for each folder out of which you must climb.

<A HREF="../../pants/long_pants.html">Click here to look at some pants.</A>

If your site sells socks, you might have a folder called socks, then a folder within socks called blue_socks. If you want to link from a blue_sock page to a page in the pants folder, your code would look like this:

Each ../ takes you up a level, the /pants tells the browser to go into the folder called pants and choose the file name long_pants.html.

To avoid this confusion entirely, use the full URL: (http://www.yoursite.com/folder/page.html)

Linking within the same level does not require anything other than the file name.

If you would like to know how to change the color of your links, read this article on essential tags.

Link Within the Same Page

If your document is very long, you might want to create links within your page. Let's say you have a glossary. Instead of forcing your viewers to scroll through the alphabet, you can offer an A-to-Z list at the top of the page. Click on the letter Q and the browser would jump to the Qs. You can then add links every so often that, when clicked, will take the viewer back to the index at the top of the page.

The first step is to name the place in the page to which you wish to jump. Scroll to the place in your document that first mentions Quinelles. Then wrap the anchor tag around the Q as follows:

<A NAME="name_of_anchor">Q</A>

Now that the jumping point is named, you can refer to it from anywhere in your document. Go to the letter Q at the top of your document and add this tag:

<A HREF=#name_of_anchor>Q</A>

Now when the viewer clicks on the top letter Q, the paragraph about Quinelles will appear at the top of the screen.

If you would like to link to a specific spot on another page, follow the first step to name the spot on the other page. Then create a normal anchor link and add #name_of_spot to the end of the URL:

<A HREF="../pants/pants_page.html#name_of_spot">

Email Links

You may have clicked on a link that takes you directly to your email program, or a browser email form. This is the mailto tag that also takes the form of an anchor link. Here is the format:

<A HREF="mailto:email_address"> Contact Us</A>

Substitute email_address with the address to which you wish to send mail. You can also specify the subject line of the email by adding ?subject= directly after the email address. This line,

<A HREF="mailto:bob@bdunfee.com?subject=web workshop"> Contact Us</A>

would send an email to bob@bisonnet.com with the subject line "web workshop."


Home HTML Menu Extra Information HTML Hub