Watch the Movie of Lesson 4

Now that we know how to make links that point to other pages and sites, I want to show you the rest of the link family. We are going to start with the "Mail" and "Jump" links.

Mail Links
The "Mail" link is a link that is used for "click-able" email addresses on web pages - like this one: False@email.com. Most of the time when someone clicks on these links Outlook or Outlook Express will open a new message to that address email. (Unless the use has specified a different program) Here is how we would code a "Mail" link.

You see, they're actually really easy to make - just like the other types of links! Now when someone clicks on this link - if and only if - they have a program setup to send and receive email from, that program will open a new email to that person. (The most common are Outlook/Outlook Express, whatever Mac's use (yes I know, very professional), and Mozilla Thunderbird.)

Jump Links
Jump links are used for "jumping" from one part of a page to another. Such as from the bottom of the page back to the top. You can even use them to jump from one page to a certain part of another page! Now the reason this is handy is for those long documents where you need to find certain sections of "Terms and Conditions", FAQ's, etc. A jump link has two parts, the place to jump too and the link to jump from.

The Jump link is the only link that needs two parts to work - a place to jump from and a place to jump too. Now like I said, one of the most common uses is to make a link to jump back to the top of the page so that a user doesn't have to scroll.

Now you can also jump to a certain part of another page. You just have to create the place to jump to on that page. Here is an example using two pages, first we make a link to jump from on page 1 then we make the place the user will jump too on page 2.

PAGE 1:

PAGE 2:

Now there is another way to make a jump link and that is by changing the "name" attribute to "id" as shown bellow. However, there are some problems with coding this way that you will learn once you get into CSS. So I recommend you stick with "name" instead of "id".

This is not recommended, I just wanted to show you so that you would know about it. Anyway, now you should have a good grasp of the email link and jump link so lets make a file now before we quite. Open SciTE and type the following in it.

Now we need to go over the code, so lets start with the first "a href="#bottom"". That is a link pointing to an area on the page called "bottom". Next, we have an "a name="top"" which tells us this area is called "top". Now all of the "<br>" tags are not a demonstration of my insanity, but actually because I wanted to skip 44 lines (yes I counted them, and that may be a demonstration of my insanity) down the page so that you would see that when you click on the top link the screen will move to the bottom. This jump wouldn't work if you could see the start and finish on the same screen because there wouldn't be any place to jump too - you would already be there!

Last we have the "a name="bottom"" letting us know that that area is called "bottom" and a link "a href="#top"" that will send us to a place called "top".

For your homework take a minute and make two files "page1.html" and "page2.html" and make jump links that go back and forth between them!