HTML - Links

The "href" attribute names the connection to an other web page. Actually is the place where it will be sent the user who clicks on the link.

Links can be:

  • intern - to specifically places from the page(anchors)>
  • locals - to other pages from the same domain
  • globals - to other domains, outside the site
htmlInternal - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"

HTML - HTML - Text links

To set the beginning and the end of a anchor it can be used <a></a>. Choose the type of the attribute that you need then put it inside the tag.

Example:

html<a href="http://www.tutorialehtml.com" target="_blank" title="HTML Tutorials">HTML Tutorials</a>

Demo

HTML - Link targets

The "target" attribute tells to the browser if it needs to open a new page in a new window or in the same window.

target="_blank"Opens a new window
_self"Opens a page in the same window
_parent"Opens a new page in a superior frame of the link
_top"Opens a new page in the same browser canceling all the frames

The next example shows how a new page can be opened in a window of the browser. In this way we can remain on the tutorial's page and open a new navigation page.

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

Demo

HTML - Anchor

Is used to link two sections of the same page. In this way we need to give a name to those sections, but for this is indicated to take a look at the next example.

html<h1>HTML - Hypertext Reference / href<a name="top"></a></h1>
<h2>HTML - Text links<a name="text"></a></h2>
<h2>HTML - E-mail text<a name="email"></a> </h2>

Next, we need to make a code to the link by putting before the anchor's name

html<a href="#top">Go to top </a>
<a href="#text">Learn about text links </a>
<a href="#email">Learn about e-mail addresses </a>

Demo

HTML - E-mail link

To make an e-mail link is very simple.If you want someone to write you an email the best thing to do it would be to put at its disposition a link with your email and a pre-established subject.

html<a href="mailto:someone@example.com?subject=Questions " >Questions here</a>

Demo

In case the subject is not enough and you want yo add something else to the email's content, you can do it with the help of the next code:

html<a href="mailto:someone@example.com?subject=Questions&body=Write here if you have questions " >Questions here </a>

Demo

HTML - Download links

A download links looks like a normal link text. The problem kicks in when we want to add a photograph.The best solution it is to use a thumbnail with a link, but we will talk more about this problem in the next lesson.

html<a href="http://www.tutorialehtml.com/htmlT/text.zip">Text Document</a>

HTML - Default link/Base link

use the <base> tag in the interior of the <head> element to set a base link. This is necessary in case you have somewhere a link which doesn't work or in case the destination it doesn't exist anymore.The base link sends the user to the specified address. Usually it sends the user to the start page, but is as well accepted any other page, eventually a special page made in this purpose.

html<head>
	<base href="http://www.tutorialehtml.com/">
</head>