Introducing the Hyperlink.Technically referred to as an Anchor, Hyperlink tags start with <A> and finish with an end tag </A>. Hyperlinks connect all of your webpages in order to help users navigate your pages and can either be in Text form or as an Image. they can also call Files such as Sound Files or Acrobat Reader Files that are then downloaded or played by Browser plug-ins or applications. Hyperlinks can also launch a mail program like Netscape Communicator which automatically embeds and E mail address in the Send To: box. Hyperlinks can link to other websites or jump you from one section of a website or webpage to a specific part of the same page or a different page. When we think of surfing the net we are in fact using Hyperlinks to get us from one location to another. When declaring a hyperlink it is important to distinguish between a relative path and an absolute path. Linking from one webpage to another webpage in your Website folder is accomplished by defining the relative path. That is since it is in the same folder it will simply look in that folder for the page you specify. When linking to another website you need to declare an absolute path in that you must point first out to the web and then to a specific web URL or webpage contained withing that website. First lets set a hyperlink to another website. The World Wide Web Consortium is the organization that defines all HTML code and what is considered to be standard. Currently version 4.0 is standard in new browsers. Old browsers may only support HTML 3.2. The W3C as they are known have a website located at http://www.w3.org/. If you simply type this into your document it goes nowhere. You must create a hyperlink and define its absolute path. this is defined by typing <A HREF="http://www.w3.org/">Link to http://www.w3.org/ </A> If you type this into your document, save the changes and view it in a Browser the section that says Link to http://www.w3.org/ will display in whatever color you specified LINK to be in your BODY Tag. It also becomes a direct link to the W3C website where you can find all kinds of useful information regarding HTML. Click on the link to visit their website. You must be connected via the an Internet Connection in order to test a link to another website. Now if you use your back button and return to your test page you will notice the link has changed color. Once a page is visited it changes to the color specified in the VLINK Tag in your BODY Tag section. The color you specified in ALINK flashes briefly as you click the hyperlink. So thats what all that LINK, VLINK stuff was about in your BODY Tag section. I get it.Its coming round full circle now. You can also specify that the LINK, VLINK, and ALINK colors all be the same color if you don't want the color scheme or design of your pages to vary just because someone uses your link.The changing colors do make it useful though for visitors to see where they've been in very large websites. So the next step is to Link to another webpage in your Website Folder so first we need to create a new HTML document. So lets go back to your HTML editor of choice and Create a new document with the appropriate Tags. Then somewhere in the Body of the page Write something Like Page 2 so we know when we get to the page that its not just a blank document. <HTML> <HEAD> <TITLE>Title of Page 2 </TITLE> </HEAD> <BODY> Page 2 </BODY> <HTML> You can also get more adventurous with your code and assign all the BODY Tags and add more text or images to this page. Then save the page and give it a name. For our example I will name this document- Page2.html and save it in your Website Folder but remember in reality you should name it something descriptive like links.html or AboutUs.html or Products.html so that it means something to anybody who cares. Then reopen this new document and somewhere in the body we are going to create a navigational link back to our index.html page. The code should be as follows <A HREF="index.html">Link back to Index</A> save your changes and view your page in a browser and the Link back to Index should appear in blue. Click on it and you should end up in your index.html webpage. Now open up your index.html page and create a link back to whatever you called page 2 in my case the code would be <A HREF="Page2.html">Link back to Page 2</A> You should have now successfully connected two webpages. Remember if this doesn't work for you it's probably that you miss spelled a word or forgot a quotation mark or the 2 documents are not in the same Website Folder or something silly like that. So now a word about good navigation. Every subpage in a website should have navigational hyperlinks to at least all of the major subpages. Visitors to a website do not always land on your first page. They might enter your site through a subpage and it should be obvious to them on how to get to the start page so they don't get frustrated by being stuck on a page with no where to go. Navigational tools should in theory be in the same area of every webpage so visitors automatically know where to go to find more pages. They can exist on the side, at the top or at the bottom but make them consistent and make them easy to use. The next Anchor tag is the one that is used to launch a Mail Program. <A HREF="mailto:username@isp.com">username@isp.com</A> this Tag launches a mail program if one is available to the browser. Remember though not all browsers have mail programs so somewhere on your page you should also include your actual E mail address. So if they cant press a button to launch an Email back to you they can at least open their mail program and type it in manually. Example:E mail dkr@maineinfo.net Many sites make the mistake of using a button only and never give you their actual address in text form. The final <A> Tag is the true anchor tag. This Tag Anchors a link at any specified point that is given a Name. For example. Lets say we want a link that goes back to the top of this document. All I have to do is put a link to a point that was named previously. So at the top of my webpage I named an Anchor called <A Name="top"></A> it is the first peice of code after the BODY Tags on this document then we write some Tags somewhere on our page <A HREF="#top">Go Back to Top</A> which results in a hot link which sends me back to the top of the document. You're page must already have enough text on it so that you have a top to return too. Go Back to Top You can also send an anchor back across any document where you can name a point. For instance on a previous page I prenamed a point which I named Anchor with the following code <A name="Anchor"></A> then I name a link from this page to the Named Anchor which is located where it starts to talk about freeware, shareware,payware and download sites. The link back to this point is <A HREF="Page2.html#Anchor">Go to Anchor</A> resulting in the hotlink below Go to Anchor to get you there. That is about the full gamut for Anchors and of course theres all sorts of cool things you can do with these links. Such as Turning an Image into a link which is very useful for making buttons or clickable thumbnail images that launch detailed larger images or launch sound files which you can then play or download to your hard drive and play with the appropriate utility. |