Linking WEBPAGES is fun!  It happens in all the websites- you click to a LINK and you get transported to an altogether different page or a website.

There is nothing COMPLEX about it and all it takes to do this is just ONE  command - the Hyper Reference Command <A HREF= Location/File Name> </A> command where "Location"  is the location of the Webpage while "File Name" is the name of the destination file to which a link has to be made.
 

To use the <A HREF= Location/File Name> </A> command to link one webpage to other webpages -  we will have to first create other webpages. Now looking at menu bar of "GYAN" below  - the menu bar on the left points to webpages on Project Details, Case Studies, Upcoming Events and Home Page. Home Page is nothing but the Same Page itself, i.e "newgyan.html".

Let us construct some arbitary HTML files/webpages to depict Project Details, Case Studies and Upcoming Events. We give them the file names- projects.html, cases.html and events.html   Ideally all these files too should contain the same Menu Bar on the Left so that all these files could be accessed from any file.

These three arbitary files are as follows:

projects.html   File
 

PROJECT DETAILS

Project Details  Case Studies  Upcoming Events  Home

This webpage contains the details of ongoing projects of "GYAN".

cases.html    File
 

CASE STUDIES

Project Details  Case Studies  Upcoming Events  Home

This webpage contains Case Studies based on the experiences of "GYAN".

events.html File
 

EVENTS

Project Details  Case Studies  Upcoming Events  Home

This webpage contains listing of Upcoming Events in "GYAN".

Our aim is now to use the <A HREF= Location/File Name> </A> command to link all these four webpages- newgyan.html, projects.html, cases.html and events.html file together.

Let us first assume that all these four files are in Same directory called "techknow" in your hard drive (C:). We will now open the HTML code of the file "newgyan.html" and come to the portion where the words "Project Details" is written within the Menu Bar. "Project Details" word is now to be linked to the file "projects.html", so that on clicking "Project Details" on the menu bar of "newgyan.html", the webpage which appears is "projects.html".

The HTML code to be inserted on either side of the words "Project Details" is :
<A HREF=projects.html>Project Details< /A>

What we have done is replace the "File Name" variable in  <A HREF= Location/File Name> </A> command with the actual name of the webpage to be linked.  In this case, we did not have to specify the location of destination webpage because it was in the same directory of "techknow" and the command, by default, assumes the destination file to be in the same directory.

Let us similarly link the words "Case Studies", "Upcoming Events" and "Home" in the "newgyan.html" file with the webapges "cases.html", "events.html" and "newgyan.html".

The HTML format of the file "newgyan.html" would be as follows :
 
 

<TABLE BORDER=1 WIDTH=700 BGCOLOR=RED> <TR> <TD>< CENTER>< B>< FONT SIZE =4>GYAN< /FONT>< /B>< /CENTER> </TD> </TR> </TABLE> <TABLE BORDER=1 WIDTH=700> <TR> <TD BGCOLOR= YELLOW WIDTH=200>< B> <A HREF=projects.html>Project Details< /A>        ------- linking "Project Details" to the file "projects.html" <A HREF=cases.html>Case Studies< /A>            ------- linking "Case Studies" to the file "cases.html" <A HREF=events.html>Upcoming Events< /A>  ------- linking "Upcoming Events" to the file "events.html" <A HREF=newgyan.html>Home< /A>                ------- self linking "Home" to the same file "projects.html" </B> </TD> <TD BGCOLOR=green WIDTH=500> <B>< /B> </TD> </TR> </TABLE>

Now if you view the file "newgyan.html" in a web browser, you will find that the Menu Bar on the left is now underlined. This is because these Menu Items are now Hyper Linked to some other webpages.

Put your mouse pointer over "Project Details" and double click it. The "newgyan.html" should now stand replaced by the file "projects.html". (Use the Back Button of yor Browser to return to "newgyan.html" webpage).

Similarly all the other Hyperlinked menu items should be linked to their respective webpages. Clicking on the "Home" however should however just reload the same webpage as it has been hyperlinked to the self webpage of "newgyan.html".

Your "newgyan.html" file should work in the same way, the following Hyperlinked file of "newgyan.html" works:
 

GYAN

Project Details Case Studies Upcoming Events Home

Now try hyperlinking the items in Menu Bars of the files "projects.html", "cases.html" and "events.html" so that each file gets connected to the other and one can reach any file from anywhere. For example: the HTML format of "projects.html" file would be as follows:
 

<TABLE BORDER=1 WIDTH=700 BGCOLOR=red> <TR> <TD> <CENTER><B><FONT SIZE =4>PROJECT DETAILS< /FONT>< /B>< /CENTER>  </TD> </TR> </TABLE> <TABLE BORDER=1 WIDTH=700> <TR> <TD BGCOLOR=yellow WIDTH=200> < B> <A HREF=projects.html>Project Details</A> ---self linking "Project Details" to the same file "projects.html" <A HREF=cases.html>Case Studies< /A>  ------- linking "Case Studies" to the file "cases.html" <A HREF=events.html>Upcoming Events< /A> ------- linking "Upcoming Events" to the file "events.html" <A HREF=newgyan.html>Home< /A>       ------- linking "Home" to the file "newgyan.html" </B> </TD> <TD BGCOLOR=green WIDTH=500> <B>This webpage contains the details of ongoing projects of "GYAN". < /B> </TD> < /TR> < /TABLE>

Did you come across any problem on linking these files together? If No, then there is very little I can teach you NOW!

If Yes, then nothing to worry, just shoot us an email at knownet@knownetweaver.org and we would be glad to help you. A bit of practice is all you need and you can build all those websites you once envied!

At this moment, I must also tell you on how to link a webpage to another website. Let us say you want to insert a statement at the bottom of the webpage of "newgyan.html" which states "This webpage has been created with the help of TECHKNOW." And then you want to HyperLink the word "TECHKNOW" so that on double clicking it, it links to the webpage of "TECHKNOW" at http://www.techknownet.org Doing this is very easy and we use the same Hyper Reference command again. The HTML format for doing so is :

This webpage has been created with the help of < A HREF="http://www.techknownet.org">TECHKNOW< /A>. So all we have practically done is use the website address of TECHKNOW, i.e http://www.techknownet.org as the name and location of the Destination File. Now if you click on "TECHKNOW" in "newgyan.html" file, then you should be transported to the website of "TECHKNOW" provided you are connected to the internet. See the working link below on how it should work on your computer if it is connected to internet.

This webpage has been created with the help of TECHKNOW.

Before we come to the end of MODULE THREE, I will teach you how to link webpages which are not in the same directory. In such cases we have to not only mention the name of the webpage but also its location with reference to the file from which it is being hyper linked.

Let us create three sub-directories within the directory in which all your four files are kept and name them as "projects", "cases" and "events". Move the file "projects.html" into the subdirectory "projects". Move the file "cases.html" into the subdirectory "cases". Move the file "events.html" into the subdirectory "events". The file "newgyan.html" continues to remain in the same position. After doing so, if you view the file "newgyan.html" in a web browser and double click on the hyperlinked menu items - you will find none of them to be working except for the "Home" menu. This is because the all the Hyper Referenced files have now been moved to different subdirectories.

Let us compare the OLD and NEW file locatios.

File Name	Old Location	New Location
newgyan.html	c:\techknow\newgyan.html	c:\techknow\newgyan.html
projects.html	c:\techknow\projects.html	c:\techknow\projects\projects.html
cases.html	c:\techknow\cases.html	c:\techknow\cases\cases.html
events.html	c:\techknow\events.html	c:\techknow\events\events.html

To get the hyper referenced links to be working in the "newgyan.html" file once again we will have to point all the <A HREF = Destination Webpage> </A> commands to the new file location. Open the file "newgyan.html" and change the Hyper Reference command for menu item "Project Details" from <A HREF=projects.html>Project Details</A> to <A HREF=projects/projects.html>Project Details< /A>.

The change has been made because to reach the file "projects.html" from "newgyan.html, we will have to first enter the subdirectory "projects" and then only we can find the file "projects.html". This explains the change from <A HREF=projects.html>Project Details</A> to <A HREF=projects/projects.html>Project Details< /A>.

Similarly there will be other changes in hyper referenced commands in "newgyan.html" file from <A HREF=cases.html>Case Studies</A> to <A HREF=cases/cases.html>Case Studies< /A>, and from <A HREF=events.html>Events</A> to <A HREF=events/events.html>Events</A>.

After making these changes, if you save the "newgyan.html" file- you will find the hyper references from it to other webpages to be working again. Nevertheless, the hyper references from other files, say "projects.html" etc. would still not be working. This is because we have not modified the hyperlinks from these files.

Let us make all the hyper references from the file "projects.html" to be working once again. We first change the Hyper Reference <A HREF=cases.html>Case Studies</A> in "projects.html" to <A HREF=../cases/cases.html>Case Studies</A>. Don't get worried seeing the ".....", just visualise. Visualise how to travel to the file "cases.html" from the file "projects.html" under the NEW directory structure. It is simple. All you have to do is start from "projects.html", go back one directory from "projects" to the directory "Techknow" and then move ahead to the subdirectory of "cases" to reach the file "cases.htm". This same step in HTML is depicted by "../cases/cases.html". Two dots (..) indicate going back one directory from the directory of "projects" (i.e landing up at the directory of "techknow") and /cases/cases.html indicate entering the directory "cases" in "Techknow" and then reaching out to the file "cases.html"

The point to learn is that we indicate going back one step from a subdirectory to directory by two dots (..) and indicate going forward from a directory to the subdirectory by mentioning the name of the subdirectory.

On applying this rule to the file "projects.html", the new HTML format for the same file would be :
 
 

<TABLE BORDER=1 WIDTH=700 BGCOLOR=red> <TR> <TD> <CENTER>< B>< FONT SIZE =4>PROJECT DETAILS< /FONT>< /B>< /CENTER> </TD> </TR> </TABLE> <TABLE BORDER=1 WIDTH=700> <TR> <TD BGCOLOR=yellow WIDTH=200> < B> <A HREF=projects.html>Project Details< /A>  --- self linking "Project Details" with same file "projects.html" <A HREF=../cases/cases.html>Case Studies< /A>  --- linking "Case Studies" with file "cases.html" in the folder CASES. <A HREF=../events/events.html>Upcoming Events< /A>   --- linking "Events" with file "cases.html" in the folder EVENTS. <A HREF=../newgyan.html>Home< /A>     --- linking "Home" with file "newgyan.htm" in the root folder TECHKNOW. </B> </TD> <TD BGCOLOR=green WIDTH=500> <B>This webpage contains the details of ongoing projects of "GYAN". < /B> </TD> </TR> </TABLE>

Now change the hyper references in the remaining files- "cases.html" and "events.html". On doing so, you will find all the hyper links to be working once again. As always, shoot us an email at knownet@knownetweaver.org if have any problem or clarification to make and we would be glad to help you.

Go back to Module 3
Go back to Module 2
Go back to Module 1