About the Internet
About Web Browsers
Why Domain Names
HTML vs XHTML
Making Webpage Files
Naming Webpage Files
About HTML Tags
Basic HTML Page
DTDs and Doctype Tags
Spaces and New Lines
Bold, Italics, More
Comments in HTML
How to Add Images
Sources of Images
Image File Formats
Color in HTML & CSS
"Web-safe" Color Chart
Formatting with Tables
Intro to CSS
Ways to include CSS
Some Useful CSS
CSS Hover for Links
Promoting Your Site
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>
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>
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>
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>
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>
<a href="mailto:email@example.com">Write me</a> creates a link which will pop up a blank email addressed to firstname.lastname@example.org for the user to fill out.
Example: <a href="mailto:email@example.com">write the President</a>
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>