The most useful feature of HTML is to link the text or image to a document. We can also link a part of the same or different document in a web page so that when we click the linked text called hypertext that part of the document will open up.
HTML supports two kinds of linking :
External Linking and
Internal Linking
External Linking : The external linking links two different web pages. When the user click the link the linked document get opened.
<A> (Anchor) Tag is used to create link in a HTML document.
Attribute HREF (Hypertext Reference) is used with <A> tag, which is used to take the path or URL of the web page to be opened when user clicks the link. Syntax to use <A> tag is
<A HREF = "Link Page URL"> Text </A>
For example :
<A HREF = "https://en.wikipedia.org/wiki/Polar_bear"> polar bear </A>
 |
| Hyperlink : polar bear |
Try yourself
Try it yourself editor
Here you can see a hyperlink "polar bear" is created, when we click this hyperlink the page having URL "https://en.wikipedia.org/wiki/Polar_bear" get opened.Title Attribute:
We can also give a title to our hyperlink text to give some addition information about that page. This is done through the attribute "title".
Syntax to use <A> tag with Title attribute is :
<A HREF = "Link page URL" Title = "text"> text </A>
For example :
<A HREF = "https://en.wikipedia.org/wiki/Polar_bear" Title = "ice-bears"> polar bear </A>
 |
| Title "ice-bear" with Hyperlink "polar_bear" |
Try yourself
Try it yourself editor
When you hover mouse on the link 'Polar Bear', you can see the title 'ice-bears'.
Lets try another example:
<html>
<head>
<title>
MY FIRST WEBPAGE </title>
</head>
<body
bgcolor = "yellow">
<IMG
SRC = "C:\Users\asd\Desktop\polar bear.jpg">
<A
HREF = "https://en.wikipedia.org/wiki/Polar_bear" Title =
"ice-bears"> <H3> Back </H3> </A>
</BODY>
</HTML>
 |
| "Back" is hypertext |
Try it yourself editor
Target Attribute:
The target attribute specifies where to display the linked URL. Some of the values of Target Attributes are given below :
- _blank: It opens the linked document in a new window or tab.
- _self: It opens the linked document in the same window or tab. This is the default behaviour.
- _top: It opens the linked document in the full body of the window.
Syntax to use target attribute is :
<A HREF = "url" target = "_blank"> Text to display as link </A>
Internal Linking :
Internal Linking links the various sections of the same document. By clicking on the linked button, the linked part of the document is displayed on the screen. <A> (Anchor) tag is also used to make internal linking. It can be used to link other sections of the same document.
To insert an internal linking create the link to the segment/section that is to be displayed.
To define a segment/section in th document, NAME or ID attribute can be used in the document.
Syntax to create internal linking is as follows:
<A NAME = "Segment1"> Segment1</A>
<A HREF = "#Segment1"> Text </A>
For example:
To set a segment in document
<A NAME = "Segment1"> Segment1</A>
After linking that segment
<A HREF = "#Segment1"> Link to Segment1</A>
Q1 Write the HTML codes for the following output so that when we click the link Answer, the yellow doc should appear and when we click the link Back, aqua coloured doc should appear
Ans. First we code for the aqua coloured document.
Open Notepad and type the following codes :
<! DOCTYPE html>
<html>
<head>
<title> Internal link example </title>
</head>
<body BGCOLOR = "Aqua">
<H1 align = "center"> Quiz </H1>
<H2 align = "center"> Questions <H2> <Br>
<OL type = "1">
<LI> Who is the Prime Minister of India ? </LI>
<LI> What is the chemical formula of water ?</LI>
<LI> (a+b)<sup>2</sup> = ? </LI>
</OL>
<a href = "C:\Users\asd\Desktop\answer.html">answer</a>
</body>
</html>
Now save this file with the name questions.html
Now code for yellow coloured document in new notepad file :
<! DOCTYPE html>
<html>
<head>
<title> Internal link example </title>
</head>
<body BGCOLOR = "yellow">
<H1 align = "center"> Quiz </H1>
<H2 align = "center"> Answers <H2> <Br>
<OL type = "1">
<LI> Shri Narender MOdi </LI>
<LI> H<sub>2</sub>O</LI>
<LI> (a+b)<sup>2</sup> = a<sup>2</sup>+b<sup>2</sup>+2ab </LI>
</OL>
<a href = "C:\Users\asd\Desktop\questions.html">Back</a>
</body>
</html>
Now save this file with the name answer.html
Lets try in notepad++ text editor:
 |
questions.html (editor view)
|
 |
answer.html (editor view)
|
Now see the outputs
 |
Browser view of questions.html
|
 |
| Browser view of answer.html |
We can easily navigate between both pages by clicking the links given "answer" and "Back".
See the above example below:
Internal link example
Quiz
Questions
- Who is the Prime Minister of India ?
- What is the chemical formula of water ?
- (a+b)2 = ?
answer
|
No comments:
Post a Comment