...in which we actually create a "web" of pages.
Introduction
So far we've learnt the basics of tags and the structure of an HTML page. We've created rich-text, with bolds; emphasis and italics. However, we've yet to see the most impressive and flexible feature of the World Wide Web: links.
Links
Links allow the user to move from one page to another and
are included using the <a> tag ("a" for anchor).
However, look at the code below:
Notice that we've not been able to specify the destination! We do that by adding attributes to the tag:
The attribute, "href", has a value of page2.html - note that the value doesn't include the quotes which only surround the value to indicate to the browser where it starts and ends.
Always give your links meaningful names: this is useful to blind users; advanced search engines like Google; and won't disrupt the flow of your text. Compare the following:
- To send me an email, please click here.
- Please feel free to send me an email.
I'm sure you'll agree that the second one reads better, and also makes the link itself meaningful: the link will send an email, rather than the abstract concept of "clicking here". The first one may also make you appear silly if the user controls their browser through speech: they may ask their browser to follow a link, rather than by clicking a mouse.
Absolute/relative
A link may go to a full URL or just the name of a new
file. The first is called an absolute link, such as:
http://www.bleb.org/writings/html/; the second is a
relative URL. Relative URLs can take the form of:
- Files in the same directory, eg.
lesson2.html - Files in a sub-directory, eg.
subdir/example.html - Files in the parent directory, eg.
../theseus.html - Files in a subdirectory of the parent of the parent directory, eg.
../../software/pda/
The final example shows that most web servers will use a default filename
of index.html, index.htm or similar when asked to
fetch a directory.
If you want to fetch a directory's
index.html then ensure that your link contains a trailing
slash, '/'. The web browser does not know about the directory
structure or the default filename and it will attempt to fetch a file
called /writings/html (for example). The web server will notice
that this file doesn't exist, but does exist as a directory and will
redirect the browser to /writings/html/ - this will mean that
there will be two connections to fetch the one page, meaning
the page won't load as quickly.
These files are specified, due to traditional reasons, in similar way to a UNIX filesystem:
| Construct | Meaning |
/ |
The root directory of the site, eg. http://www.bleb.org/ |
.. |
The parent of the current directory, eg. we're currently in:
/writings/html/. ".." takes us to /writings. "../../" moves to / |
. |
The current directory - kind of pointless as ./lesson2.html
is exactly the same as lesson2.html |
Anchors
Links don't just have to take you from one page to another, they can also take you to a particular point within a page:
Note that the named anchor doesn't display any differently:
This is section 2
....Go back to section two.
As well as moving within a page, the "#name" will work when appended to a larger URL:
Conclusion
We've now seen attributes, which allow us to use HTML tags do different things in different places; explored links and seen how named anchors can allow the user to move to different parts of a long document easily. In the next part we'll explore a tag which makes extensive use of attributes: images.