|
Links, they are what make the World Wide Web the World Wide
Web. Hyperlinks bind all sites to themselves and also to the rest
of the other sites on the internet. Without links you would have
to type out the web address for every page you wanted to look at.
It's a wonder how something so simple holds the whole internet together.
You use links to take a user from one section of your web site to
the next section. Links can be simple text or they can be images.
(view the source of
this page for more indepth source code commentary on links)
Below is the basic link
tag in HTML:
<a href="URL">clickable text</a>
This is what the above
code looks like rendered in HTML
clickable text
The value for href
accepts absolute URL paths and relative URL paths just like src
does. Below is a review of URL paths again...
- absolute
URL paths, are src or href that provide
the full URL (http://www.dejazzd.com/images/file.gif), absolute
paths make it possible to display images or link to files outside
of your own site and web server.
- relative
URL paths, are src or href that describe
the location of a file that is in relation to the current file
that you are in. It is a form of shorthand almost. It's also known
as slash dot syntax. Where contents of folders is seperated by
slashes ( / ) and to move back and
out of folders you use two dots ( ..
).
As said before anything
that is visable and between the opening and closing tags of the
<a href> is going to be clickable. So you can have multiple
images or images and text be links. Here's a code example of image
links with text below them.
<center>
<a href="http://www.dejazzd.com/promotions/referral.php"
target="_referral >
<img src="http://www.dejazzd.com/promotions/
new_referral_120x60.gif" width="120" height="60"
alt="Referral Program" border="0">
<BR>
<font size="2">Earn Money to Sign up your friends
to Jazzd</font>
</a>
</center>
This is how the code
rendered in a browser will look:
Earn Money to Sign up your friends to Jazzd
Notice the new attribute
to the <a href>
tag it is target this tells the browser to open the file
that is being requested into a window (or frame) with the same name.
If there isn't a window with that name, as in this case, a new browser
window will be opened.
Named Anchors
are one other thing that is common to do with the <a href>
tag is to create jumps to a specific spot on the same page or even
a different page. They are best used for tall pages that have a
lot of information. The is an extra step involved in the code to
get these jumps to work. You need to name the place where you want
the link to jump to that code looks like this <a
name="top"></a> There doesn't need to
be anything between the opening and closing of this tag, its just
a marker to be used by this link tag:
<a href="#top">Go
back to the top of this page</a>
Rendered
looks like this:
Go back to the top of this
page
There is a named anchor
at the top of this page in the code so click on the link above and
you'll be taken to the top of the page. The way you jump to a specific
spot on a different page then the one you are currently at is to
add the anchor name plus the # symbol to the end of the file name
like this links.html#top
Cascading Style Sheets
are used in this site simply to make the text links change color
and not be underlined when your mouse moves over them. Below is
the codes used to create this effect:
<STYLE TYPE="text/css">
a:hover { color: #086EC0; text-decoration: none }
</STYLE>
Style sheets can be put
directly in the HTML code like on this site, or they maybe put into
a separte file. Style sheets are very useful for reusing font styles
over and over again. You just have to name a class and it will make
a font a certain size, color, face, etc. For more information on
CSS
go here.
|
