Html Hyperlink Tag Internal, External Linking, Html with Hyperlink Code
Table of Contents
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 anchor. A 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.
A html Hyperlink may consist of simple text or an image. It marks a text or image as element that points other HTML document, image, specific section of the same document. The html Hyperlink is activated by clicking with mouse.
Usually, a browser distinguishes html Hyperlink text from normal text as follows: –
- Html Hyperlink text is normally underlined.
- The color of html 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 mouse pointer moves to the html Hyperlink , its shape changes to hand shape
Most html Hyperlink s take 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
Amazon Purchase Links:
*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!
Types of Html Hyperlink:
Html Hyperlinks are generally divided into following types:-
External Links:
The html Hyperlink that links to another website or web page is called 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 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.
- iv) 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 Electronic Clinic website, html code is written as;
<A href=https://www.electroniclinic.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
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:
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 table of contents by creating links of different sections of the current document in html:
Even this article has the table of contents added in the beginning; you can scroll up and check.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 html 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”
1 2 3 4 5 6 7 |
<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”
1 2 3 4 5 6 |
<HTML> <BODY> <h4>You have clicked the landscape Image</h4> </BODY> </HTML> |
E-mail Link
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.
1 2 3 4 5 6 7 8 |
<HTML> <BODY> <H1>Gets help</H1> <P> For more Information and Suggestion </P> <A HREF "mailto:abc@gmail.com"> 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.
Practical use:
For the practical demonstration I am going to add links to different categories and pages. Go ahead and click.
Categories:
Links to different Articles:
Firebase Android Application Designing
Android Toggle Button designing in Android Studio
Android App Development for Arduino
Raspberry Pi based Home Automation using RFID