|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.11 - 1.12
ATWI80KB 6
May 12, 2000
1) Drop Anchor!
2) More Link Info
Example
1) DROP ANCHOR!
Hyperlinks can be put into web pages with anchors - <a>. To make a hyperlink, enter the 'href' attribute, in which you type the URL.
eg. <a href="nextpage.htm">Next page</a>
Everything between the <a href="____"> tag and the </a> tag is a link, i.e. when clicked on, it'll open the URL specified.
The URL (Uniform Resource Locator) is the location of the page. It can be written in two ways - either you can write the full path of the page (http://www.yourdomain.com/filename) or, if the pages are stored in the same folder, just type the filename. Unfortunately, things aren't always that simple.
The problem arises when you get lots of folders. What if you have:
- Two files, "index.html" and "next.htm" in the main folder
- A folder, "files" also in the main folder
- A folder in 'files' called "more"
- A file, "links.htm" in the folder 'files'
- A file, "coolstuff.htm" in the folder "more"
To make a link in index.html to next.htm, type:
<a href="next.htm">Next thingy</a>
To make a link in index.html to links.htm, type:
<a href="files/links.htm">Links</a>
To make a link in index.html to coolstuff.htm, type:
<a href="files/more/coolstuff.htm">Cool Stuff</a>
To make a link to index.html,
From links.htm:
<a href="../index.html">Home</a>
From coolstuff.htm:
<a href="../../index.html">Home</a>
If all the slashes are confusing, you can use the complete path, though it might take a *little* longer for the pages to load.
2) MORE LINK INFO
Ever seen those FAQ pages in which links point to a different point in the same page? Another type of anchor is used there. Just make an anchor where you want the link to point, and instead of the 'href' attribute, use the 'name' attribute (the name can be anything).
eg. <a name="part2">
This type of anchor doesn't need a closing tag.
The link itself is made normally. As the URL or 'href', type the '#' symbol followed be the name of the anchor you want to go to.
eg. <a href="#part2">Go to Part II</a>
Suppose you make two documents at 'http://www.yourname.com/docs/' called 'page1.html' and 'page2.html', and somewhere in page2.html you write <a name="nextchapter">. You want to make a link to 'nextchapter' from page1.html. Just type:
<a href="page2.html#nextchapter">Go to the Next Chapter!</a>
'Mailto' links:
A mailto link is a useful little thing you can do with an anchor.
eg. <a href="mailto:aniruddhnath@hotmail.com">Email Aniruddh</a>
If a page viewer clicks on 'Email Aniruddh', a new email window opens up with 'aniruddhnath@hotmail.com' in the 'To' box.
You can control the subject, too!
eg. <a href="mailto:aniruddhnath@hotmail.com?subject=ATWI80KB>Email Aniruddh</a>
EXAMPLE
<html>
<head>
<title>Return of the Tortoise</title>
</head>
<body bgcolor="#FFFFFF" text="#0000CC" link="CC0000" alink="#FF0000" vlink="#AA0000">
<a name="one">
This is section one.<br>
Go to section <a href="#two">two</a>.
<hr><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="two">
This is section two.<br>
Go to section <a href="#one">one</a>.
<hr>Click <a href="http://atwi80kb.homepage.com">here</a>!
<br><br><br><br><br><br><br><br>
</body>
</html>
NOTE: My email address is now aniruddhnath@hotmail.com
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.