Guestbook
E-mail me
Legend:
Easy
Medium
Tough
Suicidal
Making links
Link to some other place
Probably the most important part of all web sites, apart from textual content, is links. For those new to the Internet lingo, a link is a word that stands out in the text (usually blue and underlined) that takes you to some other page. Making a link is quite easy. Here's an example to get you started:
<A HREF="https://htmlandbeyond.tripod.com/">
Click here to go to my page
</A>
This would give us this link:
The A stands for anchor, and the HREF stands for hypertext reference. This is where you'll put in the destination. Between the <A> and </A> is the text that'll show up. You will learn how to change the color of this text in the next page.
Link inside your own site
This part is a bit trickier. If you want to make a link to a page in your site from another page in that same site, you can always do this:
<A HREF="https://htmlandbeyond.tripod.com/guestbook.html">
Click here to sign my guestbook
</A>
If the page which contains the link is in the same folder as the page which you link to, you can also do this:
<A HREF="guestbook.html">
Click here to sign my guestbook
</A>
If the page to be linked to is in another folder in the same domain, then you can make a link this way:
<A HREF="/guestbook.html">
Click here to sign my guestbook
</A>
Confused yet? Here's a question that'll make you go bonkers then: If you were to make a link in a subfolder to a page in your main folder, say index.html, how would you do it? If you put index.html as your HREF, then you would stay in the same folder. If you put /index.html as your HREF, then different browsers might interpret it different ways. To end once and for all this nonsense, you can use the little known, but highly convenient tag <BASE> in the head section, like so:
<HEAD>
<BASE HREF="http://htmlandbeyond.tripod.com">
...
</HEAD>
Important note: the Base tag only works when there is no folder slash(/) in the URL
When you use this tag, all your relative links will refer to it. This will end once and for all problems of interpretation by browsers. When you do an outside link, the browser will know it is an absolute address when you put http:// in front of it, so make sure you do. The Base tag also help relative links work when a document is saved on the user's hard drive.
E-mail links and other protocols
E-mail links are actually really easy to do. Here's an example:
<A HREF="mailto:immyno@hotmail.com">
Click here to e-mail me
</A>
Will give us this:
The mailto: prefix is a protocol for e-mail, like http:// (hypertext transfer protocol) is a protocol for web pages. There are some other protocols, and you can use them the same way as any other link. Here's a couple to get you started:
|
Protocol |
prefix |
| Gopher | gopher:// |
| Newsgroups | news:// |
| Telnet | telnet:// |
| File transfer | ftp:// |
Links to files other than html
Of course, there are ways to link to stuff other than standard HTML. Some files, even though they are not HTML, are displayed by the browser itself. A few notables are .cfm (cold fusion), .asp (active server page), .shtml (server HTML), .gif's and jpeg's, and .wrl (Virtual reality modeling language). Others are downloads, mainly .exe and .zip files. These particular links are made the exact same way as any other link, like so:
<A HREF="somefile.exe">
Click here to download this file
</A>
Which gives us:
Click here to download this file
Sorry, this isn't actually a real link, but rather an impression of what such a link would look like. At this point I should make a note about download links: since some people have crappy 28K connections, you should always put the size of a downloadable file next to it. People hate it when they download an unmarked file which they think will take 10 minutes but actually takes 3 hours, especially when it's a piece of crap software...
Image links
Instead of making linking text, why not link an image? This is actually quite easy, as demonstrated by this example:
<A HREF="http://htmlandbeyond.tripod.com">This gives us:
<img src="https://htmlandbeyond.tripod.com/images/image.gif">
</A>
As you can see, this gives the image a border the same color as the other links. To eliminate this, add a border="0" attribute inside the image tag.
Finally
There are some other types of links you can use, like same page and javaScript links, but don't worry, you probably won't need them yet. Now we can go along to the next segment focusing on how to change the color of your pages, It's all about the body .