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