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 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://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://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 a table of contents by creating links of different sections of the current document in HTML:
|
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 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 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.
|
1 2 3 4 5 6 7 8 |
<HTML> <BODY> <H1>Gets help</H1> <P> For more Information and Suggestion </P> 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.
It’s going to be ending of mine day, but before ending
I am reading this enormous post to improve my experience.
Amazingness is an all-inclusive life performance suite that makes getting things done not only less complicated, yet extra amazing.
Howdy! I’m at work surfing around your blog from my
new iphone 3gs! Just wanted to say I love reading your blog and look forward to all your posts!
Keep up the outstanding work!
This is the right site for anyone who wishes to understand this topic.
You know a whole lot its almost hard to argue with you (not that
I personally will need to…HaHa). You certainly put a fresh spin on a subject which
has been discussed for ages. Great stuff, just excellent!
You actually make it seem so easy with your presentation but I find this topic to be really something which I think I would never
understand. It seems too complex and very broad for me.
I’m looking forward for your next post, I will try to get the hang of it!
Do you have any video of that? I’d want to find out
more details.
Hi, I do think this is a great web site. I stumbledupon it 😉 I’m going to come back yet
again since I book-marked it. Money and freedom is the greatest way to change, may
you be rich and continue to guide others.
Just want to say your article is as astonishing. The clearness in your post is just spectacular and
i could assume you are an expert on this subject.
Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post.
Thanks a million and please keep up the enjoyable work.
Thanks a bunch for sharing this with all of us you really understand what you are talking
approximately! Bookmarked. Kindly additionally discuss with my website =).
We may have a link exchange contract between us
An outstanding share! I’ve just forwarded this onto a friend who has been conducting
a little homework on this. And he actually ordered me
lunch simply because I stumbled upon it for him…
lol. So let me reword this…. Thanks for the meal!! But yeah,
thanx for spending time to talk about this topic here on your web
site.
I think that is one oof tthe so much importtant information for me.
And i am happy reading your article. Howver want to commentary on few basic things, The site style is perfect, the articles is in reality excellent : D.
Just right activity, cheers
It’s going to be ending of mine day, however before end I am reading this enormous
piece of writing to improve my knowledge.
Amazing things here. I am very glad to see your article. Thank you a lot and I’m looking forward to contact
you. Will you kindly drop me a mail?
I go to see daily some blogs and sites to read content,
however this webpage offers quality based posts.
Excellent pieces. Keep posting such kind of info on your blog.
Im really impressed by it.
Hey there, You have done an excellent job. I’ll certainly digg it and individually recommend to my friends.
I am sure they’ll be benefited from this site.
Thank you, I like this.
Great blog here! Also your web site loads up very fast!
What web host are you using? Can I get your
affiliate link to your host? I wish my website loaded up as quickly
as yours