Step 13 – Links

In my index.html document I’d like the change parts of the last two lines of text to links. I’d like one link to go to my homepage, and I want the other to go to my e-mail address. Linking my homepage is done like this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>A short introduction</H2>
</CENTER>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
This is a short list of the services Nora Tol Virtual Publishing offers:
<OL>
<LI> Web design
<LI> DTP
<LI> Web hosting
<LI> Domain registration
<LI> (press)mailings for artists
</OL>

<CENTER>
<FONT SIZE=4>Take a look at her <A HREF=”http://www.noratol.nl/”>homepage</A> for more information.
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>

</FONT>
</BODY>
</HTML>

As you can see I’ve added:

<A HREF=”http://www.noratol.nl”>homepage</A>

The A-tag stands for Anker and is being used to link various files. The A-tag needs to be closed.
HREF stands for “hyper referer”. Anything that’s being written between the quotes will be seen as a location by the browser. The text between <A> and </A> will be a link in the browser. When you click this the browser will look for the file speficied at HREF. In this case it’s a file located on the Internet. Suppose you want to link something in the same directory. The code will be:

<A HREF=”next.html”>Next feature</A>

Linking an e-mail address is done as followed:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>A short introduction</H2>
</CENTER>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
<P>
This is a short list of the services Nora Tol Virtual Publishing offers:
<OL>
<LI> Web design
<LI> DTP
<LI> Web hosting
<LI> Domain registration
<LI> (press)mailings for artists
</OL>

<CENTER>
<FONT SIZE=4>Take a look at her <A HREF=”http://www.noratol.nl”>homepage</A> for more information.
<BR>
Or send her an <A HREF=”mailto:info@noratol.nl”>E-mail</A>!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>

</FONT>
</BODY>
</HTML>

To create a link to an e-mail address you add the term “mailto:” to the hyperlink referer <A HREF>. By doing this the browser will open the default mail client. The new message will automatically feature the e-mailaddress you have filled out after “mailto:”

You can also pass on a subject by doing this:
<A HREF=”mailto:info@noratol.nl?subject=reaction to website”>

Step 13b – Linking files for download:

You don’t have to limit yourself to linking HTML files. You can link other files as well, like:

<A HREF=”image.jpg”>Photo</A>

Whatever file the browser recognizes will be shown within the browser. Suppose someone would click the above link to image.jpg. This would become visible in the browser, but

<A HREF=”program.exe”>Program</A>
of
<A HREF=”file.zip”>Zip file</A>

will generate a download prompt.

Stap 13c – Link phone number for Skype

Use the “callto” definition to make a phone number on a website clickable for Skype users. For example link your phone number. Replace the number in this example with your own phone number:
<A HREF=”callto:01231234567“>01231234567</a>
Or link your Skype name. Replace the word “skype.name” with your own Skype name:
<A HREF=”callto:skype.name“>Call me on Skype</a>
Names and number used in this example are random. Please test with your own Skype account or those of people you know!

These links will only work when your visitors have Skype installed on their computers.

Stap 13d – Link to your Instant Messenger (MSN, AOL, ICQ)

It’s possible to create links from your website to various chat or messenger programs. These links will only work when the visitor has the chat programs installed on their PC. Otherwise the links will generate an error.
In the following examples uses random names. These are not my Messenger names! So replace them with your own account names or account names of those you know!
MSN (Windows Messenger)
It’s possible to have people add you to their MSN contact list. The link to do so is:
<A HREF=”msnim:add?contact=msnaddress“>Add me to MSN</a>
Replace msnaddress with your own email address (your login name for MSN or Hotmail). Your visitor needs to have MSN open in order for this link to work!
Microsoft offers you standard buttons, including HTML code. You can use these codes on social networking sites like MySpace or Facebook.
To open a chat window, use the following code:

<A HREF=”msnim:chat?contact=msnaddress“>Send me a message on MSN</a>
Replace msnaddress with your own email address (your login name for MSN or Hotmail).
AIM (AOL Intstant Messenger and iChat (Mac)) 
A link to have someone add you to their AIM contact list is done as followed (replace AIMscreenname with your own screenname for AIM):
<A HREF=”aim:addbuddy?screenname=AIMscreenname“>Add me to your AIM</a>
But, AIM offers much more. You can open a chat window:
<A HREF=”aim:goim”>Chat on AIM</a>
However, people don’t connect with you with that piece of code. To make this possible you use the following code (replace AIMscreenname with your own screenname for AIM):
<A HREF=”aim:goim?screenname=AIMscreenname“>Chat with me on AIM</a>
You can take it a step further and set a default message, like “Hello!” (replaceAIMscreenname with your own screenname for AIM)
<A HREF=”aim:goim?screenname=AIMscreenname&message=hello!“>Say hello to me on AIM</a>
Do you want to add more lines or links to your default message? You can use HTML in your message. However, avoid using double quotes in your tags! To start a second line (use a carriage return):

<A HREF=”aim:goim?screenname=AIMscreenname&message=hello!<br>How are you?“>Say hello to me on AIM</a>
to add a link:
<A HREF=”aim:goim?screenname=AIMscreenname&message=hello!<br>How are you?<br>Look at my <a href=http://www.noratol.nl>website</a>“>Say hello to me on AIM</a>
Links that contain characters like & and = might not work! Test this!
It’s possible to link your shared files on AIM or open chat room as well. Go toTech Recipes to see how.
Show online status:
It’s possible to show your AIM online status on your website. First, you have to create two images. One image should show that your online and the other should show your offline. In this example I’m assuming that the images are called online.gif and offline.gif. I’m also assuming that they’re placed on the server noratol.nl.

<img src=”http://big.oscar.aol.com/AIMscreenname?on_url=http://www.noratol.nl/online.gif&off_url=http://www.noratol.nl/offline.gif” alt=”AIM Status”>
Replace AIMscreenname with your own AIM screen name
Replace http://www.noratol.nl/online.gif with the correct URL to your image that says you’re online
Replace http://www.noratol.nl/offline.gifwith the correct URL to your image that says you’re off line
Ofcourse you can combine the image tag with a link to a chat window:
<A HREF=”aim:goim?screenname=AIMscreenname“><img src=”http://big.oscar.aol.com/AIMgebruikersnaam?on_url=http://www.noratol.nl/online.gif&off_url=http://www.noratol.nl/offline.gif” alt=”AIM Status”></a>

Step 13e – Make links accessible for speech tools

To make a link accessible for translation by software like speech tools your links would have to show title-specifications and your pictures (buttons) should use the alternate text attribute. For a text link that would look like this:
<A HREF=”http://www.noratol.nl” TITLE=”Nora’s website>www.noratol.nl</a>
Cool additional effect of this attribute it that the text shows when you leave your mouse on the link for a while.
When you use buttons, the link should look like this:
<A HREF=”http://www.noratol.nl” TITLE=”Nora’s website“><IMG SRC=”button.jpg” ALT=“Nora’s website” border=0></a>

Learn more HTML in Step 14. You’re doing well to come this far already!

Bookmark the permalink.

Comments are closed