Linking

Linking General

To make a link you enclose the words (or image) to be linked between <a> </a> tags. Set the value of the href attribute to the URL you wish to link to.

Put something useful and descriptive as your link text. Don't just use "click here".

The text or image between the beginning and ending a tags is what is linked. By default linked text is blue and underlined, unless the viewer has already been to that URL, in which case it is purple. The default colors can be changed in the body tag and with CSS. CSS can also get rid of the underlines, if you wish.For IE4+ and Netscape 6+ you can use CSS to make the text change color when moused over.

<a href="blah.html"> for a link may not seem very mnemonic, but the "a" stands for anchor and the href stands for hypertext reference. The "a" tag has another use that is more obviously anchor like that you will see later on this page.

Linking to another page on your site

If the linked page is in the same directory as the current page just set href value equal to the filename. You may be used to calling directories "folders", it's the same thing.

Example: <a href="lists.php">Link to the lists page</a>
makes: Link to the lists page

If the page is in another directory you can use either absolute or relative paths to link it.

The relative path is the path from the current page's location to the one linked. To move down a level just put the directory name with no /. Use ../ to move up one directory level.

Example 1: <a href="sample/basicexample.html">Basic page sample</a>
makes: Basic page sample
Example 2: <a href="../">Threeworldsweb main index page</a>
makes: Threeworldsweb main index page

The absolute path is the path from the web server root directory, generally everything after the domain name. When the path is absolute it starts with a /.

Example: <a href="/class/lists.php">Another link to the lists page</a>
makes: Another link to the lists page

Linking to a page on a different site

To do this you will need to specify a full URL with the protocol and server

Example 1: <a href="http://www.google.com/">Google search</a>
makes: Google search
Example 2: <a href="http://info.med.yale.edu/caim/manual/contents.html"> Yale Style Manual</a>
makes: Yale Style Manual

Linking inside a page

You can link inside a page if there is a named anchor there. The other use of the a tag. If the page you are on has <a name="top"></a> in it, a link like this <a href="#top">Return to Top</a> will take you to that anchor.

Return to top View source to see where the anchor named top is.

The # symbol before the name lets the browser know that you are looking for a section of the page and not a different page. Don't put the # in the name anchor though, only in the href one.

You can link to anchors on other pages the same way, just put the normal page URL followed by #anchorname.

Example: <a href="resources.php#Graphic">Graphics resources</a>
makes: Graphics resources

Mailto link

<a href="mailto:me@myaddress.com">Write me</a> creates a link which will pop up a blank email addressed to me@myaddress.com for the user to fill out.

Example: <a href="mailto:president@whitehouse.gov">write the President</a>
makes: write the President

Sounds and other file types

You can link to anything, it doesn't have to be an html page. If you link to a file type recognized by the browser, it will automatically open a viewer. If the browser is not sure what to do with it, it will ask you whether it should open or download the file. Typically, if a user has the applicable plugins - linking to a .pdf file will open Acrobat reader when the link is clicked, linking to a .ram file will open Real Player when the link is clicked.

Example: <a href="sample/tada.wav">Hear me?</a>
makes: Hear me?