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 ( .. ).

When you sign up for one of our hosting plans you'll beable
to get your own Domain Name (http://www.yourname.com).
Everyone will beable to easily get to your site then.

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.