Lesson 1.7

Using Hyperlinks

The anchor <A> tag is used to identify the text or image that will serve as the hyperlink in the HTML document. The HREF (hypertext reference) parameter is used to specify the address or URL or the document or file that is to be linked.

The syntax of HREF is:

<A HREF = protocol: // host.domain:port/path/filename>Hypertext</A>

Where,

Protocol – This is the protocol type. Some of the most commonly used to protocols are:

Ø  http – Hypertext Transfer Protocol

Ø  telnet – open a telnet session

Ø  gopher – search for a file

Ø  Ftp – file transfer protocol.

Ø  mailto – sending e-mail

Host. Domain –This is the Internet address of the serve

Port –This is the port number of the destination serve

Hypertext –This is the text or image that the user must click to activate the link

Linking to other documents

Suppose there are two HTML documents on the local hard click, Doc1.html and Doc2.html.To create a link from Doc1.html to Doc2.html:

                                         Figure 1.10: Output of Example 6

Once the user is able to “jump” to another document, you can provide a way to return to the home page, or navigate to another file.

                                                          

Figure 1.11: Output of Example 7

Note that the links are underlined. The browser automatically underlines the links for the user. The browser also changes the cursor when the user moves the mouse over the link.

In the above example, the files were in the same directory and so specifying the name of the   file in the HREF parameter sufficed.    However, link to files in other directories can also be provided. Absolute or relative pathnames needs to be specified.

Absolute   pathnames specify the complete path to the file from the root directory. For example, C: /mydirectory\html examples\Doc2.html.

Relative pathnames specify the location of the file relative to the location of the current file. For example, if the current directory is mydirectory, then the pathname will be,

<A HREF= “. . . \Doc3.html”>Next page</A>

Therefore, if we want to link documents that have no relation with each other than the absolute pathnames would serve the purpose. However, if we have a group of documents that are related to each other, say a tutorial on HTML then we can use relative pathnames for the documents in the group and absolute pathnames for documents that are not directly related to the topic. The users can install the tutorial in a directory of their choice and it would still work.

Linking to sections of the same document

The anchor tag is used to let the user “jump” to different section of the document. For example, you can display the contents of the web page as a series of links. When the user clicks on a particular topic, the details placed in another section of the document are displayed.

This kind of anchor is called a named anchor because   the NAME attribute is used to create the links.

<A NAME = “marker”>Topic name </A>

You do not have to use any text to visibly mark the anchor point

To affect the transfer, use the marker in the HREF parameter.

<A HREF = “#marker”>Topic name</A>

The #  that  is  displayed  before the name of  the  hyperlink  tells  the  browser  that  the  link is  a  named  point  in a  document. Since  no  document  is specified  before  the   # symbol, it  tells   the  browser that  the  link  is  within the same document.

Figure 1.12: Output of Example 8 and  Figure 1.13: Output of  Example 8 after clicking on Internet

Linking to a specific  point in another  document

Now  that we  know how  to use  markers  within  the  same document, let us  try "jumping" to 8

specific  point  ion another  document.

To  "jumple" to  a   specific point  another  document, we  have  to specify the  name  of the  name of  the  document  when we create  the marker. The  browser will first  read the  document  name and  open that document. it will then  read  the  marker and  move to the  specified point

Figure  1.15: Output  of  Example  9  after clicking  on  Internet

Note  the similarity  between  Figure 1.15:,

Using e-mail

If we want  users  to  send  an  e-mail, we can  include  a feature  within  the  Web page  that allows

them  to  send  the  e-mail  from  the  browser, All  we  have  to  do  is  insert the  mailto  value in  the  link  tag.

<A HREF = “mailto: thisperson@mymail.com”>