Hypertext links allow your page to point to other places on the Internet. When the link taken it will take the person to that place.
To create hypertext links you must use the anchor tag, <a>. The anchor key is different from most tags because it is longer than most of the others. The full link is in the form of <a href="address">what you want to appear on the screen</a>. So if you wanted to create a link that went to the CCN homepage your link would like this:
<a href="http://www.chebucto.ns.ca/">Chebucto Community Net</a>
Where http://www.chebucto.ns.ca is the address for the homepage and Chebucto Community Net is what will appear highlighted as a link on the user's screen.
Now the http:// tells the computer that this is a hypertext link, which means that the location is on the World Wide Web.
Other types of links are:
All of these would then have an address following them.
So a ftp link could be:
<a href="ftp://sunsite.unc.edu/">Sunsite</a>
A gopher link could be: <a href="gopher://ac.dal.ca:70">Dal's Gopher Server</a>
Telnet can be very useful. It allows you to log into another server on the internet. So if you were at a university and had an account there you could still get back to CCN and log into your account by using:
<a href="telnet://chebucto.ns.ca/">CCN</a>
Try this now:
You could even use a friend's account to then log on to your CCN account and make changes to your files.
You could also create a link that sends an email message to someone. To do this you would create a mailto link:
<a href="mailto: email address">screen text</a>
Where you would put whatever email address you wanted into that spot.
A useful thing with links is that you don't have to supply the whole address if the document is on the same site. If this is the case then you can just give the link relative to the page you are on. So if in your public_html directory you had a Hobbies directory that had a rock climbing site called rock.html then you could link this to your homepage just by using the link:
<a href="Hobbies/rock.html">Rock Climbing</a>
Instead of having to have the link:
<a href="http://www.chebucto.ns.ca/~username/Hobbies/rock.html">Rock Climbing</a>
(Note that not only is the second link much longer, it also slows down the system more when you follow that link)
The path for the directory above the directory you are in is ".." so if you were in the rock climbing page and wanted to make a link back to your homepage you could just use the link:
<a href="../Profile.html">My Homepage</a>
In long documents such as this one it can be useful to have a table of contents at the beginning that allows the user to jump to different parts of the document. This is very similar to a hypertext link so it isn't much more difficult.
Normally when you set up a link <a href="document.html">Document</a> it takes you to the top of the document, but by using named areas it is possible make links to that document that go to specific parts, or to put a table of contents at the beginning of the document that lead to the different parts of the document.
In the document that has the section you need to use the anchor tag like this:
<a name="Section">Section Title</a>
You can make the section anything, but it is usually an abbreviation of the section title for convenience. The section title is what appears on the screen at the beginning of that section so you may want to format the link to add emphasis or to change the size of the title like this:
<h2><a name="zilla">Godzilla Movies</a><h2>
This way the title "Godzilla Movies" will appear emphasized.
Then to link to that spot you just have to add #section to the link to that document. So if the section "Godzilla Movies" was in a document called movies.html then the link would be:
<a href="movies.html#zilla">Godzilla Movies</a>
If there was a table of contents at the beginning of the movies.html document then the link could just be:
<a href="#zilla">Godzilla Movies</a>
To see more examples of this kind of link you can just hit \ to view the html of this document.
It is also possible to use the anchor tag to run scripts outside of html. These scripts are called cgi (Common Gateway Interface) scripts, and are basically mini-programs. On CCN normal users cannot install cgi scripts so you are restricted to whatever scripts are already installed. There are a number of scripts installed in CCN so this isn't necessarily a problem. One useful script is the urlstats script that can tell you how many people have come to your page. To use it the tag wold be:
<a href="http://www.chebucto.ns.ca/cgi-bin/urlstats?/file">Text<a>
Where file is whatever you want, including the path. You don't include the http://www.chebucto.ns.ca part of the address though. So if you wanted to set the counter up for your profile then the address would be:
<a href="http://www.chebucto.ns.ca/cgi-bin/urlstats?/~username/Profile.html">Text<a>
Another useful tag that you can use is the image tag. You can use this to put pictures in your pages (but lynx users won't be able to see them), and you can also use it instead of the screen text, or in addition to the text. By doing this you have created a picture that can be used as a link.
The image tag works similarly to the anchor tag. It looks like this:
<img src="filename">
Where filename is the name of the picture. Note that the filename must include the pathname of the file. So if you had a file called picture.gif in your graphics directory your image tag would be:
<img src="graphics/picture.gif">
If you wanted to though you could use a picture as a hypertext link. In this case you would include the image tag in the screen text area like this:
<a href="http://www.chebucto.ns.ca/"><img src="graphics/picture.gif"></a>
This would then display picture.gif and a user would then be able to select that picture and it would take them to the CCN homepage.
Bear in mind that lynx users cannot view pictures, only text. So if a lynx user was to view the page then they would not see this link. In order to make the link visible you must add the alternate tag to the image tag. The alternate tag tells the computer to display text that you specify instead of the picture, if the browser cannot view graphics.
So if you used the last link then you would want to modify it to:
<a href="http://www.chebucto.ns.ca/"><img src="graphics/picture.gif alt=CCN's Homepage"></a>
This way graphical users would see the picture.gif but text viewers would just see a link that says "CCN's Homepage". The important thing to remember is to provide text that gives the user some clue as to what the link does. If the link just said "image" then the user wouldn't know where it goes, but as it is now the user can still use your page effectively.
Another useful way to use the alt tag is to include the size of the file so that text users can determine if they want to download the image. This can be useful if you have a number of small images linked to their full-size counterparts. The graphical users would then see a small graphic and the text users would see a text description and how big the file is.
So if you had a big vacation photo (bigvacation.gif) of the Eifel Tower and a small preview version (smallvacation.gif) then you could make the following link:
<a href="http://www.chebucto.ns.ca/qraphics/bigvacation.gif"><img src="smallvacation.gif" alt="Picture of the Eifel Tower, gif 156k"></a>
So then in a graphical browser the person would see a small picture of the Eifel tower and could click on it to see a big version, and the text browser user would see a link that tells them that the link leads to a picture of the Eifel tower that is a gif file and is 156k, so that if they want to download it they can.
You can then how it is important to use the alt tag well. In the last example the text could have said anything, but then it's not really useful to the text user.
Another thing that you can do with images is to use the align tag. This way you can control where the image is displayed, and how text relates to it. When you just put the image tag in and there's text around it the text all goes to the bottom of the image like this:
[-----------------]
I I
I I
I Image I
I I
I I
text text text text[_________________]text text text text text
To make this display better then you can do a number of things.
But to get the best control you can use the align tag. The align tag controls how the text after the image is displayed so you may still have to use a new paragraph or line before the image to get just the right look.
To align the text that follows the image with the center of image you use the align center tag:
<img src="graphic.gif" align=center>
And then it would look like this:
[-------------] I I I Image I text text text text text text text text text text text text I I [_____________] text text text text text text text text text text text text text text text
To align the text that follows the image with the top of the image then you use the align top tag:
<img src="graphic.gif" align=top>
So it would look like this:
[------------] text text text text text text text text text text text text I I I Image I I I [____________] text text text text text text text text text text text text text text text
If you wanted the text to wrap around the image then you can use the align left or right tag:
<img src="graphic.gif" align=left>
So then it would look like this:
[-------------] text text text text text text text text text text text [ ] text text text text text text text text text text text [ Image ] text text text text text text text text text text text [ ] text text text text text text text text text text text [_____________] text text text text text text text text text text text text text text text text text text text text text text text text text
(note that this diagram is for align left. If you aligned right then the image would be on the right with the text to the left)
Of course if your images are not integrated with your text then you could just use normal formatting tags like <center> or <right>:
<p> <center><img src="graphic.gif"></center>
This would then have the graphic separate from the text and centered on the page.
If you want to make your images load faster then you can include the height and width of the image (in pixels) in the image tag:
<img src="graphic.gif" height=480 width=200>
What this does is it tells the browser what the size of the image is before it starts to load the image, so that it doesn't have to ask the server what the size is. This way the browser will load the images faster.
So in the end you can create a very long image tag that does a lot of things:
<img src="graphic.gif" alt="graphic, gif 156k" height=480 width=200 align=left>
This would display the picture graphic.gif, which is 480x200 pixels, along the left side of the screen, with text on the right. And if the person had a text browser then instead they would see the text, "graphic, gif 156k".