09 - HTML-Working with links

The HTML is hypertext language meaning its text contains links to other text.

A Link:

A link connects one web resource with another.

Usually, when we browse a web site, we are introduced with their home page, and then we can get the desired information by clicking on a relevant link. All the web pages of a particular site are connected using links .Using these links we can direct the user to another page or a specific part of a page. These links are known as Hyperlinks.

By clicking on words or images we can activate the links and navigate the user to a particular location or a web page. So, we can create hyperlinks using text or images that are available on our web page.

The concept of links is very simple. It is the driving force behind the success of World Wide Web.

To create a hyperlink we must know the destination to which the link should point to. The destination may be any web resource like another HTML document, an element of a HTML document, an image, a program etc.

The Anchor tag:

The anchor tag - <a> and </a> are used to define a link.

The destination of the link is specified using href attribute.

The source anchor is the location where we have specified the <a> tag and the destination is any resource specified in the href attribute.

The user can click on the content enclosed within <a> and </a> to link to the content specified in href. The content within <a> and </a> is called as Link text. It may not be text always, we can also include image or any other HTML element.

The Syntax for <a> tag:

      <a href =”URL of the web page you want to link to” > Text for the link</a>

 

URLs:

We can specify the URLs in three different ways. They are as follows,

Linking to other web sites:

     href=”https://www.google.co.in/”

Linking to other pages of your web site:

href=”foldername/html_page_in_that_folder”

If it is in a folder up the current folder use

href=”../htmlpage.html”

The two dots refer to one folder up the current folder.

Linking to a specific part in the same web page:

href=”#fragment_name”

An Example:

<html>
 <head>
  <title>
   Working with links
  </title>
 </head>
 <body>
   <p> We are learning how to create links in HTML</p>
   <a href="https://www.google.co.in/">Click on this to go to Google homepage</a>
 </body>
</html>

The output of the above program would be

 

Appearance of Links:

The links of HTML by default follows the following format,

 

State of the Link

 

Format

Unvisited

Blue and Underlined

Visited

Purple and Underlined

Active

Red and Underlined

The colors of the links can be set using the CSS property

Attributes for anchor tag:

The anchor tag supports all the global attributes and event attributes. In addition to them it also supports the following attributes,

 

Attribute

Options

Purpose

href

any valid URL

Specifies the destination source

target

_blank, _top/_parent or _self

Specifies where to display the contents of selected hyperlink. “_blank” opens a new window, “_top” or “_parent” loads the content in the same window, “_self” loads a new page in the current window. Default value is “_self”.

name

any valid string

names the current link, so that it can be a destination of another link.

hreflang

Valid language code

Specifies the base language of the linked item specified in href, must be used only when href is used.

accesskey

Alphabet, number or symbol present on the keyboard

we can specify a keyboard shortcut for activating the link. For example if you specify ‘M’ as accesskey, then a combination of ctrl or shift + M ( depending on the browser) would activate the link.

charset

Standard char set encoding name

Specifies the character set used in the destination document

coords

co-ordinates

specifies the co-ordinates to exactly position the link.

rel

string or space separated values

specifies the relation between the current document and the document specified in href.

rev

string or space separated values

this attribute is reverse of rel attribute

shape

default/rect/circle/poly

specifies the shape of the region.

tabindex

any number between 0 to 32767

specifies the position of the current link in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.

 

Linking to a Fragment:

To link to other fragments of the same web page, use the following code:

      <a href=”#fragment”>Link</a>

To use this code, first we need to define fragments anywhere on the web page using the following code,

      <a name=”fragment_name”>Link</a>

Then we can link to this fragment using hash (#) character.

To link to a fragment on another web page, simply append the # to the web address. For example, href="Home.html#fragment_name".

Download Links:

We can create download links easily using HTML Links.

       <a href=”https://www.samplewebsite.com/text.pdf”>Please click on this link to download the file</a>

This is just a sample code. You can place your web site name in the URL and the location from where we can download the files to create download links.

E-mail Link:

Using this link, we can instruct the browser to compose and e-mail to specified address .We can also set a subject. To do all this, we have to use “mailto” option.

Example:

      <a href=”mailto:www.itechpoint.com?subject=Feedback”>Please send us your views</a>

Setting default URL:

We can use the <base> tag in the head element to set a default URL for all the links on the webpage. The browser will concatenate given relative path to the base path.

        <head>

             <base href=”https://www.itechpoint.com/” />

        </head>

 

So, if we specify <a href=”/careers.html” it will be considered as

           <a href=https://www.itechpoint.com/careers.html > Go to careers page</a>

Important Points:

· Do not forget to close the <a> tag with </a> tag.

· Do not nest multiple <a> tags.

· If you set target on a link, and we are not using framesets( which we will discuss in further chapters) then the link will open in a new window with the name of that target.

 

Differences between HTML 4.01 and HTML5:

HTML5 has some new attributes and some HTML 4.01 attributes are not supported in HTML5

Download, media and type are the new attributes for <a> tag in HTML5.

In the next chapter, we will see how to apply styles to a web page.

Like us on Facebook