Hyperlinks
Last edited by admin Thu, 10/04/2012 - 07:05

 

What is a hyperlink

A "hyperlink" is an element in a document that gives you access to remote or local content it references. When applied to web pages, hyperlinks, or links for short, can be text, images, or blocks that take you to some other document on the web when you click on them. When using the so-called anchors, links can lead to another section of the same page.

Creating hyperlinks

With the following code:

<a href="http://www.google.com">This is a link to Google</a>

...you get:

This is a link to Google

In place of the text anchor you can use an image:

<a href="http://www.google.com"><img src="google_logo.jpg" alt="google logo" /></a>

Again, it is possible to make the links look and behave in a number of ways, using CSS.

The alt attribute

By using "alt=" you can add additional information about the link.

The target attribute

The target attribute provides additional control over the link anchor. For example, if you want the link to open in a new window every time you click on it, you need to do the following:

<a href="http://google.com" target="_blank">Visit Google.</a>

To specifically make the browser open the link in the same window, use target="_self". Those values can also be used as the base URL, specified in the document head.

Creating anchors

Instead of linking to other web pages, hyperlinks can be used to direct the page visitor to a section of the same page. This is accomplished by first creating anchors within the page, using the a element with the name attribute, and then linking to an existing anchor with the href attribute.
So, as step one you should create the anchor "my anchor" in the file "my_page.html":

<a name="my_anchor">Section X</a>

And then, as step two, create the link:
<a href="my_page.html#my_anchor">Go to Section X</a>

If you are linking from with the same file, you can omit the file name "my_page.html".