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:-
The HTML Hyperlink that links to another website or web page is called an external link.
The html Hyperlink that links to another web page located in the same website, is called internal link.
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.
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’ 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:
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>
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>
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>
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.
<A HREF=”https://www.programmingdigest.com” Title “Click this link to visit Programming Digest” > Programming Digest</A>
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> <BODY> <h2> important Links of Programming Digest</h2> <A href= "https://programmingdigest.com/css-cascading-style-sheet-text-decoration-hyperlinks-tables-list/" target= "_blank"> CSS Cascading Style Sheet</a> <br> <a href ="https://programmingdigest.com/html-tags-html-tags-attributes-html-ordered-unordered-and-definition-list/" target= "_blank"> Html Tags</a> <br> <a href="https://programmingdigest.com/email-message-what-is-email-working-of-e-mail-how-to-create-account/" target="_blank">how Email works</a> </BODY> </HTML>
Example how to make a table of contents by creating links of different sections of the current document in HTML:
<HTML> <BODY> <h3> Linking Different Section of the same Document</h3> <a href= "#hard"> Hardware</a> <br> <a href ="#soft"> Software</a> <br> the important information about this page as given as under: <br> <br> <a name="hard"><b> Hardware</b> <br> the physical components of a computer are called hardware. you can touch, see and feel hardware. the input/output devices (such as keyboard, mouse, printer, monitor, etc) cpu, memory unit etc are example of hardware. <br> <br> <a name ="soft"> <b> Software</b> <br> a set of instruction given to the computer to solve a particular problem (or to perform a specific task), is called software. sofware is also computer program. </BODY> </HTML>
Example how to create ordered list and unordered list in html hyperlinks:
<HTML> <BODY> <h2>Tutorials in Ordered List</h2> <ol> <li> <a href="https://programmingdigest.com/css-cascading-style-sheet-text-decoration-hyperlinks-tables-list/">CSS</a> <li> <a href="https://programmingdigest.com/html-tags-html-tags-attributes-html-ordered-unordered-and-definition-list/">Html Tags</a> <li> <a href="https://programmingdigest.com/email-message-what-is-email-working-of-e-mail-how-to-create-account/">how Email works</a> </ol> <h2>Tutorials in Unordered List</h2> <ul type= square> <li> <a href="https://programmingdigest.com/css-cascading-style-sheet-text-decoration-hyperlinks-tables-list/">CSS</a> <li> <a href="https://programmingdigest.com/html-tags-html-tags-attributes-html-ordered-unordered-and-definition-list/">Html Tags</a> <li> <a href="https://programmingdigest.com/email-message-what-is-email-working-of-e-mail-how-to-create-account/">how Email works</a> </ul> </BODY> </HTML>
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”
<HTML> <BODY> <h3> Image as Hyperlink</h3> <h4> Click the Image as given under</h4> <a href="info.html"> <img src="test.jpg" width= 200, height=190></a> </BODY> </HTML>
“info.html file code”
<HTML> <BODY> <h4>You have clicked the landscape Image</h4> </BODY> </HTML>
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> <BODY> <H1>Gets help</H1> <P> For more Information and Suggestion </P> <A HREF "mailto:firstname.lastname@example.org"> Click this link to send e-mail </A> </BODY> </HTML>
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.