Sunday, 4 June 2017

Hyperlink क्या है? HTML Link के Types और उनके उपयोग



hyperlink क्या है?

जैसा कि हम सभी जानते हैं कि कई सारे pages से मिलकर एक website बनता है और ये सारे pages HTML links के माध्यम से ही एक-दूसरे से connected होते हैं।

आपने देखा होगा लगभग सभी websites में एक menu होता है जिस पर click करके हम दूसरे pages तक पहूंचते हैं ठीक ऐसा ही menu आप ऊपर इस पेज में भी देख सकते हैं, तो ये सारे menus HTML links से ही बनाये जाते हैं।

जब आप Google में कुछ search करते हैं तब वहां भी आपको result वाले पेज में कई सारे links दिखाई देते है जिसपर click करके आप सम्बंधित site तक पहुंचते हैं, तो कहने का मतलब ये कि हम बिना link के internet पर अपनी मनचाही जानकारी हासिल नही कर सकते। इससे पता चलता है कि ये links कितने important हैं।


Hyperlink क्या है?

हाइपरलिंक (Hyperlink) या link एक प्रकार का text होता है जिसे HTML द्वारा बनाया जाता है। जब इस पर click किया जाता है तो browser हमें किसी दुसरे web page पर लेकर जाता है। क्लिक करने पर कौन सा पेज open होगा यह HTML के code से तय होता है जिसमे हम उस पेज के URL यानि address का उपयोग करते हैं।

HTML link कैसे बनायें

इसे समझने के लिए आप सबसे पहले दो तीन html page बनाकर एक folder में save कर लें और किसी एक पेज को notepad (या किसी code editor) में open करें और उसमें नीचे दिये तरीके से लिंक बनाने का अभ्यास करें।

लिंक बनाने के लिये हमको anchor tag <a> की जरूरत पडती है जिसका एक example नीचे देख सकते हैं:
<a href="contact.html" title="visit my contact page" target="_self">Contact </a>

  <a> Tag Attributes


  • href: इस attribute से target page यानि कि link पर क्लिक करने पर कौन सा पेज open होगा उसका url या address बताते हैं। ऊपर मैंने एक link बनाया जिसपर क्लिक करने पर contact पेज खुलेगा, href=”contact.html” लिखा क्योंकि contact.html वाला पेज same location पर है। अगर आप किसी दूसरी website के पेज को लिंक करना चाहते हैं तो आपको उसका पूरा address लिखना होगा।
  • title: जब visitor हमारे लिंक पर hover करेगा यानि की जब cursor link के ऊपर आयेगा तो title में हमने जो लिखा है show हो जायेगा।
  • target: इससे हम browser को ये बताते हैं कि हमारा link कहां open होगा। अगर आप इसका उपयोग ना करें तो लिंक same browser window या tab में open होगा। इसके कुछ और भी values हो सकते हैं जो इस प्रकार है:
    •  _blank : इससे पेज एक नये tab या window पर open होता है (जो आपके browser की setting पर depend करता है)
    •  _parent: ये पुराने जमाने में use होता था जब frames का उपयोग किया जाता था लेकिन अब ये न के बराबर काम आता है

HTML Link के Types:

Link के कई सारे प्रकार होते हैं जिनमे से कुछ नीचे दिये गये हैं:
  • Local : same location के page को link किया जाता है
  • Internal: page-jump यानि उसी पेज के अलग-अलग sections को लिंक करते हैं
  • External: किसी दूसरी site के पेज को लिंक करने के लिये
  • Download: किसी फ़ाईल को download कराने के लिये
  • E-mail: visitor के system उपलब्ध email program को open करता है

Local link

Same server, directory, folder या same location पर उपलब्ध पेज को लिंक किया जाता है। जैसे:
<a href=”contact.html” title=”visit my contact page”>Contact </a>
यहां पर हमार पेज contact.html same folder में save किया गया है।

Internal link:

इसे page-jump भी कहते हैं, आपने देखा होगा कई सारे वेबसाइट में सबसे नीचे back to top या top का लिंक होता है जिस पर क्लिक करते ही cursor पेज के सबसे top में चला जाता है। इसे बनाना बहुत ही आसान है इसके लिये आपको दो simple steps follow करने पडेंगे:
  1. Page के अन्दर एक point बनाना पडेगा जहां पर हमको jump करना है। इसके लिये इस कोड का use करें:  
    <a name=”point_name”></a>
  2. अब पेज में कहीं भी एक लिंक बनायेंगे जिसपर क्लिक करने से page jump होगा। इसके लिये simple एक कोड लिखें:
    <a href=”#point_name”>Click Here</a>
Example: हम पेज के सबसे top में एक point create करेंगे और point का नाम रखेंगे top, कुछ इस तरह:
<a name=”Top”></a>

अब page के सबसे bottom में एक लिंक बनायेंगे
<a herf=”#Top”>Goto Top</a>

अब जब भी Go to Top link पर click करेंगे तो पेज के सबसे top position पर पहुंच जायेंगे। 

External link

Internet उपलब्ध किसी भी पेज को लिंक करने के लिये हमें उस page के URL की जरूरत पडेगी। 
<a href=”url for the website”>Click Here</a>
उदहारण:
<a href=www.webinhindi.com>Click Here to visit WebinHindi Website</a>

Download link: 

यह local और external link जैसा ही होता है अंतर बस यही होता है कि इसमें page के url की जगह किसी file का address डाला जाता है जिससे लिंक पर क्लिक करने से वह file download होने लगता है।
उदहारण:
<a href=”file_url.zip”>Click here to download this file</a>

E-mail link

अगर आप चाहते हैं कि आपका visitor आपको e-mail के जरिये संपर्क कर सके तो इसके लिये आप अपने website में e-mail link दे सकते हैं । इस प्रकार के लिंक पर जब visitor क्लिक करता है तब उसके system में उपलब्ध कोई e-mail software जैसे Outlook Express आदि हो तो open हो जाता है और उसमे हमारा e-mail address, subject, cc, bcc आदि automatic fill हो जाते हैं।
Example:
<a href=mailto:info@website.com?subject='email from the web-site' &cc=vivek@gmail.com&bcc=amit@gmail.com>Contact Us</a>


Hyperlink के Color को कैसे बदलें


लिंक्स के color अलग-अलग हो सकते हैं ये depend करता है browser की setting पर लेकिन अगर आप चाहते हैं कि आपके पेज के link colors को अपने हिसाब से दिखाना चाहते हैं तो आप <body> tags में कुछ attributes डालकर ऐसा कर सकते हैं। इसके लिये तीन तरह के attributes होते हैं:
  • LINK: जिस link पर visit नही हुआ है उसका कलर
  • VLINK: Visited link, जिसपर पहले से click किया जा चुका है उसका color change करने के लिये
  • ALINK: Active link color, जब हम किसी लिंक पर click किये होते हैं तो वह active state में होता है
आप इसका example निचे देख सकते हैं:

<body link="#FFCC33" vlink="#FF3333" alink="#00FF00"> पेज के HTML Codes </body>

ध्यान रहे <body> tag एक page में सिर्फ़ एक बार लगाया जा सकता है, इसलिये एक से ज्यादा बार इसका प्रयोग न करें।

अभी आपने पढ़ा  HTML Link के Types और उनके उपयोग जिसमे हमने html में हाइपरलिंक के types के बारे में जाना और उनको coding करके बनाना सीखा हमें उम्मीद है आपको यह article पसंद आया होगा, आप comment के माध्यम से अपने विचार हमे बता सकते हैं|

नमस्कार, मैं विवेक, WebInHindi का founder हूँ| यह एक मात्र blog है जहाँ से आप web design & development के tutorials हिंदी में प्राप्त कर सकते हैं| अगर आपको हमारा यह ब्लॉग पसंद आये तो आप हमें social media पर follow कर हमारा सहयोग कर सकते हैं|

इस Post से सम्बंधित किसी भी तरह का प्रश्न पूछने या सुझाव देने के लिए नीचे comment कीजिये.
EmoticonEmoticon