Welcome to my second tutorial on how to hyperlink and ‘anchor’ text links in your web page. Hyperlinks and anchors are used through out your website to link from one page to another and in some cases to other websites from within your website. Hyperlinks are also used to create links to email addresses which are normally launched in the default email client installed on your computer which could be something like Microsoft Outlook Express or Microsoft Outlook which comes with Microsoft Office.

If you are building a web page  or website you may want to look at our post on HTML editors. HTML editors make hyper-linking between your pages easy and in most cases give you options to link between pages without having to write any code. This can speed things up and save you a lot of time. I would still recommend looking at how to code your own hyperlinks to ensure you know exactly what is going on with your links.

In many cases you can get free website templates which already have all the links you need in between your website pages. It might be working looking at a few free templates to see example of how you can link between these pages

I guess the best way to show you what a hyper link is to give you a demonstration.

  • Basic Hyper-linking and Anchoring

Once you master the structure of the Anchor tags and learn how to effectively link from one page to another you are actually in my opinion half way to creating your own website, or you atleast have the skills to then access a website and be able to edit the code of your links manually.

Example: This link will take your to the How to make a website page.

Code:

<p>This link will take your to the <a href=”http://www.digistorecommerce.com/blog/how-to-make-a-website/”>Ho w to make a website</a>.</p>

A couple of things to notice here:

  • The tag you use to create a link is the <a></a> tags
  • The ‘href’ attribute is the only real necessary tag you need to use in order to make a hyperlink and this would need to be either the absolute or relative (ill explain these different terms below) path to the resource you are linking to.
  • The link text (blue, underlined text) is the text you <a href=”…”>INSERT HERE</a> between the opening and closing tags.

Note: the ‘a’ tags stand for anchor.

  • Linking to an Email address

Linking to an email address in a web page which is then opened up in your default email client on your computer you need to use the ‘mailto:’ attribute in your <a> tags.

Example: Click here to email me.

Code:

<a href=”mailto:email@address.com”>Click here</a> to email me

  • What’s is the difference between an relative and absolute path?

When speaking in HTML language an absolute link path is a full path of the link to that internet address. A relative path is a path to a internet resource which is written differently depending on where abouts you are relative to the resource you are linking to. I hope this kind of makes sense. Let me show you an example:

  • Absolute Path:
Code:
<a href=”http://www.digistorecommerce.com/blog/how-to-make-a-website/”>li nk text</a>

Notice that i have inserted the entire website address for that resource. That is an absolute link.

  • Relative path:

If want to link to a file in the same physical web directory that you are currently browsing in. It wouldn’t be necessary to include the information that your browser already knows about a file location. Instead of having to write “http://www……..” you can simply point directly to the file name and your internet browser will know how to reach that page.

Code:
 <a href=”file-name.ext”>link text</a>

Notice that you are linking directly to the file name of the file you want to link to. This example of linking to a file will only work if the file is within the same directory of the page you are currently on.

If the page you want to link to is in a folder within the directory you are currently in you will need to use the following code respectively.

Code:
<a href=”folder-name/file-name.ext”>link text</a>

This points the browser to another directory first.

3. If the page you want to display is in a previous directory, ie “folder-1/folder-2/folder-3/you are here” and your resource is in folder 1. You need to use code that tells the browser to go down a directly the code is “../” that tells the browser to go back one directory.

Code:
<a href=”../../file-name.ext”>link text</a>

The first ../ will take the browser to folder-2 and the second ../ will take the browser to folder-1 where you then indicate which file you want to link to.

  • Advanced Hyper-linking and Anchoring

Here are a few more techniques you can use when making a hyper link on your web page.

  • Open link in a new window

Sometimes you want to open the page in a new browser window which you don’t normally do when linking to another page in your own website, but you may use when linking to another website from your website.

In order to open the page in a new window you use the target=”_blank” command in your anchor as an attribute.

Example: Go to the Digistore Home page.

This link will open in a new window. The code would look like:

Code:

<p>Go to the <a href=”http://www.digistorecommerce.com/” target=”_blank”>Digistore</a> Home page.</p>

  • Anchoring in the same page

Some times you have either many items on one very long page or you wish to provide a link to bring your readers to the top of your page again without having to scroll up using the scroll bar or mouse wheel.

Example: This link will take you to the top of the page.

For this technique to work you need to specify in your web page where you want your anchor to land and in this case we want it to land at the first first line of this post. So before the first word of this blog post i have inserted a <a name=”1″></a> and the link code looks like:

Code:

<p>This link will take you to the <a href=”#1″>top of the page</a>.</p>

  • Link titles

Many argue that having a link title is helpful and increases usability. A link title is a little description that pops up when you hover over the link text of a link. See the example below by hovering over and then see the code below to see how i have implemented that.

Example: This link has a description when you hover of the this link.

Code:

<p>This link has a description when you hover of the <a href=”#” title=”A nice little description”>this link</a>.</p>

Later on i would like to show you have you can change the link text colors using CSS, In the meantime this website may help you with how to style hyperlinks.