Download Links

Links aren't limited to just taking the viewer to another web page. They can also initiate downloads, play sounds, etc. The idea behind this is that the browser knows how to handle some kinds of files like web pages (HTML files), image files, text files, and others. But, the browser can't render all types of files. It can't render executable program files (.exe) or compressed ZIP files ( .zip ). In between are files that the browser can only render if it gets help from another program called a "plug-in".

If you had a program called "myprogram.exe" on your site that you wanted to link to (to initiate a download), you'd just put the URL to the program in your link. The link below assumes the program is in a folder (directory) called "stuff":

<a href="stuff/myprogram.exe">

The only difference between this and the links we've studied previously is that we're linking to an executable program (.exe ) file instead of a web page ( HTML file ). Because the browser can't render executable files, a download will begin. The viewer will see the "download" dialog box and begin the download.

Browsers will automatically call in the help of a plug-in to render a file if it can. Say you make a link to a sound ( .wav ) file:

<a href="mynoise.wav">

The browser will call in a multimedia program like Windows Media Player or QuickTime to play the sound if a plug-in is available.

This brings us to the problem of what to do if you have a file like an ".mp3" music file on your site that you want to make available for download. If you just link to it as an .mp3 file, the browser will call in an .mp3 player to play the sound as opposed to downloading it.

To get these files to download, the easiest approach is to ZIP them. ZIP is one of many compression formats. It will make your ".mp3" into a ".zip" file which the browser and plug-ins can't render. Therefore, it will be downloaded to be unzipped by the viewer at their leisure.

We're not talking about images right now. We'll be discussing adding images to your pages in the next lesson. What a download link is about is making a file that the browser and its plug-ins cannot render and will, therefore, download instead.

I repeat, if you want to make sure a link to a file initiates a download instead of rendering the file, you should ZIP the file into a .zip format (or other compression format) that browsers cannot display.

Mailto Links

These links let someone easily email you when they are clicked. They work on a special HREF:

<a href="mailto:code_punk@hotmail.com">email me</a>

When rendered, clicking on the text "email me" will automatically open the viewer's email client and insert the "mailto:" address in the "To:" line of the message.

The syntax of the HREF is important. There are no spaces in the HREF. Begin by typing in "mailto" and a colon (:). Follow this immediately with the email address you want to use. This is all enclosed in quotes like any other URL.

Adding Text To An Email

You can use the "mailto:" link above to add a pre-made subject line or put text in the body of the message. This is done by passing "parameters" to the email client. To pass parameters you need to put a question mark at the end of your current "mailto:" HREF:

<a href="mailto:code_punk@hotmail.com?subject=HI!">email me</a>

The above link would cause the email client to open with your address and a subject line containing the string "HI!" in it. This is made by adding a question mark to the end of the email address and then typing in "subject=". Now, just type in the string you want to appear in the subject line. Notice that this string does not require quotes.

We can add text to the body of the message by using "body=". To add both some body text and subject line text we'll need to put both together with an ampersand (&):

<a href="mailto:code_punk@hotmail.com?subject=HI!&body=This text will be in the message body">email me</a>

Now the string "This text will be in the message body" will appear in the body of the message screen and "HI!" will appear in the subject line. Note that there are no spaces used except in the strings to present.

Scrolling Links

On really, really long pages, you can make links that will scroll to a certain section of the page with a link. I'll say up front that really long pages should be avoided. Put the content across several pages and make links from one page to another. But, if you just must have a really long page, here's how to make links that will scroll to a section of it.

There are two parts to a scrolling link: the "anchor" and the "link". The "anchor" is placed at the point you want to scroll to and the "link" is the link that will automatically scroll down to it.

Lets make the anchor first. Start out by making a loooong web page. I'd suggest copying and pasting text from my Zipping Tutorial into your page's <body> until you've got a really long page.

Now find a place about half way down and add:

<a name="downhere"></a>

The first thing you should note is that the anchor link doesn't have an HREF. It has a NAME. You can assign any string value you want for NAME. I used "downhere".

Also notice that I did not put any text between the <a> and </a> tags. You could add text between the tags and it would show up as a link, but it can't be clicked to go anywhere. It doesn't have an HREF, you see? This might confuse the viewer so I generally don't add text between the tags.

Now for the link part. Go to the top of the page and add the following link.

<a href="#downhere">

The big thing to note here is the use of a hash mark ( # ) preceding the anchor's NAME in the link's HREF. This tells the browser that it's looking for an anchor link and not a file. Give this a try or two and we'll move on.

There's a special link that will always take a viewer to the top of your page:

<a href="#top">

The "#top" HREF will take the viewer to the top of your page without need for an anchor link.

You can also scroll to an anchor link on another page (HTML file). Make another page and put a link to your looooong page like this:

<a href="loooongpage.html#downhere">

The above link will go to "loooongpage.html", load it in full, and then scroll down to the anchor tag named "downhere": <a name="downhere"></a>.

Try these out, but remember that it's always better to break up a long page into several smaller pages and link to them.

TARGETed Links

You can get your links to open new browser windows by using the TARGET attribute. To open a new window:

<a href="page2.html" target="_blank">

The above link would open a new window and load "page2.html" in the new window. It's the "_blank" part that opens a new window. We'll discuss other TARGETs in Advanced HTML.

Coloring Links

You can color your links by adding attributes to your <body> tag just like you did with the TEXT attribute.

<body text="black" link="red" vlink="orange">

The above would make your fresh, unvisited links red and the links the viewer has visited orange. There's an ALINK attribute that works in Netscape that will assign a color for a link when the link gets clicked.

The default colors for links are blue for fresh links, purple for visited links, and red for links being clicked (active). Don't worry too much about coloring links this way because the CSS you'll be learning in a few lessons will show you a more flexible and powerful way of doing this.

To Next Beginning HTML Lesson

Back To Beginning HTML Index