Adding Links

Linking Together Your Pages


When linking pages together it is important to make sure that your pages are saved in the same folder. Otherwise you will have to type the path to the files. For instance, if you are trying to link to your index page and both documents are in the same file you would have to type index.html. But if your index page was in another folder that is located in the same place as your index page you would have to type foldername/index.html. Or if the page you are linking from is in a different folder at a lower level than your index page you would type ../index.html to send it up a level and then locate your folder.

<a href="index.html">Home</a>

Links can be placed around text, as well as images. If you place your text around an image you should add an alt tag explaining what the link is to.

Linking To a URL


The same principal can be used in order to link to a page on the internet. Just set the value for href to the full url of the page you are trying to redirect to.

<a href="http://www.oscura.aisites.com/ia/redos/DrydenAimee_wk4Redo.html">Spin the Wheel!</a>

Creating an E-mail Link


E-mail links will allow a person to click on the link and it will automatically open the e-mail client on their computer and start a new e-mail with the recipient's name.

<a href="mailto:email@yahoo.com">E-Mail Me!</a>

Linking Within the Same Page


The last type of link is an anchor. This allows you to link to a certain section on a page. So if I had a long page of information, instead of making people scroll down to the section they want I could make a link to the sections and have it bounce right to it.

<a href="#sectionname">Section</a>

In order for the link to know where it's going you would need to put a placemarker for it to do so.

<h1 id="sectionname">Section</h1>

The id can be placed in any tag that is in the area you are trying to target. If you don't have any in the area, you can use a span as discussed in the layout section.

There are a lot of ways that anchors can be used once you learn more HTML and CSS to get some really interesting effects.