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.