Home Site Map Gallery Your Two Cents Service Order

               

Home HTML Basics Headlines Paragraphs Links Free Links Mail-to Bold Italic Font Color Font Size Background Image Graphics Background Color Aligning Text Aligning Images HTML -Adding Audio HTML - Frames HTML Tables Meta Tags Forms Mouse Over Mega Search Browser Support

Get Your Free E-Mail Account


Isn't it time you
updated your site?


WEB DEVELOPMENT
AID

 

 


LINKS

You use links to:

bullet

Jump from section to section or page to page (also called Page Jump)

bullet

Link to a different page within your own website

bullet

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:

bullet

Clicking on a word, phrase or sentence

bullet

Clicking on a button  to take you back to your home page or to another site.

bullet

Clicking on an image (that is, a picture or graphic) to take to a related page or site which the graphic portrays.

To offer a page jump, you need two items:

bullet

The command that points or sends the browser to another section on your web page.

bullet

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):

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

This is the actual command  used for this:


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

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

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

Note the following points with these two commands:

bullet

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

bullet

"#top" is called the URL which stands for Universal Resource Locator. A URL is the address or location of the link.

bullet

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

bullet

Every Anchor tag must have a closing or end tag (</A>) to signal the end of the anchor.

bullet

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

bullet

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.

bullet

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

bullet

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.

bullet

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.

bullet

There is no # symbol in the NAME attribute.

bullet

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.

bullet

The name you choose in the HREF attribute, must match the case in the NAME attribute.

bullet

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.

bullet

Anchors cannot be nested. You cannot have an anchor within an anchor.

bullet

Please note that the following two statements do exactly the same thing:

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

and

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

Both these statements will place "A  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  PARK" is contained between the anchor tags. Note also that a HEADER tag is not allowed between anchor tags, so if "A  PARK" uses a HEADER tag, then you must use the first statement.

 

 

 

Up ] HTML Basics ] Headlines ] Paragraphs ] [ Links ] Free Links ] Mail-to ] Bold Italic ] Font Color ] Font Size ] Background Image ] Graphics ] Background Color ] Aligning Text ] Aligning Images ] HTML -Adding Audio ] HTML - Frames ] HTML Tables ] Meta Tags ] Forms ] Mouse Over ] Mega Search ] Browser Support ]

Webdesign ] Banners and Graphics ] Promotional Services ] HTML Tutorials ] Consulting ] Hosting ] Domain Registration ] WIN PRIZES!! ]

BizRate Customer Certified (GOLD) Site We are members of the Chamber or Commerce!

Verify our security!
Verify Our Security

Better Business!

OVER 28 MULTIPLE 
AOL Members Choice Award
AWARD WINNING SITES

 


Webmaster-at-Large:     webmasteratlarge@planetwebdesign.com  

Planet T-Shirt Logo
®PLANETWeBDESIGN TECHNOLOGIESº© 

  PO Box 22157  Knoxville, Tennessee 37933-0157

Telephone:    865-300-3804      FAX:    865-692-9247

PlanetWebDesign LogoCopyright © 1998, 1999, 2000 PLANETWEBDESIGN TECHNOLOGIES, Inc. All rights reservedBye Bye!!