HTML Hyper Text Markup Language: HTML Hyper LinkingHTML HyperlinkingHyper linking: linking from one page to anotherHyperlinking, or Linking, is the ability to click on a bit of text or an image and have it jump you to another page, or area of a page. This requires both the Opening and the Closing Anchor Tag.Anchors also must have the HREF= (Hypertext Reference) attribute to work properly: But this tag is still incomplete and will do nothing until you give it a place to link to: HREF="http://www.HTMLclinic.com/example.html"> Now to give your visitor something to click on, put some text between the opening and closing tag, like this: HREF="http://www.HTMLclinic.com/example.html">HTML Help For All Now the tag is complete. Try it here: HTML Help For All
Page Linking TipsIf a page is not on your site put in the web address for the page, like this:HREF="http://www.examplesite.com/index.html">Example Site If the page is in the same folder use just the filename, like this: HREF="examplepage.html"> Click here If the page is in a different directory or folder reference that right before the page:
HREF="otherfoldernamehere/page2.html">Page
Two Linking to Downloadable FilesIf you want to make a file available for your visitors to download, use the anchor tag with the filename of the file you wish your visitors to grab:HREF="filename.here"> Click here to download the file
Name Anchors: links to areas on the same pageAnchors can also be used to jump to a specific spot on the same page. Lets\' say you have a page about pets, and at the top of this page you want to provide a link down to the area about your dog. Go to the area about your dog and put a Name Anchor around the title or first word of the \'dog\' portion:
NAME="dog">All
about my dog Fluffy:
Now go up to the top of the page where you want to put the link to the \'dog\' section. Here is the code for the link at the top of the page: HREF="#dog">Click for Fluffy the Dog Now when you click on the link on the top of your pets page, it will jump right down to the section about Fluffy! If you are linking to the Fluffy section from a different page you\'ll have to do this: HREF="animals.htm#dog">Click for Fluffy the Dog Mailto Anchor: making a link to an email addressIf you want the link to jump to sending mail to a specific e-mail address, you have to add "mailto:" to the anchor:HREF="mailto:support@htmlclinic.com">Email Me Now! Now when you click on this mailto link, it will open your email program and automatically address an email to whatever address you have defined in this tag. Try it here: Email Me Now! Image Anchor: hyperlinking to a graphic imageNOTE: If you have not yet read the section dealing with creating image tags you might want to review that tutorial before you begin this one.
Let\'s say we have a spiffy new graphic and we want to make it clickable so people can use it to go to another page. Here is the image code: Now we have to wrap the
Anchor code around it: If you want to put a
border around the picture (border="3"): If you want to
hyperlink from a small version of the image (known as a \'thumbnail\') to
a larger version, link the small file to the large one: |
