HTML Tutorials - Text Links

Full Tutorial List           Tutorials (50)       Sept 01, 2009


Links in Html are one of the most important parts, they allow you to jump from one part of a page to another, jump from on page to another and from one page to another site.  These links are known as hyperlinks, hyperlinks allow visitors to navigate between websites by clicking on words and images.

There are three types of links in html -

  • Links to anchors on the current page (Internal).
  • Links to other pages within the current site (Known as been Local or Relative link)
  • Links to pages outside the current site (Known as been a Global or Absolute link - www.yahoo.com).

 

Ok so let’s have a look at the basic syntax for Creating Hyperlinks

 
<a href="URL You Wish To Link To" />Text To Appear on your page </a>
 

A hyperlink is specified as using the <a> element; this element is called an anchor tag, the href part refers to Hypertext REFerence – basically this tells the browser where the links is going to point to.
</A> - Is the closing bracket for the opening <a href> bracket

Linking Documents - The <a> Element:

A link is specified using the <a> element. This element is called anchor tag as well. Anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document.
Following is the simple syntax to use this tag.

 
<a href="Document URL" attr_name="attr_value"...more attributes />
 

A Simple Example Linking to Another Website:

 

<a href="http://www.beginner-tutorials.com/php-tutorials.php" target="_blank" >PHP Tutorials</a>

Note: If you where to click on the link PHP Tutorials below you would be brought to the site beginner-tutorials.com php tutorials, as discussed this is what’s knows as a global / Absolute link.

 

This will produce following result

 

html text links tutorial

 

A Simple Example Linking to another page of your own site:

<a href=" html-tutorials.php ">Back To Html Tutorials</a>

Example if you where to click this link it would bring you back to the html-tutorials.php page on my site. (this is called a relative url) -

A Simple Example using a picture as a link:

 

to use an image as a link we just wrap the hyperlink around the image tag like so…

<a href="index.htm"><img src="home.gif" ></a>

Click This Image called home.gif - html text links tutorial

Note: In some cases your picture might contain a border – to remove this just add the following to your html

<a href="index.htm"><img src="home.gif"  border="0"></a>



A Simple Example Linking to another website and the website opens in a new window:

use target="_blank" in your html hyper reference

working example
<a href="http://www.google.com" target="_blank">Open Google in a New Window </a>

A Simple Example adding a e-mail link:

to create an email link the mailto: attribute of the <a> tag is used

<a href="mailto:someone@$nailmail.com">email</a>

A Simple Example allowing users to download files:

In this case a normal hyperlink is used, but instead of linking to a .html or .html file the link points to the file to be downloaded


<a href="application.exe">spaceman.jpg</a>

A Simple Example allowing to link to a different part of the same page.

 

To create a link to a different part of the same page the name attribute of the <a> tag is used.

<a name=" JumpToParagraphTwo ">Click this link to go to paragraph two</a>

 

 

<a name=" JumpToParagraphOne"></a>
Paragraph One:
………………………

<a name=" JumpToParagraphTwo "></a>
Paragraph Two:
……………………….

<a name="JumpToParagraphThree"></a>
Paragraph Three
………………………..

 

 

C++ Functions Tutorial