BACK   HOME NEXT | graphics  

Table of Contents

Types of Links :

Text Buttons Graphics Defining Links with CSS

A hyperlink :

Text, buttons or graphics that you click to go to a file, a location in a file, a Web page on the World Wide Web.


To offer Text as a Link , do the following :

  1. In current page

    &   To go to another location ( place ) in current page, type this Tag :

    <a href = "#URL"> Text </a>

    NOTE :

    Remember to type ( # ) before the name.

    &   Go to the place where you want to jump to and type this Tag :

    <a name = "URL" ></a>


    "URL" in the two Tags must be replaced by the same name.

  2. To Another File

    &   To go to another File, type this Tag :

    <a href ="Filename.html"> Text </a>

    NOTE :

    Type the real extension of your file; it may be ( html or htm ).

    &   To go to a Location in another File, type this Tag :

    <a href ="Filename.html#URL"> Text </a>

  3. To Another WebSite

    &   To go to a Web page on the World Wide Web, type this Tag :

    <a href ="http://www.URL.com"> Text </a>

    NOTE :

    URL is replaced by a Site name or a Web page name on the Site.

Target Window :

To keep your visitors on your site as long as possible , especially when you offer other websites'names, Type the Tag as follows :

<a href ="fonts.html"target ="-blank"> Fonts </a>

Try this Link:  Fonts


A Button

To offer a button as a Link, Type this command :

<form method="link" action="basics.html"> <input type="submit" value="Basics">


Here is the result :


A Graphic

To offer a graphic as a Link, Type this command :

<form method="link"action="tables.html">
<INPUT type="image"src="$">


The Mark "$" stands for the image's name + its extention ( gif or jpg ).

The Title Attribute

To offer a Link Content, Type this command :

<a href="fonts.html"title="$">Fonts</a>

The Mark "$" stands for the Text you will read when you move your mouse over the button. My title or Text is "Font Values".

Move your mouse over:


To offer more than one content, use ( &#10;&#13; ) as follows :

<a href="fonts.html"title="Font size&#10;&#13;Font color&#10;&#13;Font face">Fonts</a>

Move your mouse over :



Defining Links with CSS

How to add different colours to hyperlinks

Consider the following CSS styles:

a:link    {color:#0000FF}
a:visited {color:#FF00FF} 
a:hover   {color:#FFFF00} 
a:active  {color:#FF0000}

Click to see How to add different colors and other styles to hyperlinks in a document.

  BACK   HOME  Top NEXT | Graphics