1. Linking a web page outside your site

To create a hyperlink, use tag <a></a>
 
The attributes of this tag specify then, what are we going to use this tag for - linking to a page on the server, linking to a page on the Internet (on another server), linking to an email address etc.

href	defines the address of the file/folder/page etc.
name	defines a section; we will specify this attribute later
target	_blank, _top, _parent, _self; specifies the target of opening the page (default is _self)

Example:

To link a web page outside of the server (a page on the Internet), write:

<a href="http://www.google.com">this is the link to GOOGLE</a>

This is how the link will look like: this is the link to GOOGLE

Create links to web pages of your school, you email client web page and to some of your favorite pages on the Internet.

2. Linking two web pages

Open a new file and create a short web page that could be linked to the one you used before. Save it to the same folder as the other one. Our task now is to create a link between these two pages. To create such link, we will use the <a></a> tag described above. This time into the href part specify only the name of the second page, eg. firstpage.html

Example:

<a href="firstpage.html">this is a link to my first webpage</a>
<a href="secondpage.html">this is a link to my second webpage</a>

3. Links inside a document

To create links inside one document use attribute name in <a> tag. This specifies the name of the location to which the link should jump when clicked on. Inside such a link you have to specify the name of the section to which the link should go: <a href="document.html#name_of_the_section">

Example:

<a href="index.html#myHobbies">

and somewhere in the text:

<a name="myHobbies">

4. Linking and email

Use <a href="mailto:address@xy.zz">

5. CSS for links

You can define style for tag <a< - the attributes are the same as with text (font, font-size, font-style, font-weight, text-decoration - this one can be none or underlined; and color). If you want the link to change it's style while you move the mouse over it, you may specify this using a colon and 'hover' after the identifier 'a'. You don't have to repeat those attributes that did not change, specify only those that do.

Example:

  <style type="text/css">
    a {font-family: verdana;
        font-size: 10;
        font-weight: bold;
        text-decoration: underlined;
        color: yellow;}
    a:hover {color: red;}
  </style>