The creation of hypertextual links between web pages is the most important thing when you make a web site.
A web site needs links between its different pages: the links can bring to a page of the same site (internal link) or to a page of another site in Internet (external link).
The tag a (as anchor)
An anchor (delimitated by the a tag) is an object of the body that links the actual page to another document (page, image, sound, program ..)
| Code | Output | |
| This is a false <a href="#"> link </a> | This is a false link | Note the content of the tag: it appears as a hot word! In this case it doesn't work! |
The href attribute
The a tag needs the attribute href.
Instead of the # character, you must write the URL (the address) of the
document you want to link to the hot word.
The following links are external to our site.
| Code | Output |
| This is the site: <a href=“http://www.w3schools.com/ "> w3schools</a> |
This is the site w3schools |
| I've visited <a href=“http://www.nycvisit.com/home/"> New York</a> |
I've visited New York |
For an internal link, you have to create previously another web page in your site, besides index.htm, for example a page called page2.htm.
If this second page is in the same folder of index.htm, you can create a link from index.htm to pagina2.htm in this way:
| Code | Output | |
| to my <a href=“page2.htm">second page</a> | to my second page | You must previously create the page2.htm file! |
The target attribute
Sometime it is better to open a new document in a new page of the browser. So, our starting page will stay behind and it will appear again when you'll close the linked page. To open a new page, you must add the target attribute in the a tag.
| Code | Output |
| I've visited <a href=“http://www.ciudad.cl/" target=_blank>Santiago de Chile</a> | I've visited Santiago de Chile |
The title or alt attributes
For the page usability, it's a good practice to add an alternative text that appears when the mouse is over the hot word. We can get it by title or alt attributes.
| Code | Output |
| <a href="#" title="alternative text"">False link</a> | False link |
Do you want to send an e-mail from your page?
| Code | Output | |
| A mail to <a href="mailto:john@tin.it" >John</a> |
A mail to John | Don't write to him! He doesn't exist! |
An ... hot image.
To create a link by an image, the whole img tag must be inside the a tag.
| Code | Output |
| <a href="#"> <img src="image/ola.gif"/></a> |  |
Give a personal style to your anchors!
You can give several properties to your anchors: the color, the background, the underlining ...
The a selector is used adding pseudo-classes in it. In this way the anchors
can be displayed in different ways when they are
visited or unvisited, active or when you move the mouse over them.
| a:link {color:blue; text-decoration: underline; } a:visited {color:maroon;} a:hover, a:active {color:white; background:black;} |
the a:link pseudo-class is for an unvisited anchor, the a: visited pseudo-class is for a visited anchor, the a: active pseudo-class is for an active anchor, the a:hover pseudo-class is when the mouse is over the anchor. |