Links are created using the <a> tag. The text contained within the tag becomes active. If a user clicks it, they will be taken to the page specified by the href attribute of the <a> tag.
Linking to other Web sites
When creating a link to a different Web site, you need to first find out the URL of the resource you want to link to. The URL is the text which appears in your browser's location bar when you're looking at the site.
Once you know the URL, you can create a link in your page by using that URL as the value for the href attribute of the <a> tag. Between the <a> and </a>, you put the text (or images, which we'll cover later) that you want to provide for the user to click on.
This format looks like:
<a href="URL">Text description</a>
For example, imagine that you want to create a link to this class Web site. The URL for the front page is http://www.leafdigital.com/class/. So your link might look like:
<a href="http://www.leafdigital.com/class/">Class Web site</a>
Note: You must include the full URL (beginning with http://) in the href attribute. Abbreviated URLs like www.leafdigital.com/class won't work.
Linking to other pages in your own site
When you link to other pages in your own Web site, you could use the same scheme - find out the entire URL of the page on your site you want to link to, and enter this as the href attribute.
But this isn't a good idea. For example, if you move your Web site to a different server, all the URLs will change and you'll have to go through editing them. Also, you won't be able to use a copy of the site on your own hard disk because all the references will be to Internet sites.
Instead, you can use a relative URL. If you don't include the beginning part of the URL (http://) in the href attribute, it is interpreted relative to the existing URL of the document that includes the link.
For example, if you have a page stored at http://www.isp.com/username/example.html, any links in this page that don't begin with http:// will be taken as referring to http://www.isp.com/username/href-value. You could refer to the page http://www.isp.com/username/example2.html like this:
<a href="example2.html">Second example page</a>
If you use multiple "directories" or "folders" to organise your files, things get slightly more complicated. Supposing you also had a file at http://www.isp.com/username/folder/test.html; this could be referred to as:
<a href="folder/test.html">Test inside a subfolder</a>
The special folder name ../ can be used to refer to a folder one level up. For example, within the file http://www.isp.com/username/folder/test.html you might want to link back to the original http://www.isp.com/username/example.html, and you could do so like this:
<a href="../example.html">Returning to the original level</a>
(If you use ../ twice - ../../ - that refers to the folder two levels up, and so on.)
If your web site uses only relative links for its internal links, then it will work on your hard disk as well as after you upload it to a Web server.
A note about index.html
You might notice that some URLs end in a /, rather than a specific filename. This is a shorthand, instructing the Web server to show the default file in that folder. Normally, the default file is the one named "index.html". So the following URLs are equivalent:
- http://www.leafdigital.com/class/
- http://www.leafdigital.com/class/index.html
This shortcut doesn't work when the files are being read from your hard disk rather than via a Web server.
Example
I created an example file to demonstrate links. You should recognise everything else in the file from the previous lesson.
