Html Hyperlink Tag Internal ,External Linking Html With Hyperlink Code

Html Hyperlink

Html Hyperlink

A website consists of many pages that are linked with one another through HTML Hyperlink s. Generally, HTML Hyperlink s are called just links. A link is also called an anchor. An HTML Hyperlink is used to link (or connect) another document on the web. It is also used to link another section of the same document. It makes possible moving around and accessing information very simple.

An HTML Hyperlink may consist of simple text or an image. It marks a text or image as an element that points to another HTML document, image, a specific section of the same document. The HTML Hyperlink is activated by clicking with mouse.

Usually, a browser distinguishes HTML Hyperlink text from the normal text as follows: –

  • Html Hyperlink text is normally underlined.
  • The color of Hyperlink text is different from normal text color. The default color of HTML Hyperlink text is blue.

Note that the <Body> tag also provides attributes to change the color of HTML Hyperlink s.

  • When the mouse pointer moves to the HTML Hyperlink, its shape changes to hand shape

Most HTML Hyperlink is taken the user to another webpage. Other HTML Hyperlink s perform special functions such as;

  • sending e-mail
  • execution of database query
  • submitting a form
  • accessing FTP site



Types of Html Hyperlink:

Html Hyperlink s are generally divided into the following types:-

External Links:

 The HTML Hyperlink that links to another website or web page is called an external link.

Internal Links:

The html Hyperlink that links to another web page located in the same website, is called internal link.

Page-Jump:

The HTML Hyperlink that links a specific section within the same document is called page-jump. The section or location of the document to which the hyperlink is linked, is called bookmark. The page-jump links help the users (visitors) to directly move to specific section inside the document without too much scrolling. These types of links are used if a web page contains large amount of information.

Email Links:

The html Hyperlink  that links to e-mail, is called Email link. When this link is clicked, e-mail application is started for composing the e-mail.

<A> Tag

A’ stands for Anchor. The <A> tag is used to create a html Hyperlink  in a web page. The text or image between the <A> and </A> is marked as hyperlink.


Attributes Of <A> tag:

The most important and commonly used attributes of <A> tag are as follow:

Href:

This tag is commonly used to specify the actual link. The name and location of the web page you to link is specified as value of this attribute. In case of link of a section of the same page, the name of the section prefixed with #sign is specified.

 For example, to create a link of Programming digest website, html code is written as;

<A href=https://www.programmingdigest.com> Open site</a>

Name:

It is used to mark the destination location within the current document with a name.

To mark (or identify ) the location in the same document to be jumped to follow these step:

  • move to the desired location of the document where you want to mark the destination location.
  • Mark the destination location as follows
    • <A name = “location_name”

to jump to a specific location in the current document, the name of the location prefixed with sign (#) is specified as value of HREF attribute. For example, to go to location “abc”, which is already marked using <A> tag with ‘Name’ attribute, HTML code is written as;

<A HREF = “#abc”> Go to ABC section </A>

Target

It is used to specify the window to open the linked page. By default, the linked page is opened in the current browser. To open a web page “abc.htm” in a new blank browser window, HTML code is written as;

<A HREF =”abc.htm” Target =”_blank”> Click Me </A>

Usually, the Target attribute is used to open the linked page into a specific frame. The names of the frames are given when they are created such as “main_frame”, and “Title_frame” etc. For example, to open the linked page “abc.htm”, in the “main frame”, the HTML code is written as:

<A HREF = “abc.htm”. Target = “main_frame”> Click Me </A>


Title

This attribute is used to specify the text for tool tip. When the visitor places the mouse cursor over the link, pop-up appears with specified text for the short description of the link.

For example;

<A HREF=”https://www.programmingdigest.com” Title “Click this link to visit Programming Digest” > Programming Digest</A>

Output

Html Hyperlink

Note: When an external link or internal link is clicked, the html Hyperlink  takes the user to the beginning of the new web page. It is default setting. You can jump to the specific location, in the new web page, when it opens. For this purpose, the name of the web page (along with complete path is required) and the name of location in that page are specified.

For example, to create a link of document file “medical.htm” and jump to its

section “detail”, The HTML code is;

<A HREF = “medical.htm#detail”> Click to See Medical Detail </A>

In the above code, “Click to See Medical Detail” becomes a Hotspot and leads to a location name “detail” in the document “medical.htm”.



Example how to create four external hyperlinks in html:

Html Hyperlink

Example how to make a table of contents by creating links of different sections of the current document in HTML:

Html Hyperlink


Example how to create ordered list and unordered list in html hyperlinks:

Html Hyperlink

Image As Html Hyperlink

You can also use an image as html Hyperlink . We know that anything given between the <A> and </A> tags becomes a hotspot. Thus, an image can be made a hotspot using <IMG> tag between the <A> and </A> tags.

The general syntax to use an image as Hyperlink  is given as under:

<A HREF =”URL”> <IMG SRC=”image file name “> </A>

In the above syntax, “URL” represents the address of the web page. This page will be opened if image is clicked. The “image file name” represents the image file name with complete path.


Example write html code to demonstrate the use of image as html hyperlink:

“Demo.html file code”

“info.html file code”

Html Hyperlink

Html Hyperlink



E-mail hyperLink

You can include e-mail link in your web pages. In the e-mail link, the e-mail address of the company or owner of the website/web page is given. When the e-mail link is clicked, the e-mail program window will open along with the e-mail address, The user types the message for e-mail and sends to the owner of web page. The e-mail links are usually used to get feedback or suggestion about the products (or website) of the company/organization.

To create an e-mail link, the ‘Mailto:’ protocol is used inside the <A> tag.

HTML code is written below to get more information from admin.

Html Hyperlink

Html Hyperlink

Please note that e-mail address “abc @gmail.com” specified with “mailto:” protocol is automatically appears in the To: textbox of New Message window. Type the subject for the e-mail in Subject: textbox, and message in the message box. Click Send button to send the e-mail.

Recommended For You

Fawad

About the Author: Fawad

My name is Shahzada Fawad and I am a Programmer. Currently, I am running my own YouTube channel "Expertstech", and managing this Website. My Hobbies are * Watching Movies * Music * Photography * Travelling * gaming and so on...

Leave a Reply

%d bloggers like this: