HTML Links and Anchors

In order to create links to other web pages, we need to use the <a> tag. This tag (short for anchor) is used to create links between other sites, your own site and links to a certain part of a web page. Using the <a> tag, you can also make links out of text and images.

The three main types of links:

• Global - These links are used to link to another site: http://www.google.com
• Internal - Use these to link to web pages on your domain.
• Local - Use these links to help users navigate to other parts of the same page.

There are also two ways to create links: absolute and relative.

• Absolute - Using the full path name: http://yourdomain.com/html/learn.html
• Relative - Using a shorter path name that excludes the domain: /html/learn.html

Depending on the situation, you may find it easier to use relative links when linking from within your own site (Internal and Local).

Note: You can not use relative paths to link to web pages outside of your domain.

Creating a Global Link

Creating a link to another web page is rather easy:

<a href="http://www.google.com">Click here to go to google.com</a>

Output:

Click here to go to google.com

Simple huh?

Creating a Internal Link

You can use a relative path name to create a link within your own domain.

<a href="/html">List of all HTML pages on newbtopro.com</a>

List of all HTML pages on newbtopro.com

Creating A Local Link

You can also link to parts of the same page (i.e Go To Top style). The is a two step process:

1. You need to set up an anchor and give it a name on the page.
2. You need to create the link to redirect them to the anchor on the same page.

Create the anchor:

<a name="top></a>

This creates the anchor in which your other link can find. You can also set them up in other elements:

 <h2>This is the top headline<a name="topheadine"></a><h2>

Create the link:

<a href="#top">Go To The Top Of The Page</a>

This will give us the output:

Go To The Top Of The Page

Creating Links To Email Addresses

What if you want to create a link to your friend's  email address?

<a href="mailto:delete-me@newbtopro.com>Email my junk email address</a>

Output:

Email my junk email address // Spammers, have at it, everything gets junked at that address!

Permalink