|
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: #CC00FF; 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.
|
Links