HTML Links - Hyperlinks - ldklaink

HTML Links - Hyperlinks: हम सभी जानते हैं कि जब हम किसी भी वेबसाइट या ब्लॉग के वेब पेज पर जाते हैं तो वहां हमें कई तरह के लिंक मिलते हैं।

लिंक जो कि इंटरनेट यूजर को किसी शब्द पर क्लिक करने का परमिशन देता है जैसे ही हम किसी पेज के internal linking पर क्लिक करते हैं वह इसी वेबसाइट के किसी दूसरे पेज पर ले जा लेता है।

HTML Links - Hyperlinks

 HTML Links - Hyperlinks 

एचटीएमएल लिंक एक तरह से हाइपरलिंक होते हैं जो लिंक पर क्लिक करते ही दूसरे डॉक्यूमेंट पर या दूसरे वेब पेज पर रिडायरेक्ट कर देता है।

आपने यह भी देखा होगा कि जैसे ही हम किसी लिंक वाले शब्द पर माउस को ले जाते हैं तो वहां पर एरो के निशान से हटकर  एक पंजे का निशान दिखाई देने लगता है जिससे हमें यह समझ में आ जाता है कि इस शब्द पर कोई लिंक अटैच है। 

Note: एक लिंक टेक्स्ट नहीं हो सकता है बल्कि लिंक एक इमेज या फिर दूसरा एचटीएमएल एलिमेंट हो सकता है। 

HTML Links - Syntax 

इस HTML <a> tag द्वारा हाइपरलिंक को दर्शाया जाता है इसके लिए नीचे syntax दिया गया है:

<a href="url">link text</a>

इस सिंटेक्स में  <a> element  का सबसे इंपॉर्टेंट attribute जो होता है वह href होता है जो लिंक के डेस्टिनेशन को बताता है।

लिंग टेस्ट जो की एक reader के लिए विजिबल होता है जैसे ही कोई यूजर इस लिंक टेस्ट पर क्लिक करता है तो वह यूजर को किसी दूसरे स्पेसिफाइड यूआरएल एड्रेस पर सेंड कर देता है।

उदाहरण

उदाहरण के लिए इसी वेबसाइट के लिंक को लिया गया है जैसे ही आप ldkalink.com पर क्लिक करते हैं यह इसी ब्लॉग के होम पेज पर आपको रीडायरेक्ट कर देगा। 

<a href="https://www.ldkalinks.com/">Visit Ldkalink.com</a>

डिफ़ॉल्ट रूप से लिंक सभी तरह के ब्राउज़र में दिखाई देते हैं: 

• एक unvisited link जो की underlined और blue में होता है
• एक visited link जो की underlined और purple में होता है
• एक active link जो की underlined और red में होता है

Tip: यदि हम लिंक के कलर को चेंज करना चाहते हैं तो हम CSS की सहायता से, इसे अपने तरीके से दूसरे दूसरे कलर में बना सकते हैं!

HTML Links - The target Attribute

डिफल्ट रूप से, जब हम किसी लिंक पर क्लिक करते हैं तो यह करंट ब्राउज़र विंडो में ही डिस्प्ले होगा। यदि हम चाहते हैं कि इस लिंक पर क्लिक करते ही यह किसी दूसरे तरीके से ओपन हो तो इसके लिए ये तरीके अपना सकते है। 

target अटरीब्यूट का उपयोग करके लिंक डॉक्यूमेंट कहां ओपन होगा इसे हम अपने तरीके से मैनेज कर सकते हैं: 

• _self - इस ऑप्शन में डॉक्यूमेंट same window/tab में ही ओपन होता है डिफ़ॉल्ट रूप से जब कोई यूजर इस पर क्लिक करता है
• _blank - इसमें डॉक्यूमेंट एक नई विंडो या टैब में ओपन होता है
• _parent - इसमें डॉक्यूमेंट एक पैरेंट फ्रेम में ओपन होता है
• _top - इसमें डॉक्यूमेंट विंडो के पूरे बॉडी में ओपन होता है

उदाहरण

<a href="https://www.ldkalinks.com/" target="_blank">Visit Ldkalink.com</a>

Absolute URLs vs. Relative URLs

Absolute URLs किसी भी लिंक का एक फुल वेब एड्रेस होता है href attribute में, जबकि एक Relative URLs बिना किसी "https://www" पार्ट के ही उसी वेबसाइट के किसी दूसरे पेज का लिंक होता है। 

उदाहरण

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/">W3C</a></p>

<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

जब हम चाहते हैं कि किसी इमेज के ऊपर लिंक इंसर्ट करें, तो इसके लिए ,<img> tag को <a> tag के अंदर लगाते हैं

उदाहरण

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

Link to an Email Adddress

Mailto: का उपयोग करना: जब किसी के ईमेल में कोई मेल करवाना तो तो इसके लिए href attribute के अंदर इसका उपयोग किया जाता हैं जिससे कि यदि कोई यूजर इस पर क्लिक करे, तो यूजर का ईमेल एड्रेस ओपन हो जाता है और वह नाम जिसको भेजा जाना तो में ऑटोमेटिक आ जाता है। 

उदाहरण

<a href="mailto:someone@example.com">Send email</a>

Button as a Link

जब हमें कोई एक बटन यूज करना होता है जिसके ऊपर कोई लिंक होता है तो इसके लिए हम कुछ जावास्क्रिप्ट कोड का उपयोग करते हैं ।

उदाहरण

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Link Titles

यह Title एटीट्यूड जो की एक एक्स्ट्रा इनफॉरमेशन देता है किसी भी एक एलिमेंट के बारे में, आपने कभी नोटिस किया होगा कि जब आप किसी लिंक पर माउस के कर्सर को ले जाते हैं तो नीचे  उसका लिंक शो होने के स्थान पर कुछ एक्स्ट्रा टाइटल या कुछ टेक्स्ट दिखाई देने लगते हैं तो इसका उपयोग करके हम ऐसा कर सकते हैं।

उदाहरण

<a href="https://www.ldkalinks.com/html/" title="Go to LDKALINK HTML section">Visit 

our HTML Tutorial</a>

More on Absolute URLs and Relative URLs

उदाहरण

एक वेब पेज को लिंक करने के लिए फुल यूआरएल का उपयोग करना

<a href="https://www.ldkalinks.com/html/default.asp">HTML tutorial</a>

उदाहरण

किसी करंट वेबसाइट पर ही एचटीएमएल फोल्डर में एक पेज लोकेटेड में ही लिंक करना:

<a href="/html/default.asp">HTML tutorial</a>

उदाहरण

किसी करंट पेज पर ही एचटीएमएल फोल्डर में एक पेज लोकेटेड में ही लिंक करना:

<a href="default.asp">HTML tutorial</a>