Basics of Linking

The entire web is built on the concept of linking, i.e., you build documents that link to my site and I build documents that link to your site. This tutorial will describe the various methods of creating links that make all this jumping around the web possible.

A document without hypertext links is probably not very useful by itself. Links provide navigation so your site visitors can jump around your site from one document to another. Partitioning your information into small chunks and then linking the chunks together is the generally accepted method to deliver information, much like a table of contents will segment a large topic into smaller topics or sub-topics. Think, then, of your website home page as the table of contents on which can be found links to other topics or sub-topics. For instance, imagine that your main page was about camping. The sub-topics that you might choose might then be: backpacks, campgrounds, camping equipment, hiking, camp recipes, sleeping bags, and tents. In addition to the sub-topic pages you might also want to include a page for your personal contact information, a page devoted to describing some details about yourself or your company, and maybe a page for describing the general services you can provide to others. Our home page, then, would consist of a general overview of the topics and a navigation system which will allow our site visitors to jump to all the different sections or sub-topics.

In order to create a link, an HTML tag has been provided for hypertext linking. This HTML tag is called the Anchor tag, and the general format of the Anchor tag is:

<a href="secondpage.html">this is the text that will be underlined</a>

This tag looks more complicated because it is carrying an attribute (href) for specifying the target document that the browser should load. Attributes have a tendency to make the HTML complex looking, but it is still just an Anchor that has an opening and closing tag. Attributes will be covered more in a separate tutorial.

When a browser displays a page of HTML with a link such as the one above, it will recognize that the text between the starting anchor tag and the ending anchor tag is to be underlined, and, if the link is clicked by the mouse, the location in the href should be fetched and loaded into the browser.

Here are some other forms of the Anchor tag and what they mean to the browser:

<a href="index.html">Home Page</a> : When the user clicks the Home Page link, the browser is to load the index.html document on the same webserver and in the same folder as the current document that the browser is displaying.

<a href="http://www.orangetreeweb.com/index.html">Orange Tree Home Page</a> : When the user clicks the Orange Tree Home Page link, the browser is to load the index.html page on the www.orangetreeweb.com webserver.

<a href="/tutorials/index.html" target="_blank">Tutorials</a> : When the user clicks the Tutorials link, the browser is to load the index.html file in the tutorials sub-directory and then display the document in a new browser window named "_blank".

<a href="http://www.orangetreeweb.com/tutorials/pagetwo.html">page two of Orange Tree</a> : When the user clicks the "page two of Orange Tree" link, the browser is to load the page (file) named "pagetwo.html" in the tutorials sub-folder on the orangetreeweb.com webserver.

It should be obvious that a web page can then link to any other web page and in any sub-directory on any web server in the world. In order to construct a proper link, you need only know the domain name, all sub-directory names, and file names of the resources to which you want to link ( Web servers help a little by defaulting to index.html or index.htm if you simply fully qualify the domain name such as http://www.orangetreeweb.com, which will default to http://www.orangetreeweb.com/index.html. Most webmasters have a default start page setup whenever someone references their domain name).

So, a link that you construct can link to a file on the same webserver, a link on a different webserver, or you can link to specific locations in a document. To setup different link locations in a document you'll have to use a different attribute on the anchor tag such as in the following:

<a name="location1"> <a name="location2"> <a name="location3">

Assuming these anchors have been added to the index.html file, you can construct a link that will tell the browser to load a specific file and jump directly to the named anchor:

<a href="index.html#location2">Jump to Location2 in the main page</a>

So far, we've assumed that our links are to HTML documents, but you can actually link to any resource type, including PDF, PPT, etc. A browser knows how to handle a file type on the user's PC because file types are registered when you install applications (of course you don't need to install an application for a browser to know how to handle the HTML file type because by default that is what a browser knows how to do). Here is an example link to an imaginary PDF file on the Orange Tree website:

<a href="http://www.orangetreeweb.com/test.pdf">Click this link to lauch the PDF viewer on your system</a>

Practice

Use the same document that you created to learn about unordered lists. In the HTML code select the text in one of the list items to be the anchor and surround it with the starting and ending anchor tags. Use any fully qualified URL to put in the href. A fully qualified URL would be a URL that starts with http://, such as http://www.orangetreeweb.com, http://www.microsoft.com, http://www.google.com, etc.

Comments?

Back To: How To Build A Website

Want to start a work-from-home business? Make it a Successful One!