Links are the most fundamental part of the world wide web.
It's the links that ties it all together.
There are three different kinds of links you can have on your website:
Links to bookmarks on the current page (Internal links).
Links to other pages within the current site (Local links)
Links to pages outside the current site (Global links).
It is possible to make texts and images work as links. With a little
creativity other objects, such as push-buttons or even drop-downmenus
can work as links as well. In this section we will cover the usual links: Text and Images.
Other types of more or less advanced links will demand use of javascript. Look in the javascript-section to learn more.
HOW TO MAKE A LINK
The tags used to produce links are the <a> and </a>. The <a> tells where
the link should start and the </a> indicates where the link ends. Everything between
these two will work as a link.
The target of the link is added to the <a>-tag. In the example below is showed how
to make the word "here" a link to yahoo.
Click <a
href="http://www.yahoo.com">here</a> to go to yahoo.
You simply specify in the <a href="
"> what the target of the link should be.
Then adds the text that should work as a link.
Finally adds a </a> to indicate that this is where the link ends.
COLORS ON TEXTLINKS :
Textlinks are made as examplified above. However there are a few settings that can be
usefull for controlling the colors of textlinks.
The general text-color of links is specifyed in the
<body>-tag, like in the example below:
| <body link="#C0C0C0" vlink="#808080"
alink="#FF0000"> |
link -
standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).
vlink - visited link - to a page
the visitor has been to before. (standard color is purple - #800080).
alink - active link - the color
of the link when the mouse is on it. (standard color is red - #FF0000).
Click here to learn about
the hexadecimal system (f.ex. "#FF00CC") used in HTML to indicate colors.
The method described above is for setting overall linkcolors for the entire page.
However you might want one or more links to have different colors than the overall color
for the page. There are two methods for doing this:
1: Placing font-tags specifying the desired color between the <a href> and
the </a>-tag.
This method will work on all browsers except MSIE 3.
Note: It is important that both the <font> and the </font>-tags are
between the <a href> and </a>-tags.
For example:
| Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to yahoo. |
2: Using the style-setting in the <a>-tag.
This method will not work on older browsers.
An example:
| Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a>
to go to yahoo. |
Note: The rgb-numbers
indicates amount of red, green and blue using values between 0 and 255.
If you want more advanced effects you should jump to
the section about stylesheets.
REMOVING THE UNDERLINE FROM
TEXTLINKS :
By default textlinks are underlined by the browser.
If your page is visited by MSIE3 or newer or NS4 or newer, you can turn off the
underlining for an entire page by adding a style-tag to the head-section of the document.
Look at this example:
<html>
<head>
<title>This is my page</title>
<style type="text/css">
<!--
A{text-decoration:none}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com>This Link To Yahoo has no
underline</a>
</body>
</html> |
LINKEFFECTS FOR THE ENTIRE PAGE:
Instead of just turning off the underline on all links you could be more specific in
defining the way you want your links to work. In the example below underlines are turned
off for links.
The A:hoover tells the browser that
when the mouse is over a link the underline should appear.
The hoover-option only works on MSIE 4+. (But it does not anything in Netscape if you
include it - the effect just does not appear.).
<html>
<head>
<title>This is my page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com>This Link To Yahoo has no
underline</a>
</body>
</html> |
The methods describe above will turn off the underline-effect for links
on the entire page.
If you want to turn off the effect for just a single link, add a styleproperty to the
<a href>-tag:
| <a href="http://www.yahoo.com"
style="text-decoration: none">Go to Yahoo</a> |
NOTE: The methods described only works on MSIE 3, Netscape 4 or newer browsers.
You can make multiple stylesettings instead of just removing the
underline. Why not define the colors you want for active or visited links as well. This
example will show you how:
<html>
<head>
<title>This is my page</title>
<STYLE
TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }
A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none}
A.set2:active {color: #FF00AA; background: none transparent;}
A.set2:visited {color: #FFFF00; text-decoration: none}
--></STYLE>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com CLASS=set1>Yahoo</a>
<a href="http://www.hotbot.com CLASS=set2>Hotbot</a>
</body>
</html>
|
Try move the mouse over - or even click (links have been deactivated on
this page) - the two links below to see how these effects would work:
Yahoo
Hotbot
LINKS ON IMAGES:
If you want to make an image work as a link the method is exactly the same as with
texts. You simply place the <a href> and the </a>-tags on each side of the
image.
Below is the HTML-code used to make the image work as a link to a page called
"myfile.htm":
<a href="myfile.htm"><img src="rainbow.gif"></a> |
If no border is specified for the image you
will see a small border around the image after turning it into a link. To turn off this
border, simply add border="0" to the <img>-tag:
<a href="myfile.htm"><img
src="rainbow.gif" border="0"></a> |
Images that works as links can show a
pop-up-text when you place the mouse over it.
To specify the text you need to add an alt-property to the <img>-tag. For example:
| <a href="myfile.htm"><img
src="rainbow.gif" border="0"
alt="Link to this page"></a> |
IMAGEMAPPING:
It is possible to make one image link to several
pages, dependant on where the image is clicked. The technique used for this is called
imagemapping. You simply specify which areas of the image should link to where. In the
example below, if you position the mouse in th eupper left corner it links to yahoo .... and in the lower right corner.... it links
to hotbot :
<!--webbot bot="ImageMap"
rectangle="(0,0) (29, 29) http://www.yahoo.com"
rectangle="(30,30) (59, 59) http://www.hotbot.com"
src="rainbow.gif" width="60" height="60" alt="click to
follow a link" border="0" --> |
In the above example we only used rectangular imagemappings. Possible shapes
are:
rectangle="(x1,y1) (x2,y2)
http://www.domain.com">
circle="(x1,y1) (x2,y2)
http://www.domain.com">
polygon="(x1,y1) ( x2,y2)
(x3,y3) ... (xn, yn) http://www.domain.com">
The same effect as described above could be produced using the <map>-tag:
<img src="rainbow.gif" usemap = #example
border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map> |
In the examples above we only used rectangular imagemappings. Possible shapes are:
<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=circle coords=
x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=polygon coords=
x1,y1, x2,y2, ...., xn, yn Href="http://www.domain.com">
Note: There are excellent tools out there to help you
create imagemaps.
Nobody calculates the coordinates by hand.
If you want to use imagemaps on your site you will need to get a program that will
allow you to simply drag the mouse over the areas you want to work as links.
Most html-editors has this build-in-function.
If you do not use a html-editor, however, you can still get programs that will do
this boring job for you - best thing is - you can get it for free!
BOOKMARKS:
Linking to bookmarks works very similar to linking to pages. A # in front of a
link-location specifyes that the link is to a bookmark. To be able to link to a bookmark
you need to 1) create a link pointing at the bookmark, and 2) Create the bookmark itself.
A bookmark is created using the <a>-tag. If
you want to create a bookmark called "chapter4" on a page, you simply add this
line where you want the bookmark to be:
After doing so, you can make a link pointing to the bookmark using the
normal <a href>-tag, like this:
| Click <a
href="#chapter4">here</a> to read chapter 4. |
Usually bookmarks are used when you create pages with considerable
amounts of text. You would typically make an index at the top of the page linking to the
bookmarks that has been added to key-places in the text that follows.
LINKS WITHIN A FRAMESET
If a non-framebased HTML-document contains a hyperlink that links
to a page called "analysis.htm" then it appears in the HTML-document somewhat
like this:
| Click here to see the <a
href="analysis.htm">Analysis</a> of the project |
Now if the same link was in a frameset, say in the
frame called menu and we wanted it to link to a page that should be loaded in the other
framewindow, named "main" then the HTML-code would be:
| Click here to see the <a href="analysis.htm" target="main">Analysis</a>
of the project |
We simply added the desired framewindow (main) : target="main" to the a href-part.
Now the link will be followed in the "main"-framewindow
instead of the "menu"-framewindow where the link was located.
OPENING A LINK IN A NEW
WINDOW
If you want your link to open a page in a new window use the
target="_blank" in the
<a href>-tag. Targetting the link to "_blank" simply opens a new
browserwindow that will load the linked page.
An example, showing how to open Yahoo in a new window:
Linking to Yahoo the traditional way would require this link:
| <a href="http://www.yahoo.com">Go to
Yahoo</a> |
If you add a target="_blank" the page will open in a
new window:
| <a href="http://www.yahoo.com" target="_blank">Go to
Yahoo</a> |
Click the link below to see this link in action:
Go
to Yahoo
If you want to customize the new window as to which buttons, menus etc. should be
available and which size it should have, you will need to do it with javascript.
|
