ooo
8 8...(cyberspace)...oo8
oo oooo8
www www |
Hyperlinks |
ooo
8 8...(cyberspace)...oo8
oo oooo8
www www |
Hyperlinks are connections (links) between one part of hyperspace and another. By default they are underlined pieces of blue text which can be clicked with the mouse, to bring you to the other part of hyperspace. A link which has already been clicked, is usually purple by default. You can make links to:
Wherever you want to link to, you need an anchor and a hyperlink reference.
Once you have decided where you want to jump to with a hyperlink, you have to make an anchor at that point. This is done as follows:
<a name="anchorname"></a>
'a' stands for anchor, of course, and you give it a name so that you can jump to it from somewhere else. The name can be pretty much anything, but it would, of course, be wise to choose something that makes sense; a short (preferably one word) description of the piece of text that anchor represents, for instance. Try to avoid special characters. Underscores (the dashes which hang off the bottom of the text line) are allowed; spaces are also allowed, but might not work easily. I tend to avoid capital letters, to make the guessing game easier. You can have text between the opening and closing tags of the anchor, which would then show up in the browser as normal, but you can also have the anchor tags just next to each other, not enclosing anything.
The hyperlink itself, the blue underlined piece of text which can be clicked, is enclosed by anchor hyperlink reference tags, as follows:
<a href="#anchorname">Click here to go to anchorname</a>
The # signals to the browser that an anchorname is coming.
A whole page can be used as a hyperlink reference, in which case there is no need for a #, because there is no anchor name:
<a href="contents.html">Back to contents</a>
This will link to the contents page of the set of pages we are in.
If there are anchors in the contents.html (and there are...), we can link directly to those, e.g.:
<a href="contents.html#table_of_contents">To table of contents</a>
Note the # indicating that an anchor name is coming, this time in a different page from the one we are in.
Here is a link to somewhere in the formatting course, from where you can get straight back here, if you click on the 'hyperlinks' link!
You can also link to somebody else's web pages, if you know their http-address (I think this stands for HyperText Transfer Protocol) or URL (Universal Resource Locator). In other words: you need the full web address, which usually starts with www, and you put it in an http location statement:
<a href="http://www.yahooligans.com/">Yahooligans</a>
This would take you to Yahooligans (obviously!). Again, you could link to specific places in somebody else's web pages, provided you know the name of an anchor there.
Hyperlinks are used for a few other things, the most exciting one of which being the mailto function:
<a href="mailto:mgwt@ysbl.york.ac.uk">Mail Maria</a>
Here's the 'real' one: Mail Maria.
This, when clicked, would bring up a mailer window with Maria's email address ready in the 'To' box. Handy! Another function is ftp, which would be used when large files can be downloaded from your site, for instance. A later worry, I think.
You may have noticed that the 'Address' or 'Location' box at the top of the browser window displays the hyperlink function file with the filename (including references to the folder structure you are using) of the document you are reading. This can also be used inside a web page, although this is only necessary when your folder/file structure is so complicated that it is difficult to figure out where the file is you want to link to, relative to the file where you are making the link. If the other file is in the same folder, you can make the hyperlink without any specific extras, like the link to the contents page as shown above.
If the file you want to link to, is in another folder, there are two options: absolute link or relative link.
In a relative link, you indicate how many folders 'Up' in the folder structure you have to search before you can trek down another line of folders to the wanted file. Here is a made-up example:
<a href="../../Sheila/firstgo.html">Sheila's first go</a>
With this link, we would go Up out of the Webcourse folder (and into the OOSC-kk2 folder), Up again into the 'My Documents' section of the computer, then Down into Sheila's folder, and we get to a file called 'firstgo.html'.
In an absolute link, you indicate exactly where the file is, starting from the top of the folder/file structure: the computer disk itself (usually called C:). Here is a made-up one:
<a href="C:/My Documents/Sheila/firstgo.html">Sheila's first go</a>
or
<a href="file:/My Documents/Sheila/firstgo.html">Sheila's first go</a>
This link would go to the same file 'firstgo.html' in Sheila's folder, as before (if the folder structure would be as described in the link, of course), and we can use this in any web page we are making, in whatever folder it would be in.
Instead of text to click on as a hyperlink, you can have a picture enclosed by the anchor hyperlink reference tags:
<a href="school.jpg"><img src="schoolsmall.jpg" /></a>
This may be useful on a page full of pictures, where you have a lot of small (low resolution) pictures which each hide the full size of the picture when clicked. Another use is to have pictures of buttons (let your imagination run free, here) which, when clicked, bring you to other pages of your website.
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |