Html and CSS

Html Hyperlink Tag Internal, External Linking, Html with Hyperlink Code

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:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*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.

  1. 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

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>
<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>

Html Hyperlink

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.

<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>

Html Hyperlink

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>

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 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”

<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>

Html Hyperlink

Html Hyperlink


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.

<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>

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.


Practical use:

For the practical demonstration I am going to add links to different categories and pages. Go ahead and click.

Categories:

Arduino Projects:

Android App Development:

C++ Programming:

Python Programming:

JAVA Programming:

HTML and CSS

PHP

Java Script

C Sharp

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

 

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button