You may read the following sections in their entirety
or use these choices to go directly to a section.

| Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) | | Placing your own subject in emails | | Placing a message in the body of emails |

1. jump from section to section within the same web page (also called Page Jump)
2. link to a different page within your own website (such as my linking this lesson to the next lesson or to my home page)
3. link to another web page or website anywhere in the world

1. clicking on a word, phrase or sentence - such as those you see at the top of each of my lessons (and also on my home page to choose the lessons).
2. clicking on a button - such as those you see at the very end of this lesson to take you back to my home page or to the next lesson.
3. clicking on an image (that is, a picture or graphic). We will study images in Lessons Seven and Eight.

To offer a page jump, you need two items:

1. The command that points or sends the browser to another section on your web page.
2. The place or point on the page where you want the browser to jump to.

<A HREF="#linkname">Click on these words to go to the bookmark</A>

Where "linkname" is the name of the section you are jumping or linking to. That is, a section of the web page has been bookmarked with the name "linkname". An example of a page jump is the following (to return back here, just click on the BACK button on your browser menu bar):

click here to go to the top of the page

<H4 ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></H4>

If you do not want to use a header tag, then use the paragraph tag as in:

<P ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></P>

At the point or place where you want the browser to jump to, you insert the following command:

<A NAME="linkname"></A>

For example, at the top of this page (right after the BODY tag), I entered this command:

<A NAME="top"></A>

and this is the spot that the browser will jump to whenever someone clicks on the words "click here to go to the top of the page". Thus I have bookmarked the top of the web page using the name "top".

Note the following points with these two commands:

1. When you move the mouse pointer anywhere on the words, "click here to go to the top of the page", it turns into a pointing hand. Anytime you see a pointing hand, it means that you are on a link and clicking on the link will take you some place. Notice that when you move the pointer over the words "click here to go to the top of the page", the location of this lesson, the file name of this lesson (lesson6.htm) and the "linkname" (#top) appears on the status line at the bottom of the browser (try it to see for yourself).
2. "#top" is called the URL which stands for Universal Resource Locator. A URL is the address or location of the link.
3. The A stands for Anchor. In general, the anchor tag tells the browser to anchor or to attach to something else. In HREF="#top", we are using it to tell the browser to anchor or attach to another section on the same page called "top".
4. Every Anchor tag must have a closing or end tag (</A>) to signal the end of the anchor.
5. The anchor element is a "container element". Everything contained between the <A> and </A> tags is affected by the element. In our example, the container element A not only contains the name of the section we are jumping to ("top"), but also the words to be clicked on ("click here to go to the top of the page").
6. The Anchor element is called a Hyperlink as it allows you to link to any location or address you want. The anchor tag is the glue for hypertext documents. When the enclosed text (which can also be an image instead of text) is selected by the viewer, the viewer is immediately sent to the location specified in the HREF attribute.
7. HREF stands for Hypertext REFerence. It means that "this is where the link is going to" - that is, where the link is referenced. In my example, it is going to a section called "top".
8. As my example shows, the name I chose for the "linkname" was "top". Choose your link names to reflect the section you are jumping to and there is no need to have long link names.
9. The # symbol that you see in the first command (in my example, "#top") must be there. The # denotes an internal page link. Without it, your browser will be looking for the code name outside the page you are on and of course, it won't find the name.
10. There is no # symbol in the NAME attribute.
11. The NAME attribute is used to set up "named anchors". The named anchor in our example is "top". When you click on the link, the section where you place the NAME command (the target of your HREF attribute) will appear at the top of the browser screen.
12. The name you choose in the HREF attribute, must match the case in the NAME attribute.
13. The value of the HREF attribute ("#top" in our example) and the value of the NAME attribute ("top") must be enclosed with quotation marks. If you don't enclose with quotation marks, the hyperlink may not work correctly.
14. Anchors cannot be nested. You cannot have an anchor within an anchor.
15. Please note that the following two statements do exactly the same thing:

    <A NAME="park"></A>A WALK THROUGH THE PARK

    and

    <A NAME="park">A WALK THROUGH THE PARK</A>

    Both these statements will place "A WALK THROUGH THE PARK" at the top of the browser screen when the viewer clicks to go to that section. With the first statement, a good HTML validator (a program to make sure you are writing correct HTML) will warn you that you have an empty container element A because no statement is contained between the anchor tags. Normally when you use a container element, it would be expected that something would be "contained" between the opening and closing tags - hence the warning. The second statement avoids this warning message as "A WALK THROUGH THE PARK" is contained between the anchor tags. Note also that a HEADER tag is not allowed between anchor tags, so if "A WALK THROUGH THE PARK" uses a HEADER tag, then you must use the first statement.

Notice at the beginning of the lesson I have six choices to cover all the main topics. To separate them I used vertical bars ( | ) as in:

| click here to go to the top of the page |

Now, if you need more than one choice in the menu, you simply place each of your links side by side as in:

| Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) |

Here are the statements that support the above links:

<H4 ALIGN="CENTER"><A HREF="#links">| Links in general |</A>
<A HREF="#page">| Links within a page - page jump |</A>
<A HREF="#another">| Linking to another page in your website |</A>
<A HREF="#world">| Linking to another page anywhere in the world |</A>
<A HREF="#button">| Using a link button |</A>
<A HREF="#mail">| MAILTO: (sending an e-mail) |</A></H4>

There are several things that can be learned from this one example and here they are:

1. Notice that these page jumps are all centered with only ONE center command. Do not use the <BR> tag. In other words, don't say, "I can only get these two links on one line and so I will insert a page BReak command and then place the next three links on the next line, and so on. The problem with doing this is that you are designing for appearance instead of for content. If you want your links centered, then center them all with one ALIGN attribute and let each individual browser decide how they will be centered. In some browsers, maybe three links can fit on one line and in other browsers, maybe only two links will fit. Also, one browser may be able to fit all your links into two lines while another browser may require three lines. You need to take all these thoughts into consideration and so one center command is all you need and your links will look good in all browsers.
2. Notice also that you not only can click on your link words (such as "Links in general"), but you can also click on the vertical bars (they are also underlined and highlighted in blue). This is because the vertical bars are also contained between the Anchor tags (that is, between the <A> and the </A> tags). You may not want this. Notice at the top of this lesson that I do not have the vertical bars as part of the link statement (they are not underlined). Compare the last example which is:

   | Links in general | | Links within a page - page jump| | Linking to another page in your website | |Linking to another page anywhere in the world | |Using a link button | | MAILTO: (sending an e-mail) |

   to this example, where each choice is clearly separated and with no underlined and highlighted vertical bars:

   | Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) |

   Here are the lines I used for this latest version.

   <H4 ALIGN="CENTER">| <A HREF="#links">Links in general</A> | | <A HREF="#page">Links within a page - page jump</A> | | <A HREF="#another">Linking to another page in your website</A> | | <A HREF="#world">Linking to another page anywhere in the world</A> | | <A HREF="#button">Using a link button</A> | | <A HREF="#mail">MAILTO: (sending an e-mail)</A> |</H4>

3. Note that each pair of adjacent vertical bars is separated by one space.
4. Remember that the anchor tags (<A> and </A>) act as a container in that all that they contain will be part of the link. If you do not want your vertical bars part of the link, then place them outside of the anchor tags, that is, outside the container tags as shown above and as shown in the following example:

   | <A HREF="#page">Links within a page - page jump</A> |

5. If we have more links than will fit into one browser line, the browser will automatically wrap to the next line. The problem is to avoid having part of a link on one line and the rest of it on the next line. We don't want the vertical bars that surround a link to be separated from the links either. For example, in our third choice, "Linking to another page in your website", we want to ensure all these words are on the same line - whatever line that might be - including the vertical bars around them. We don't want it to be split between two lines. To do this, we use the space character (&nbsp;) to replace each space between words. This will fool the browser into thinking that "| Linking to another page in your website |" is one long word and so if it won't all fit on one line, the whole thing will be wrapped to the next line. This then is how part of the above would look with an &nbsp; replacing each space between words including the vertical bars:

   <H4 ALIGN="CENTER">
   |&nbsp;<A HREF="#links">Links&nbsp;in&nbsp;general</A>&nbsp;|
   |&nbsp;<A HREF="#page">Links&nbsp;within&nbsp;a&nbsp;page</A>&nbsp;|</H4>

| Links in general | | Links within a page - page jump | | Linking to another page in your website | | Linking to another page anywhere in the world | | Using a link button | | MAILTO: (sending an e-mail) |

Instead of the vertical bars around the links, you might prefer square brackets [    ]. The only problem with square brackets is that many text only browsers will automatically insert square brackets around each link. Thus if the browser places square brackets around links and you also use them, then each of your links will look like:

[[link words]]

which doesn't look so nice.

Here is a problem for you to work on.

Problem 1: Make up the statements that will produce the following page jumps (for this problem, do not use the "&nbsp;" command):

| Walk through the park | | Going for a swim | | A bicycle ride |

Problem 3: Change your answer to Problem 1 so that no browser will be able to break up any link. That is, if a link will not fit all on one line, it will place the entire link on the next line.

| Click here to go to the answer section |

Linking to pages within your own website is easy to do. Recall that the basic command for a page jump studied in the last section is:

<A HREF="#linkname">Click on these words</A>

Well, to link to another page such as to your home page, just replace the #linkname with the name of your file as in:

<A HREF="filename.htm">Click on these words</A>

For example, if your home page was named index.htm, you could have:

<A HREF="index.htm">Go back to home page</A>

which will be displayed in the browser as:

Go back to home page

If you do click on these words, the browser will immediately load my home page. To return to this spot, click on the "BACK" button on the menu bar.

Note the following points with the above command:

1. As before, the A stands for anchor and in this case, it begins the attachment to another page.
2. HREF as before, tells the browser that this is where the link is going to.
3. The value of the attribute HREF is "index.htm". That is, "index.htm" is the file or document name of the web page you are linking to. The file name must be enclosed with quotation marks.
4. Since the words "Go back to home page" are contained between the anchor tags <A> and </A>, a person can click anywhere on those words and the browser will load the home page.
5. You do not need a <A NAME="filename"></A> command as the file (in our example, "index.htm") already exists.
6. When you lay the mouse pointer anywhere on the words, "Go back to home page", you will see the file name ("index.htm") and its location displayed on the status line at the bottom of the browser screen. In other words, the complete URL is displayed.

Problem 4: Where will the browser look for this file called "index.htm" or whatever file name you choose for your web page?

| Click here to go to the answer section |

<A HREF="filename">Click on these words</A>

as in:

<A HREF="index.htm">Go back to home page</A>

where the browser will load the file called "index.htm" when you click on the words "Go back to home page".

To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to. Remember that you must also enclose the COMPLETE ADDRESS (the URL) of the link with quotation marks. For example, the command

<A HREF="http://www.dayspring.com/ecards/">Want to e-mail a greeting card to someone?</A>

I would like to visit this e-card site

Problem 5: In summary, the three link commands that we studied in this lesson are very similar statements. The only differences are in the names. Here are the three situations showing their similarities. Give a brief description of when each is used.

a)   <A HREF="#top">enclosed text</A>

b)   <A HREF="index.htm">enclosed text</A>

c)   <A HREF="http://www.press.com/perma/">enclosed text</A>

| Click here to go to the answer section |

Problem 6: Suppose you have a web page that contains pictures of your family and also of your pets. Suppose also that this page of pictures is called pictures.htm. What command would you use to not only load the pictures page, but the pets section on the pictures page. That is, we want to load the pictures page and then do an immediate page jump to the pet pictures section.

| Click here to go to the answer section |

<H3 ALIGN="CENTER">
<FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM></H3>

Note the following explanations on these statements:

1. There are two main command lines here. The first one is called the FORM command and the second one is called the INPUT command.
2. FORM is a container element. The opening tag tells the browser that a form item is going here. The closing tag </FORM> ends the form item (which you see at the end of the statements). We will learn about forms in a later lesson.
3. The FORM command has two attributes - METHOD and ACTION.
4. METHOD, a FORM attribute, tells the browser how to handle the FORM command. Its value here is "GET". That is, the browser is to "get" something which in this case points to a link through the ACTION attribute.
5. ACTION means the connection that you want to make. In this case, the action is a connection to my home page which is a file called "index.htm". If you want to connect to a page on the WWW, be sure to type in the complete address (URL). ACTION is a required attribute as it specifies the URL of the location you want to link to.
6. The second command line is the INPUT command and it generates the button.
7. The TYPE attribute lets the browser know what TYPE of INPUT will occur. In this case we want to SUBMIT a button (a button is assumed in "submit"). Thus TYPE="submit" produces a button.
8. The VALUE attribute gives the wording that will appear on the button.
9. Only the value of the ACTION and VALUE attributes require quotation marks. Quotation marks for the METHOD and TYPE values are optional.

<H3 ALIGN="CENTER">
<FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM>
<FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM></H3>

LINING UP LINK BUTTONS

is a little more complicated. However, if you want the statements now, here they are:

<TABLE BORDER="0">
<TR>
<TD><FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM>
<TD><FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM>
</TABLE>

TR stands for Table Row and TD stands for Table Data. We will study tables in Lessons Eleven and Twelve, but for now you can use these statements as they do work. If you want to see how I did the three buttons at the end of this lesson just choose Source of Page Source from the View menu.

Final remarks about buttons.

• Normally, you do not use buttons to link to other web pages. Instead, use text and images to link to other pages, where you click on some words or on an image to load another web page. Buttons are usually used in FORMS and for executing scripts. If you visit my guestbook page, you will see two buttons at the end of the form - one to submit the contents of the form and the other to reset the form contents.

• When a web page is loaded after clicking on a button, you may see a question mark (?) after the file name in the "location" bar as in: pictures.htm?. Don't worry about this. The question mark simply indicates that the page was loaded by clicking on a form button.

Here is a statement that would allow anyone to send me an e-mail:

Please tell me what you think of these lessons by sending me, John Gilson, an e-mail.

Note that only "John Gilson" is underlined and in blue meaning that if you want to send me an e-mail, you only need to click on my name. Try it and see what happens. You won't be able to send me an e-mail as I am using a dummy address so you can experiment with the MAILTO: command. If you want to send me an e-mail, you can do it from my home page. To close the e-mail box, just choose FILE and then CLOSE and the e-mail box will disappear.

Here is the HTML line that gives the above statement:

Please tell me what you think of these lessons by sending
me, <A HREF="mailto:jcgilson@bfree.on.ca">John Gilson</A>, an e-mail.

In this example, jcgilson@bfree.on.ca is my complete e-mail address. For your own web pages, just replace my e-mail address with yours. Note that the only difference between this e-mail link command and a link to any web page is that the e-mail address goes in place of the web page URL.

Problem 7: Write the HTML statements that would give the following line on a web page. You can replace my e-mail address with yours and then try sending yourself a message.

For more information, please send an e-mail to me, John Gilson, and I will get back to you as soon as possible.

| Click here to go to the answer section |

<A HREF="mailto:jcgilson@bfree.on.ca?subject=topic">

as in:

<A HREF="mailto:jcgilson@bfree.on.ca?subject=product information">Please send more product information</A>

If you want to include the e-mail address of the person you also want to receive a carbon copy of the same e-mail (that is, the person you want to be cc'd), the format is:

<A HREF="mailto:jcgilson@bfree.on.ca?cc=person@site.com">

where person@site.com is the complete e-mail address of the person to be cc'd.

If you want to include the e-mail address of the person you also want to receive a blind carbon copy of the same e-mail (that is, the person you want to be bcc'd), the format is:

<A HREF="mailto:jcgilson@bfree.on.ca?bcc=person@site.com">

Note the following points:

1. Adding a subject, cc or bcc is not standard HTML, nor does any browser claim to support these additions. However, they do work in Explorer, Firefox and Netscape on both Macs and Windows.
2. Note that there is no space behind the end of the e-mail address and the question mark (?) that begins the extra information.
3. You are allowed to have spaces in the subject line, but no quotation marks (") are allowed as part of the subject.
4. Explorer, Firefox and Netscape do allow all three options in the anchor tag.
5. It appears that the success of these options also depend on the mail program used. An older version mail client may not accept any of these options.
6. Keep in mind that a visitor can change the subject, cc and bcc lines. These additional options after the question marks only start the e-mail in the way you would like to see them sent.

<A HREF="mailto:?body=Don't forget also to send in your financial statements as soon as possible.">Click here when ready to send us your email.</A>

In this example, the statement "Don't forget also to send in your financial statements as soon as possible" is the instruction that will be placed in the body of the email.

The maximum length of a message is 250 characters. If your message is more than 250 characters long, then either the entire message may not appear at all in the body or it will be cut off at 250 characters. So to be on the safe side, keep your message to no more than 250 characters.

1. The following is one way to solve the problem. You may have given the page jumps different names. Note that the problem did not have the link words strongly emphasized. This is because I used the paragraph tag (<P>) as in <P ALIGN="CENTER"> and then closed the section with </P> instead of using a header tag such as <H3 ALIGN="CENTER">.

   <P ALIGN="CENTER">
   | <A HREF="#park">Walk through the park</A> | | <A HREF="#swim"> Going for a swim</A> | | <A HREF="#bike">A bicycle ride</A> | </P>

2. Using my answer for Problem 1, the statement would be:

   <A NAME="park"></A>

3. <P ALIGN="CENTER">
   |&nbsp;<A HREF="#park">Walk&nbsp;through&nbsp;the&nbsp;park</A>&nbsp;| |&nbsp;<A HREF="#swim">Going&nbsp;for&nbsp;a&nbsp;swim</A>&nbsp;| |&nbsp;<A HREF="#bike">A&nbsp;bicycle&nbsp;ride</A>&nbsp;|</P>

4. The browser will look for the file in the current directory (also called "folder") - that is, the directory that you are saving all your web pages in. Once you have your website on the World Wide Web, the browser will look for the file in the directory or location that your server company or provider has placed your pages in.

5. The first statement is used in page jumps.
   The second statement is used in linking to another page in your directory (that is, to another one of your web pages).
   The third statement is used in linking to a website anywhere in the WWW.

6. To load the page called "pictures.htm" and then do a page jump to the pet pictures section, you would combine the URL of the page with the name of the pet pictures section as in:

   <A HREF="pictures.htm#pet">Click here to see pictures of our pets</A>

   where "pet" is the name of the pet pictures section. At the beginning of the pet pictures you would have something like:

   <A NAME="pet">Here are pictures of our pets</A>

7. Whatever you want for the link words must be contained between the anchor tags. Therefore the closing anchor tag must be placed after the word "possible". So we have:

   For more information, please send an e-mail to me, <A HREF="mailto:jcgilson@bfree.on.ca">John Gilson, and I will get back to you as soon as possible.</A>

| Back to the top of the page |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca