For your page to do much good, it needs to be 'linked' to another page, or another site. Otherwise, anyone who comes to your site will open up your index.html page...and that's it. Zippo. Any information you have on other pages, they can't get to because they have no way of knowing they're there! So, we throw a few links to your other pages in. Then again, you could be super-boring and only have one page on your site. In this case, for the sake of experimentation, you will have to link to another site.
I get that...so how do I do it???
We all know what a page address is. Let's use Yahoo for an example. If you type http://www.yahoo.com in the address line of your browser, and hit enter, it will take you to Yahoo. Simple. To have a clickable link which will take you there, you need to make this link 'active'. To do this, you need to enclose it in tags (duh, why aren't you surprised????).
The tag you need is called an "a" tag (which stands for anchor). The "a" tag can have quite a lot of variables to it, which I won't go into now. The main one you need to know is the "href' command, which is what makes a link active.
So, here we go. Type this in your notepad:
"
<a href="http://www.yahoo.com">"
Save and refresh your page. You will see.....nothing!!! That's because all of that is enclosed in <tags>. What you now need to do is make it so you can click on some text and it takes you to Yahoo. Naturally, the text doesn't go within the <tags>
"
<a href="http://www.yahoo.com">Click here to go to Yahoo!!</a>"
Notice what I did there? I put the text between the 'link' and the closing </a> tag. Because the text was between the two tags, it was affected by the preceeding tag. As this was a href, or a 'link' command, then that's what happened to the text. If you save your notepad and refresh your html page, you will find you have a clickable link.
How to link to another page on your website.
You do the same thing as linking to another site, but you don't need to put the full address of the page in. This is called
relative linking. For example, on your index.html page, you want to put a link to a page called pictures.html. You could either type in
"
<a href="http://www.joeblow.com/pictures.html">Click here for pictures!</a>"
or you could make sure both pages are in the same folder in your website account, and type in:
"
<a href="pictures.html">Click here for pictures!</a>"
If the page you want to link to is in another folder, say in a folder called 'images', then you would need to state the path to it:
"
<a href="images/pictures.html">Click here for pictures!</a>"
If the folder the image is in is up a level, you use '..' to move up one directory in the path:
"
<a href="../images/pictures.html">Click here for pictures!</a>"
Next comes linking images in lesson 10!
