HTML Anchors & Links Tag

Before we go on to explain hyperlinks, let us try to differentiate linear and non-linear text.

Linear

As the name suggests relates to a straight line. So linear information is information that progresses in a straight line, beginning at point X and ending at point Y with a certain path in between. A linear text therefore develops its context from everything that has come before. Take the example of a Novel. One begins at a certain page and proceeds to the end, receiving the plot and characters in the order they were intended so that by the end everything makes sense. If one picks up pages randomly novel will be read but no real concept of the book will be obtained.

Non Linear

The concept of non-linear information is different. Instead of following a sequence, random selection can be made. Magazines and dictionaries are good examples of resources of non-linear information. One can randomly go through a particular article of a magazine or look up for a particular word in the dictionary, This form of reading is non-linear, as one does not have to read the intervening pages between the commencements of the magazine to the point where the article starts off.

A musical cassette tape is an example of linear information whereas a musical CD is that of a resource providing information in a non-linear format.

Hyperlink

The Worldwide web is an example of Non-linear system. In the world of hypertext information is chunked into small and manageable units called nodes. Links are embedded in these nodes so that one can move from one hypertext document to another. There are two categories of links.

• External links: These are links to files not on your own site.

• Internal links: These are links to files that are part of your site.

These links connecting different hypertext documents are called hyperlinks (hypertext links).

The process of navigating among the nodes by using their links is called browsing. A collection of nodes interconnected by hyperlinks is called a web which makes the www a global hypertext system. Without hyperlinks the web would be a bunch of separate and unrelated files instead of the coherent and interlocking whole. Hyperlinks are often used so that web sites can be broken into several different HTML pages, all of which are linked to each other.

Every hyperlink has two components: the source and the destination. For instance in the link denoted by <a href = ” http://www.yahoo.com/”> the destination of the link is the yahoo website. The source end of the link is the HTML document, which contains this code.

The browser distinguishes Hyperlinks from normal text. Every hyperlink,

• Appears blue in color

   • The default color setting in a browser for hyperlink text or image.

   • The color can be set dynamically via on HTML program if required.

• The hyperlink text/image is underlined.

• When the mouse cursor is placed over it, the standard arrow shaped mouse cursor changes to the shape of a hand.

The blue color, which appears by default, can be over-ridden. The following Table shows the text and link color attributes available in HTML.

Whenever colors are specified using hexadecimal numbers, it combines proportions of Red, Green and Blue – called RGB numbers. RGB numbers use six digits, two for each proportion of red, green and blue.

Uniform Resource Locator

URL, is a fancy name for address. Each file on the Internet has a unique URL.

The first part of the URL is called the protocol. It tells the browser how to deal with the file that it is about to open. One of the most common protocols you will see it HTTP, or Hypertext Transfer Protocol.

The second part of the URL is the name of the server where the file is located, followed by the path that leads to the file and the file’s name itself, as illustrated below:

http://www.site.com/fun/file.html 
protocol//Server Name/ Path/File Name 

Sometimes, a URL ends in a trailing forward slash with no file name given, as below.

"http://www.site.com/fun/" 

In this case the URL refers to the default file in the last directory in the path, which is a file named “index.html.” An equivalent URL to the one above would be

http://www.site.com/fun/index.html 

Absolute URLs

URLs can be either absolute or relative. An absolute URL shows the entire path to the file, including the protocol, server name, the complete path and the file name itself. An absolute URL is analogous to a complete street address; no matter where the letter is sent from, the post office will be able to find the recipient. In terms of URLs, this means that the location of the absolute URL itself has no bearing on the location of the actual file referenced. If you are from someone else’s server, you need to use an absolute URL. The URL’s above are all absolute.

Relative URLs

Relative URLs are analogous to giving directions to someone such as “go down the hall and turn right.” In other words, the directions refer to where you are starting from. In the same way a relative URL describes the location of the desired file with reference to the location of the file that contains the URL itself.

For example, a relative URL for a file that is in the same directory as the current file (that is, the one with the link that points to that file) is merely the name and extension, such as:  “index.html”

You create a URL for a file in a subdirectory of the current directory by placing the name of the subdirectory first and following it with a forward slash and then the name and extension of the desired file, as shown below.

Inside the current folder,”fun/file.html”,there is a folder that contains called “fun” a file named “file.html”.

To reference a file in a directory at a higher level of the file hierarchy, use two periods (.. ) as shown below.

The folder that contains the current folder contains “../images/image.gif” a folder …a file called “images” “image.gif” that contains …

You can combine and repeat the two periods and forward slash to reference any file on the same server as the current file.

The Anchor Element

Anchors elements are used to link multiple HTML documents. It requires only one tag viz., the <A> tag. It occurs only in the body of an HTML document. If an anchor is used to turn text into a hyperlink, the text is usually colored blue and underlined.

Syntax   
<A href =" " > Content </A> 

If you want to create a hyperlink   which will take the user to a different page href or hypertext reference is mandatory. For without it, the anchor will not function as a hyperlink.

Hyperlinks can be of two type:

(1) Links to an external document

(2) Links to a specified place within the same document.

External Document References

It links the source document to a specific external document

Example:  
< A href = "main.htm"> Home </ A> 

 Here “HOME” becomes a hyperlink and links to another document. “Main.htm” which is present in the current working directory. If the file is not present in the current directory a relative or absolute path can be specified.

By default a hyper link takes a user to the beginning of the new web page. At times it might be necessary to jump to a particular location within the new web page. To enable a jump to a specific location in a web page, Named Anchors can be set up.

Named Anchors

Named Anchors are used to create links to a specific location within a page Jumping to a particular location on a web page can be summarized in two steps.

Step 1 : Mark the location to be jumped to i.e. identify the location in a web page to jump to by giving the location a name.

The "Name" attribute of <A> tag does this   
Syntax 
<A Name = "Location-name" >   
Example:   
< A Name = "location 1"> 

This identifies to jump at location l

Step 2: While jumping to a specific web page and a specific location on the web page, in addition to the name of the web page to be jumped to, the name of the location on the web page to go to is required.

A web page will really be contained in an HTML file. Hence the web page to jump to really requires a filename. ·htm, together with the name of the location to jump to in the HTML file. This is done as follows;

Syntax 
  <A href = "file_name. Htm # location_name" > </A> 
   Example 

<A href= “Main.htm # location 1″ > Home </ A> Home becomes a hotspot and leads to a location named location 1” in the file “Main.htm”.

The following lines of code show the use of external links:

<html> 
<head><title>external links </title></head> 
<booy> 
<h2><p>discover more about dreamweaver 4 </p></h2> 
<a href="d:\code\lntro\dll.htm#one">what's new in dreamweaver 4 </a><br><br> 
<a href="d:\code\ol 1.htm#two">dreamweaver web site </a><br><br> 
<a href="d:\code\ol2. htm#three">dreamweaver exchange</a><br><br> 
<a href="d:\code\ol3.htm#four">release notes</a><br><br> 
</body> 
</html>