HTML Tutorials: Links
Links are a most necessary part of any
site navigation. Here I'll show you all the coding for
them.
The basic formula for a link is:
<a href="page.html">Your Link</a>
This produces:
Your
Link
When you click on this link, it takes you to "page.html".)
Pretty easy, eh. Like all parts of web design, there are
always ways to spice things up.
Sometimes you may want a link to display a page in a new
browser window, or one that is already open. To do that,
you need to add the target attribute to your anchor tag
(that's what the A stands for, if you were wondering).
In the target attribute, you need to define the name of
the browser window you want the link to open in. The code
looks like this:
<a href="page.html" target="_new">Your
Link</a>
This will open up a new browser window named "_new".
The underscore character is used for certain predefined
locations and is generally a good idea to put in as the
first character of your target name. The target "_top" is
one such special case. It will tell the link to open up
in the entirety of the current browser. For instance, if
a link with the attribute target="_top" was found
inside a frame or iframe, the link would open up the referenced
web page not in its frame/iframe (which is the default),
but in the full open browser.
The other import aspect of creating links is changing their
color and style. The old way to do this is by making changes
to the <body>
tag that is included near the top of HTML code. The 3 attributes
to change are link, alink, and vlink. Link changes the
color of links on your page, vlink changes the color of
visited links, and alink changes the color active links
(the moment you click a link). You can use color names
or hexadecimal codes like the following:
<body link="navy" alink="FF6600" vlink="blue">
The other way to change the appearance of links is by using
style sheets. That is how the links on Spoono are controlled.
The easiest way is to add the style sheet within the <head> tag
area of your code. The typical format is like this:
<style type="text/css">
<!--
A:link { color: #FF0000; text-decoration: underline;
}
A:active { color: #3388FF; text-decoration: none; }
A:visited { color: #999900; text-decoration: underline;
}
A:hover { color: #007700; text-decoration: none; }
-->
</style>
This makes links appear as follows:
Your
Link
As you can see the attributes for the style sheets work
the same way as the body attributes do, with the addition
of A.hover. This attribute changes the color of the link
when the mouse is hovering over it. Also, the text-decoration
attributes control the style of the links. The options
are: underline, overline, line-through, blink, and none.
Perhaps the slickest way to customize links is to store
the style sheet in an external file. This is what we do
at Spoono. To do this, copy all the actual code of the
style sheet like this:
A:link { color: #FF0000; text-decoration: underline;
}
A:active { color: #3388FF; text-decoration: none; }
A:visited { color: #999900; text-decoration: underline;
}
A:hover { color: #007700; text-decoration: none; }
and paste it into a text file. Next, save your file with
a .css extension. Finally insert the following code within
the <head> tag area of your HTML:
<link rel="stylesheet" type="text/css" href="your_file.css">
That's it. Let the linking begin!
|
