Updated (2/27/03): Added Info on HREF Property
Traditionally, ANCHOR Tags are underlined, and their text changes
color when your mouse hovers over them and when you click on them.
However, there is a lot more you can do with the ANCHOR Tag.
The easiest way to make changes to the behavior of the Anchor tag
is to set up a seperate Cascading Style Sheet (a file with the
extension .css). Once you create a style sheet, you link to
it from your HTML page with the following code:
The first thing you can do is have a different background appear
when the mouse hovers over it. This acts as a highlight, and will
get the user's attention :
One other option is to set borders around your links. In the
following example, I'll set the properties for this when the mouse
hovers over it (though you can set this for any of the Anchor link
properties). Microsoft uses this setting in their menus (check out
their menu at Microsoft's Developer Network). This works really
well -- it gives the menu a professional look (especially if you
also add in a slightly darker background for the hover) and doesn't
add any extra time to download the page. If you choose to use
CSS styles to set up a menu for your website, be sure to check
out this tutorial for further suggestions.
You also have the option to set the border-style for each border. Instead of solid
(which we used in the above example) you can also try:
- solid
- double
- dotted
- dashed
- groove
- ridge
- inset
- outset
In the example above, you can change the width of the borders (1px
= One Pixel wide). You can also change the color of the border -- I
used black for all four, but you can set them to different colors,
and you can use Hex Numbers in
place of Color Names.
The next property we'll look at is the PADDING property. If you use
borders on your links, you may find that the border lines are
crowded in too close to the text of the link. You can fix that by
setting the padding of the links:
Finally, if you really want to get a "clean" look for your menu of
links, you might want to remove the underline that appears by
default for all Anchor tags. Within your Style Sheet, set the
following property for all of your Anchor properties:
Here is what a link might look like when you set all of the
properties: CSS
Link
Href Property:
The HREF Property (short for HypertextREFerence) is used to point to a specific page or bookmark. Here
are a couple of values you can set in the HREF property to open up programs:
- Default Email Program -- mailto:someaddress@address.com
- AOL Instant Messenger -- aim:goim?screenname=SOMEUSERNAME&message=Your+message+placed+here
So, if you wanted to create an anchor link that would open up a blank email window in the user's
default email program, you would have a link that looked like this:
- <a href="mailto:dougarmbrust@hotmail.com>Email Me</a>
Check out this thread
on our message board for a list of programs that can be opened with the anchor tag!
Related Links: Multiple Anchor Styles |
Hex Color
Converter | Color Names
Want to discuss this article, or other development issues? Visit our
message boards!
Or contact us directly with a comment or question on this article: click here !
|