Back to the index| Previous | Next

Competences:To insert an anchor in the web page.

Contents: The tag a and its principal attributes.
Style in anchors.

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 ..)

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.

This is the site:
<a href=“ "> w3schools</a>
This is the site w3schools
I've visited
<a href=“"> 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:

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.

I've visited <a href=“" 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.

<a href="#" title="alternative text"">False link</a> False link

Do you want to send an e-mail from your page?

A mail to
<a href="" >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.

<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.

Interactive esercise 1 about the anchor style

Exercise 2: Link your web page to an Internet site!

  1. Create a hot word in your file "index.htm" with the apposite a tag.
    (To begin, make a false link with the attribute href="#".).
  2. Choose in Internet a web page of your interest.
  3. Copy the URL of the Internet page and paste it in the attribute href="...." instead of # symbol.
  4. Save the new index.htm
  5. Upload the file index.htm in your remote site.

Exercise 3: Link your web page to a second web page in your site!

  1. Create a new web page and save it as page2.htm in your local site, in the same folder where index.htm is.
    (Don't use capital letters or blank spaces!)
  2. Create a link from index.htm to page2.htm.
  3. Create a link from page2.htm to index.htm.
  4. Test the links in your local site.
  5. Upload index.htm and pagina2.htm in your remote site.
  6. Write a message in the forum "Anchors" to inform that your site has got two pages!

Ludovica Battista

Back to the index| Previous | Next