Learn HTML - Lesson - 11

Let's learn about links. You use links to :

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.
3. Link to another web page or website anywhere in the world.

There are different ways to provide these links. The three most common ones are:

1. Clicking on a word, phrase or sentence.
2. Clicking on a button.
3. Clicking on an image.

Links Within a Page - Page Jump

With Page Jumps, you have the option of jumping to different sections or topics without having to search through the entire web page for the topic. 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.

Here is the basic link command that points to another section on your web page.

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

Where "linkname" is the name of the section you are jumping or linking to. 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

This is the actual command I used for this:

<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".

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 and the "linkname" (#top) appears on the status line at the bottom of the browser.
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.

Linking to Aother Page in your Website

My main home page is the web page that contains links to all these lessons and other resources. If you want to study a particular topic then you can go to my home page and choose the needed topic. Each lesson in this course is also a web page, but it is not my home page. All my web pages taken together make up my website.

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, my website home page was named default.htm, you could have:

<A HREF="http://workathomedesk.com/default.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.

Now, lets suppose that your file named "makinglinks.htm" is saved in folder named "html", which in turn in saved in folder "LearnWebdesigning" and which is saved in th root folder of your web hosting space. then the link for the web page will be...

<A href="http://your website name.com/learnwebdesigning/html/makinglinks.htm"></A>

Linking to Another Page Anywhere in the World

It's really very simple. We'll make a link to MSN. Start with this...

<body>
Go to MSN!
</body>

Then add a pair of anchor tags.

<body>
Go to <a>MSN !</a>
</body>

Add the URL and you're done! URL stands for Uniform Resource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that a lot. A URL is just an address on the web. You specify it like so: href="url". And since MSN's URL is http://www.msn.com/ our link ends up like so...

<body>
Go to <A href="http://www.msn.com/">MSN!</a>
</body>

Using a Link Button

Link buttons - allows you to link to main home page or any other page of your web site. Buttons are neat and professional looking. Here is an example of a link using a button

Here are the HTML statements that give this button:

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

There are two main command lines here. The first one is called the FORM command and the second one is called the INPUT command. 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. We will learn about forms in a later lesson.
The FORM command has two attributes - METHOD and ACTION.

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.
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.

The second command line is the INPUT command and it generates the button. 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. The VALUE attribute gives the wording that will appear on the button.

Only the value of the ACTION and VALUE attributes require quotation marks. Quotation marks for the METHOD and TYPE values are optional.