Essentially, the method of having one web-page link to another is what makes the web what it is. Links allow us to connect to other web-pages, to other web-sites, to programs that people can download, to pictures and many more things. Fortunately, linking is very easy, and is done with the anchor attribute. The general format for a link is:
<a href="location">Click-able Text</a>
Putting that into your HTML will mean that when the user clicks on the words "Click-able Text", they will be taken to location. Now, let's see a few different examples.
Linking to another website
<a href="http://www.google.com/">Google</a>
Outputs
Because I'm linking to an external website, I have to include the full address http://www.google.com/. If I wanted to link to one of Google's web-pages, I would still indeed have to include the full address e.g. http://www.google.co.uk/some-folder/some-file.htm.
Linking to a page on your own website
Alike images, you need to link to the page relatively. Linking to the introduction of these tutorials (which are indeed in the same folder):
<a href="index.html">Website Building Tutorials Introduction</a>
Outputs:
Website Building Tutorials Introduction
Linking to images/files/programs
There really is no difference! All you need to do is link directly to the file.
<a href="example/example-download.doc">Example Download</a>
Outputs:
Always remember to include the file extension. The file extension for the above was .doc!
Links that open in new windows
There is an attribute to open links in new windows... however officially, the people who invented and regulate HTML now recommend against using it. The reason for this is because such an attribute assumes that the user has a web-browser that has a window-based system, and not all do (think mobile phones). All good web browsers, including those that are used every day by the masses, still and always will support this attribute however, so I am going to teach it you anyway. Whether you choose to use it, or to research further into alternatives, is up to you.
<a href="index.html" target="_blank">Introduction</a>
The target="_blank" attribute is the key here. Including that in your anchor will cause the link to function in such a way that a new browser window is opened. Example:
Links really are that easy. Oh! And before I forget, you can also make an image a link. So if we wanted our blue-bird from the previous chapter to be a link to a site about birds, we put the image element inside of the anchor element, like so:
<a href="http://www.birdwatching.com/"><img src="demo-image.png" alt="Bird Watching - For People With a Passion For Birds"></a>
Output:
Why not put it in practice and link to your own favourite websites? And then, being the mastermind you are, get yourself through the end of chapter quiz.