TEC home
Web home
Page/site design
- basic principles
- examples and resources
Basic html
- tutorial
- resources
Netscape Composer
- tutorial
- resources
Dreamweaver
- tutorial
- resources
Uploading and downloading
- setting up your mason account
- basic procedure
Web assignments
- general
- design and navigation
HTML Tutorial - Links
In this tutorial you will learn how to write some additional html code in order to imbed links on a basic web page. Note that the actual
html tags are in <arrow> brackets and the explanations of the tags are in [square] brackets.
Skim the codes and explanations to get a sense of what you can do, then copy the code you need and paste it into the text file you are working with and adjust/revise accordingly.
The tags are generally ordered from most to least commonly used.
<a href="http://www.gmu.edu">GMU Home Page</a>
<a href="filename.html">next page</a>
<a href="../filename.html">next page</a>
<a name="anchor-name">
<a href="#anchor-name">jump down</a>
<a href="filename.html#anchor-name">jump across</a>
<a target="window" href="http://www.gmu.edu">GMU Home Page</a>
<a href="mailto:user@gmu.edu">contact site manager</a>
<a href="filename.html"><img border="0" src="filename.gif"></a>
See Images for more on coding images into your web pages.
Note: The a href tag also lets you make links to image files, sound files, movie files, downloadable
files, newsgroups, PDF files, etc. Some of these possibilities will be handled by other tutorials within this site.
[The a href code creates a web link. When making a link to a web page that is not internal to your site,
be sure to use the full URL (or http address). The text in between the > and the </a> is what shows up
on the web page as the link. Always make sure the text that shows up as the link clearly indicates where the link will take the user.]
[When creating a link internal to your site (in the same folder as the page you are working on), it is easiest to just
use the filename instead of the full URL. This allows the links to work on the harddrive, while you are working
on your site, as well as online after you upload it.]
[Sometimes you will want to make a link to something that is in your site but in a different folder. Use ../ before
the file name to designate this operation. This saves you from having to use the full URL and keeps the links relative.]
[Sometimes you will need to make a link to a specific spot within a page. To do this you first need to make an "anchor"
at that spot so the a href tag knows where to go. Do this just above the spot you want the link to go to. The anchor name can be any single word you choose.]
[Once you've created the anchor, you can use the a href tag to make a link to it. Clicking on it will allow the user to
jump down to the specific section of text. (It is often customary to create a "back" link for easy navigation.)]
[You can also link to a specific spot in another page. Just add the filename or URL in front of the #.]
[If you are linking to a page that is external to your site, you may want it to open in another browser window.
Just add the target="window" before the href. This keeps the user in your site, making it harder to get lost surfing.]
[The mailto tag allows you to create an email link. Clicking on it will allow an email window to pop open with
the address in place. If the users have their email programs set up in conjunction with the browser they use, they can send that email directly out.]
[Images can also be used as links. Just insert the image tag in the place to the link name. Be sure to designate the border as 0
to keep the link color from showing up as a border around the image.]
HTML Home | Text | Links | Images | Tables
