HTML LINKS


HTML Links क्या है?

"दो या दो से अधिक Webpages को मिलाकर website बनती है और एक webpage से दूसरे webpage में जाने के लिए links की आवश्कता पडती हैं। इसलिए हम कह सकते हैं कि एक page से दूसरे page में जाने की Process को Links कहा जाता हैं।"

HTML Links को Hyperlinks भी कहा जाता हैं।

जब भी आप अपने mouse के pointer को link के उपर लेकर जाते हो, तो वह change होकर हाथ जैसे निशान में convert हो जाता है। यही links की वास्तविक पहचान हैं।

यह जरूरी नहीं है कि link सर्फ text ही हो सकता है। यह image या कोई ओर HTML Element भी हो सकता हैं।

 Internet की दुनिया में HTML LINKS बहुत महत्वपूर्ण हैं और यह links प्रतेक Website में होते हैं।

Syntax of HTML Links:

                                              <a href="url">Link Text</a>

  • Hyperlink को <a> tag के द्वारा define किया जाता हैं। यह tag <a> से शरू होकर </a> पर end होते हैं।इस <a> tag को anchor tag भी कहा जाता हैं।
  • href attribute के द्वारा address की destination को डाला जता हैं। (eg. www.techbyantimshinde.blogspot.com)
  • Link Text syntax का visible part होता है। जो HTML Page में देखाई देता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h1>HTML Links</h1>
       <p><a href="https://techbyantimshinde.blogspot.com/">Visit
Techbyantimshinde.blogspot.com</a></p>
</body>
</html>

Output:



डिफ़ॉल्ट रूप से, लिंक सभी ब्राउज़रों में निम्नानुसार दिखाई देंगे:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

HTML Links - target Attribute क्या है?

Now, आपने देखा होगा कि link पर जब आप click करते हो तो वह उसी page में खुल जता हैं।

परन्तु, मान लीजिए आप चाहतें हैं कि link page किसी दूसरे browser tab में खुले, तो इसके लिए आप target attribute का use कर सकते हैं।

target Attribute की निम्नलिखित Values हैं जो इस प्रकार हैं:
  • _blank – इसके जरिये आप link या document को नई tab में खोल सकते हैं।
  • _parent – इसके जरिये आप link या document को parent frame में खोल सकते हैं।
  • _top – इसके जरिये webpage full window में खुलता है।
  • _self – इसके जरिये आप link या document को उसी tab में खोल सकते हैं और यह by default होता है।

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h2>The target Attribute</h2>
       <a href="https://techbyantimshinde.blogspot.com/" target="_blank">Visit Techbyantimshinde.blogspot.com</a> 
       <p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html

Output:

The target Attribute

Visit Techbyantimshinde.blogspot.com

If target="_blank", the link will open in a new browser window or tab.


Local Links:

उपर दिए गये address एक full web address हैं।

लेकिन मानलो की आप चाहते हो अपने किसी webpage को link करना हैं तो कैसे करोगे, तो इसका उपयोग करने के लिए हम use करते हैं local links।

Local link बनाने में https और www का प्रयोग नहीं होता हैं।

उदाहरण:

<p>Go to<a href= "filename.html">New File</a></p>


HTML Link - एक Link के रूप में एक Image का उपयोग करें:

एक Link के रूप में एक image का उपयोग करने के लिए, simply <img> Tag को <a> Tag के अंदर रखेंगे :

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h2>Use an Image as a Link</h2>
       <p>The Image below is a link. Try to click on it.</p>
       <a href="#">
              <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
       </a>
</body>
</html>

Output:

Use an Image as a Link

The Image below is a link. Try to click on it.

HTML Tech By Antim Shinde


HTML Links - एक Link के रूप में Button:

एक Link के रूप में HTML Button का उपयोग करने के लिए, आपको कुछ JavaScript Code जोड़ना होगा।

JavaScript आपको Specify करने की अनुमति देता हैं कि कुछ Events पर क्या होता हैं, जैसे कि एक Button पर Click :

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h2>Button as a Links</h2>
       <p>Click the button to go to the HTML tutorial TechByAntimShinde.</p>
       <button onclick="document.location='default.asp'">HTML Tutorial TechByAntimShinde</button>
</body>
</html>

Output:

Button as a Links

Click the button to go to the HTML tutorial TechByAntimShinde.



HTML Links - एक Email पते से Link करें:

HTML से आप Email Link भी बना सकते हैं।

Email Link के द्वारा आप Users को सीधे Email Programs तक ले जा सकते हैं।

Mailto का उपयोग करें, उन्हें एक नया Email भेजने के लिए।

एक Email Link इस प्रकार बनाई जाती हैं :

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h2>HTML Links - Link to an Email Address</h2>
       <p>Use Mailto to send them a new email.</p>
       <p><a href="mailto:everyone@example.com">Send email</a></p>
</body>
</html>

Output:

HTML Links - Link to an Email Address

Use Mailto to send them a new email.

Send email



HTML Links - Link Title :

title Attribute के जरिये आप Elements की Extra Information दे सकते हो।

यह Information तभी show होगी जब Mouse Pointer को आप Link के उपर लेकर जाओगे।

उदाहरण:

<!DOCTYPE html>
<html>
<body>
       <h2>Link Titles</h2>
       <p><a href="https://techbyantimshinde.blogspot.com/" title="Go to Tech By Antim Shinde">Visit our HTML Tutorial Tech By Antim Shinde</a></p>
</body>
</html>

Output:



HTML Color Links:

यदि आप Links का color change करना चाहते हो तो style attribute के द्वारा वो भी कर सकते हो।

परन्तु links का color by default underline के साथ blue color दिखता हैं और देखने में कुछ ज्यादा attractive भी नहीं दिखता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
     <style>
          a:link {
                             color: orange;
                             background-color: transparent;
                             text-decoration: none;
         }
         a:visited {
                             color: green;
                             background-color: transparent;
                             text-decoration: none;
         }
         a:hover {
                             color: red;
                             background-color: transparent;
                             text-decoration: underline;
         }
         a:active {
                             color: aqua;
                             background-color: transparent;
                             text-decoration: underline;
        }
     </style>
</head>
<body>
       <h2>HTML Colors Links</h2>
       <p>You can change the default colors of links</p>
       <a href="#" target="_blank">HTML Tutorial Tech By Antim Shinde</a>
</body>
</html>

Output:

HTML Colors Links

You can change the default colors of links

HTML Tutorial Tech By Antim Shinde


HTML Links - Bookmarks:

यदि वेब पेज बहुत बड़ा है तो Bookmark का उपयोग कर सकते हैं।

Bookmark बनाने के लिए, पहले Bookmark बनाएं, फिर उसमें एक लिंक जोड़ें।

जब लिंक पर क्लिक किया जाता है, तो पृष्ठ Bookmark के साथ नीचे या ऊपर स्क्रॉल करेगा।

उदाहरण:

पहले Bookmark बनाने के लिए id विशेषता का उपयोग करें, फिर उसी पेज के भीतर से Bookmark ("Jump Into Lesson 6") के लिए एक लिंक जोड़ें।

<!DOCTYPE html>
<html>
<body>
       <p><a href="#L6">Jump to Lesson  4</a></p>
       <p><a href="#L13">Jump to Lesson 10</a></p>

       <h2>Lesson 1</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 2</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 3</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 4</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 5</h2>
       <p>This Lesson Explains.</p>

       <h2 id="L6">Lesson 6</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 7</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 8</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 9</h2>
       <p>This Lesson Explains.</p>

       <h2 id="C10">Lesson 10</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 11</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 12</h2>
       <p>This Lesson Explains.</p>

       <h2 id="L13">Lesson 13</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 14</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 15</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 16</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 17</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 18</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 19</h2>
       <p>This Lesson Explains.</p>

       <h2>Lesson 20</h2>
       <p>This Lesson Explains.</p>

</body>
</html>

Output:

Jump to Lesson 6

Jump to Lesson 13

Lesson 1

This Lesson Explains.

Lesson 2

This Lesson Explains.

Lesson 3

This Lesson Explains.

Lesson 4

This Lesson Explains.

Lesson 5

This Lesson Explains.

Lesson 6

This Lesson Explains.

Lesson 7

This Lesson Explains.

Lesson 8

This Lesson Explains.

Lesson 9

This Lesson Explains.

Lesson 10

This Lesson Explains.

Lesson 11

This Lesson Explains.

Lesson 12

This Lesson Explains.

Lesson 13

This Lesson Explains.

Lesson 14

This Lesson Explains.

Lesson 15

This Lesson Explains.

Lesson 16

This Lesson Explains.

Lesson 17

This Lesson Explains.

Lesson 18

This Lesson Explains.

Lesson 19

This Lesson Explains.

Lesson 20

This Lesson Explains.