HTML Links

Introduction

Web links appear to be one of the strongest features of the Internet. They provide the user with the ability to jump from one web page to another, almost like flying from a library in Johannesburg to a statistics department in Helsinki in 2 seconds.

To link to another page or site, you open with the <a> tag, you specify the attributes, then you close with the </a> tag.

Linking To Another Section On The Same Page
To direct the user to another or a particular section on the same page, first create the starting point where you want the link to land, this is called a bookmark. for example, let's say you want to link the user to be able to jump from another section of this page to the Introduction above. To provide that capability, first create a bookmark on the line that has Introduction. To do that, you use the <a name> tag, like this: <a name="intro">Introduction</a>. The name intro here is arbitrary, this means you can choose any name you want. If you are going to use a lot of bookmarks on the same page, remember to keep track of their different names. In this case, you should make a list of these bookmarks and note where they are pointing. Once you have created a bookmark, locate where you want the link to point, and provide a way for the user to click, this could be a word or graphic, like this: <a href="#intro">Return to the Introduction</a>. To illustrate this, we will see an example later.
Take a look at a page with a few bookmarks.

Linking To A Section On Another Page
In the same way, you can link to a particular section of another one of your web pages. First, create a name in the section where you want the link to target. For example: <a name="middlepage"></a>. Then, from the linking section, provide the user with a link point; this time, your attribute will be more specific, giving the web page and the section. For example: <a href="mypage.htm#intro">Read my Introduction</a> would point to the Introduction section of the mypage.htm file.

Linking To A Local Page
To link to another page on the same site, you use the href attribute and give its file name. If the file is in the same directory with the current file, you will simply give its name.
Here is an example: <a href="introduction.html">Introduction to HTML</a>
Sometimes the desired file is in another directory of folder. To link to that file, you will tell the browser where that file is located.
Here is an example: <a href="mcse/ntserver.htm">MCSE Windows NT Server</a>

Linking To Another Web Site
To link to another web site, you need to know its URL. The Universal Resource Locator is the location of the indented file.
Here is an example:
<a href="http://www.aics.edu">American Institute For Computer Sciences</a>
You can also link to a particular page in another web site, as long as you know that files name. Here is an example:
<a href="http://msdn.microsoft.com/visualc">Microsoft Visual C++</a>

Graphics Links
The links we have mentioned so far, as an introduction, had a lot to do with words. Instead of characters, you can use a graphic or picture that the user would click on to jump to the intended target. Once you have an appropriate image, insert it on the page and surround it with the <a> and the </a> tags.
Here is an example: <a href="http://www.dukaneinc.com"><img src="dlc.jpg"></a>.
There are few more attributes you can use to control the appearance of the image. For example, if you don't want the graphics to have a border around it, use the border attribute to cancel it: <a href="http://www.dukaneinc.com" border="0"><img src="dlc.jpg"></a>.

 

Practical Learning: HTML Links

  1. Start your text editor.

  2. In your text editor, type:

    <html>
    <head>
    <title>Shoppers Characteristics</title>
    </head>
    <body>

    <center><h2>Shoppers</h2></center>
    <font color="blue">
    <p>People who shop usually fall in three differentcategories: fast shoppers, wanderers, and slow ones.</p><p>Fast shoppers are characterized by their knowledge of the products they want and their fast decision-making habits. Once they get in the store, they lead to the right shelves, make their choices on specific products and head to the cashier.</p>
    </font>

    </body>
    </html>
  3. To save the file, on the main menu of your text editor, click File -> Save As…
  4. On the Save As dialog box, click the arrow of the Save In combo box and select the (C:) drive.
  5. Still on the Save As dialog box, click Create New Folder button.
  6. Type projects and click OK.
  7. Double-click the new folder, projects, to display it in the Save In combo box.
  8. In the Save As Type combo box, select All Files (*).
  9. In the File Name box, type shoppers.htm and click Save
  10. Back in your text editor, right-click inside of your text editor and click Select All.
  11. Type the following:
    <html>
    <head>
    <title>Weighted Graph</title>
    </head>
    <body>

    <center><u><h2>Weighted Graph: An Overview</h2></u></center>

    <font color="blue">
    <p>Weighted graph: When constructing a graph to illustrate connections between 2 points, a line is used to demonstrate the connection. If these connections are numerous, or as the graph construction grows, there are many lines on the graph.</p>

    <p>In order to identify each line, which is each connection, a number is given to each line or connection. This number is called a weight. A weighted graph is therefore a graph where each connection, called an edge, between two points is given a number.</p>
    </font>

    </body>
    </html>
  12. On the main menu of your text editor, click File -> Save As…

  13. In the Save In combo box, display the projects folder.

  14. On the toolbar of the Save As dialog box, click the Create New Folder button.

  15. Type math and click OK.

  16. Double-click the new math folder to display it in the Save In combo box.

  17. Make sure the Save As Type combo box displays All Files (*). In the File Name box, type wgraph.htm and click Save.

  18. Again in your text editor, type:

    <html>
    <head>
    <title>Valuable Resources</title>
    </head>
    <body>

    <center><font color="blue"><h1>Web Resources</h1></font></center>
    <p><font color="red" size=5>Personal Stuff</font></p>

    Shoppers<br>Weighted Graph: A homework<br>

    <p><font color="red" size=5>Summer Camps</font></p>
    Grier Summer Camp<br>

    <p><font color="red" size=5>Browsers</font></p>
    Microsoft Internet Explorer<br>
    Netscape Navigator<br>

    <p><font color="red" size=5>Programming:</font></p>
    Microsoft Visual Studio<br>Microsoft Developer Network<br>Borland C++ Builder<br>

    <p><font color="red" size=5>Office Suites</font></p>
    Corel WordPerfect<br>Microsoft Office<br>Lotus SmartSuite<br>Sun StarOffice<br>

    <p><font color="red" size=5>Programming Tutorials</font></p>
    C++ - FunctionX<br>Codeguru<br>Visual C++<br>

    <p><font color="red" size=5>Book Stores</font></p>
    Provantage<br>
    Amazon<br>
    Borders<br>Barnes And Nobles<br>
    SAMS<br>

    <p><font color="red" size=5>Free E-Mail</font></p>
    Hotmail<br>Yahoo<br>USA.net<br>
    EMail City<br>

    <p><font color="red" size=5>Free Web Hosting</font></p>
    Tripod<br>
    Fortunecity<br>
    Angelfire<br>
    Xoom<br>
    <p><font color="red" size=5>Auctions</font></p>
    AuctionMax<br>SurplusAuctions<br>

    </body>
    </html>
  19. Save the file as webresources.htm in the C:\projects folder.

  20. To link to a local file, make the following changes:

    <p><font color="red" size=5>Reflections</font></p>
    <a href="shoppers.htm">Shoppers</a><br>
  21. Save the File. Preview it in the browser. Notice that the line with Shoppers is underlined and displays in a different color.

  22. In the browser, position the mouse on Shoppers. Notice the mouse pointer with the closed fist and a pointing finger: this is an indication that the word (or sometimes the group of words) has a link.

  23. Click Shoppers and make sure that it opens the Shoppers Characteristics HTML file.

  24. Bring your text editor back. To link to a file on another folder inside of the current parent folder, make the following change:

    <a href="math/wgraph.htm">Weighted Graph</a>: A homework<br>
  25. Save the file.

  26. On the Taskbar, click the Internet Explorer button to bring back the browser.

  27. On the toolbar of the browser, click the Back(1) button to return to our last file. Notice that Weighted Graph also indicates a link.

  28. Click Weighted Graph to jump to its file. Notice the displaying address in the Address bar.

  29. To link to a file on another root folder, make the following change:

    <a href="../gsc/home.htm">Grier Summer Camp</a><br>
  30. Save the file.

  31. Bring back Internet Explorer and click the Back button.

  32. Click Grier Summer Camp. Notice that, as the address indicates, it opens the home.htm file in the C:\gsc folder.

  33. Bring back your text editor. Now we will link to various sections of the file. We will allow the user to jump to the list of office suites or to the list of free web hosting sites. We will also, simply for demonstration purposes, provide a link to a section on another page.
    In your text editor, to create a bookmark, make the following change:

    <a name="top"><center><font color="blue"><h1>Web Resources</h1></font></center></a>
  34. Also make the following change that will be used to link to the office suite section:

    <a name="ofsuites"><p><font color="red" size=5>Office Suites</font></p></a>
  35. Again make the following change:

    <a name="webhost"><p><font color="red" size=5>Free Web Hosting</font></p></a>

  36. Here is one more change. Simply type Top of page just before the </body> tag, like this:

    Top of page</body>

  37. Now the link the user will click on, make the following changes:
     

    <a name="top"><center><font color="blue"><h1>Web Resources</h1></font></center></a><a href="#ofsuites">Office Suites</a> or <a href="#webhost">Free Web Hosting</a>
  38. Also, make the following change:

    <a href="#top">Top of page</a>

  39. Save the file and preview it in the browser.

  40. Test the link and makes sure they point to the appropriate sections

  41. Bring back your text editor.

  42. To link a section on another file, in your text editor, open the wgrph.htm file created earlier.

  43. At the end of that make the following changes:

    <a href="../webresources.htm#ofsuites">Office Suites</a></body>

  44. Save the file and open it in the browser.

  45. Click the Office Suites link. Notice that it doesn't just open the webresources.htm file, it jumps straight to a particular section.

  46. Bring back your text editor.

  47. Now we will see how to link to a page(2) on the Internet. To provide a link to a site on the internet, you need to know the address of that site. To see a few examples, in the Programming and the Office Suites sections, make the following changes:

    <a href="http://msdn.microsoft.com">Microsoft Developer Network</a><br>
    <a href="http://www.corel.com">Corel WordPerfect</a><br>

  48. A link can also consist of a (sometimes very) long address. As an example, make the following changes:

    <a href="http://www.microsoft.com/windows/ie/default.htm">Microsoft Internet Explorer</a><br><a href="http://home.netscape.com/computing/download/index.html?cp=hop10hb2">Netscape Navigator</a><br>

  49. Save the file and preview it in the browser. If you have an Internet connection, test the links. Otherwise, skip it (this is not important for our tutorial).

  50. To use a graphic for a link, there are two main issues, here: the location of the graphics you are trying to use and how the link will display.
    To see an example, make the following change:

    <a href="http://www.microsoft.com/windows/ie/default.htm"><img src="msn_ie5.gif" border=0></a><br>

  51. Also change the Office Section as follows:

    <a name="ofsuites"><p><font color="red" size=5>Office Suites</font></p></a><a href="http://www.corel.com"><img src="corel.gif" border=0></a><br><a href="http://www.microsoftoffice.com"><img src="O2Klogo.gif" border=0></a><br><a href="http://www.lotus.com/home.nsf/welcome/smartsuite"><img src="wtspssy.gif" border=0></a><br><a href="http://www.sun.com/staroffice"><img src="starofflogo-web.gif" border=0></a><br>

  52. You can also provide links in the form of a list with each item of the list representing a link; of course, you can combine more than one link for each bullet or each numbered item.
    To see an example, make the following changes to the Book Stores section:

    <p><font color="red" size=5>Book Stores</font></p><ul> <li><a href="http://www.provantage.com">Provantage</a></li> <li><a href="http://www.amazon.com">Amazon</a></li> <li><a href="http://www.borders.com">Borders</a></li> <li><a href="http://www.bn.com">Barnes And Nobles</a></li> <li><a href="http://www.mcp.com/sams">SAMS</a></li></ul>

  53. You have probably realized that the regular text and the text of the links are displaying differently. The browser tries to keep the links distinct by using a set of colors in at least two categories.
    When you create a link and before a jumps to it, the browser behaves like "I sense this is a link but I have never been to that link". So the browser displays the characters of that link with a certain color. If the user clicks that links, the browser keeps track that it has visited that link(3) before. When a word (or a group of words) serves (or serve) as a link, it is (they are) called a link. When the link has been accessed, it is called a visited link. There are two other options, one of which will be visited when learning about Cascading Style Sheets and/or JavaScript. When a linking is being accessed, it is called an active link. As we have already seen that the browser follows a preset list of colors to display them, we will now see how to change them.
    As long as you are in HTML, you should change the color of your links in the <body> tag by specifying the appropriate color attributes. The attribute that controls the link's color is called link; and you would set its color as link="Color Name" or link="#ColorCode". The attribute that controls the color of the active link is called alink. The attribute that controls the visited link is called vlink.
    To see how these attributes are set, make the following changes to the <body> tag:

    <body link="#3399ff" vlink="#008000" alink="#ff00ff">

  54. Save the file and preview it in the browser. Notice how different links display different colors

 

Previous Copyright © 2000-2007 FunctionX, Inc. Next