This Website for Those Students who are searching for a platform to study online in their own Language Hindi, on this website they will learn all courses like IAS, programming, web designing, data science, and competitive exam preparation, etc.


HTML : Links

Document

HTML : Links





हेलो दोस्तों सुआगत है आपका फिर से Education Point मे आज Html के इस Tutorial मे हम Html Hyperlink के बारे मे जानेंगे जैसे की HTML मे ये HyperLink क्या होती है क्या काम आती है और कैसे Create की जाती है और भी बहुत कुछ तो चलिए इस सुरु करते है।

वैसे दोस्तों आप Link के बारे मे तो जानते ही होंगे की Link क्या होती है फिर भी जो Student को नहीं पता तो में आपको बता दू की Link यह कोई दुसरे Webpage का Address या किसी site का Address भी हो सकत है जैसे हमारी site का Address https://indiapadega.blogspot.com है

जिसकी मदत से हम एक Page से दूसरे Page पर जा सकते है Html में इसे ही Hyperlink कहा जाता है तो आज Html के इस Tutorial में Html HyperLink के बारे में जानेंगे और इसे कैसे Create किया जाता है और इनके Type बहुत कुछ तो चलिए Tutorial को आगे बढ़ाते है।

वेसे में आपको बाता दु की जरूरी नही है कि HyperLink कोई Text ही हो वो Image भी हो सकती है हम Image को को भी HyperLink में Convert कर सकते है जब भी कोई Image पर Click करेगा तो हम उसे दूसरे page पर Redirect कर सकते है ये सब कैसे करते है Tutorial में आगे जानेंगे ।



Syntax



तो अब तक तो हम ने जान लिया कि एक HyperLink होता क्या है और काम क्या आती है तो अब हम इसके Syntax के बारे में जानते है की इसको केसे Define किया जाता है।

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

Output:



    
        link text
    
   


जैसा की ऊपर HyperLink का Synatax देखा Html में Link Create करने के लिये <a> का Use करते है ।

इस Tag के सात बहुत से attribute Use किये जाते है पर इसका सबसे important attribute है href attribute इसके बिना का कोई मतलब नही है href attribute कि Value में हम किसी दूसरे Webpage का url देते है और जैसा कि आप ऊपर देख सकते हो फिर हम oping Tag और Closing Tag के बीच हम वो Text लिखते है

याद रहे जो oping Tag और Closing Tag के बीच Text लिखा जाता है webpage पर वही दिखाई देता है।

जिस पर User Click करेगा और फिर उस href attribute में जो Url है उस Destination पर पहुच जाएगा।

तो चलिए अब एक Example की मदत से समझते है।

<a href="https://www.indiapadega.blogspot.com/">Education Point</a>

Output:



    
        Education Point
    
   


Type of HTML Links



तो चलिए अब HTML Links के Type के बारे मे जान लेते है की ये कितने प्रकार के होते है।



  1. Internal Link
  2. External Link
  3. Download Link
  4. E-mail Link


Internal Link

Internal Link एक वेबसाईट का दूसरा URL होती है. अर्थात किसी website के एक Document में same site के अन्य Documents की Links को Internal Links कहते है. जैसे.

इस Tutorial में हमने कई अन्य Post की Links को दिया हुआ है. ये सभी Links आपको इसी site के अन्य Post पर ले जाती है. इन्हे Internal Links कहते है.



External Link



External Link एक website पर किसी दूसरी website का URL होती है. अर्थात किसी website पर दूसरी website का URL या Specific Page URL को External Link कहते है. आपको इस साईट पर भी कई External Links भी मिल जाएगी. External Link आपको किसी दूसरी website पर ले जाती है. और आप current website से बाहर हो जाते है.



Download Link



आप HTML से Download Link भी बना सकते है. Download Links का उपयोग diffrent types की Files को Downloadable बनाने के लिए किया जाता है.

जैसे इसी site पर हमने Programming,Compitivte Exam ,Hindi Comics aur भी बहुत कुछ हमने Books Section मे दे रखा है वहा पर से आप कोई भी Book Download कर सकते हो तो ऐसी ही Links Create के लिए हम Download Link बनाना सीखेंगे।

आप Word, PDF, Videos, Pictures, Audios आदि प्रकार की files को अपने Users को Download करा सकते है. Files को Downloadable बनाने के लिए File का Full Path लिखना पडता है. आप एक Download Link इस प्रकार बना सकते है.



<!--DOCTYPE html--> <html> <head> <title>HTML Download Link Example</title> </head> <body> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22URSVfFfDlq1HRMumKQLByl9Gnymn2aI9un7Go9FLvukVtixIb_bD4Bj5A-EL9mp6ePgh4jPf_skjpu7txFhpY7z8zyLyDf3_IjIOjBQ3g-qLYOO-7VhnotVfTrCi5aqiLWHAV2Q6as/s1600/sitelogo.png" download="Education Point Logo">Download Logo Image </a> </body> </html>



जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में Open करेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

Download Link भी साधारण Link की तरह ही होती है. बस इसमे आपको download Attribute को और जोडना पडता है. अगर आप इस Attribute को Link में नही जोडेंगे तो फाईल सीधे ब्राउजर में खुल जाएगी. और अगर आप download Attribute को जोडते है तो फाईल Users के System में डाउनलोड होती है. और जो Value आप download Attribute में लिखते है. वही फाईल का नाम हो जाता है. इसलिए डाउनलोड लिंक में download Attribute को जरूर शामिल करना चाहिए.

E-mail Link

HTML से आप ईमेल लिंक भी बना सकते है. E-mail Link के द्वारा आप Users को सीधे E-mail Programs तक ले जा सकते है. एक ईमेल लिंक इस प्रकार बनाई जाती है:



<!--DOCTYPE html--> <html> <head> <title>HTML E-mail Link Example</title> </head> <body> <a href="mailto:educationpoint1996@gmail.com">Mail Us</a> </body> </html>

Output :



            
            
               
               
               
                   HTML E-mail Link Example
               
               
                   Mail Us
                
               
               
           
           


ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा:

E-mail Link बनाने के लिए href Attribute में URL में E-mail Address लिखना पडता है. बाकि Process HTML Text Link के समान ही रहती है. जब Users किसी ईमेल लिंक पर क्लिक करते है, तो यह Users को उनके Default E-mail Program पर पहुँचा देती है.



HTML Link Color

आप HTML Link का Color भी अपने हिसाब से Set कर सकते है. By Default Link Color कुछ इस प्रकार से होता है:

Unvisited Link



Unvisited Link: जिस लिंक पर आपने अभी तक क्लिक नही किया है. Unvisited Link का Color Blue होता है, और ये Underlined रहती है.



Visited Link



Visited Link: जिस लिंक पर आप क्लिक कर चुके है. Visited Link का Color Purple होता है, और भी Underlined रहती है.



Active Link



Active Link: जिस लिंक को आपने अभी आपके सामने खोला हुआ है. Active Link का Color Red रहता है, और ये भी Underlined रहती है.

जब आप HTML Link के लिए कोई Color नही Set करते है. तब भी ब्राउजर द्वारा ये Value दिखाई जाती है. अब आपने Links का Default Colors के बारे में जान लिया है. आइए अब अपनी पसंद का Link Color Set करते है.



Importance Attributes



Anchor Element के साथ दोनों Global Attributes और Event Attributes का Use किया जा सकता है. इनके अलावा भी कुछ Special और Commonly Used Attributes है, जो Anchor Element के साथ इस्तेमाल किए जाते है. इनके बारे में नीचे बताया जा रहा है:



href



href: इस Attribute का इस्तेमाल Link का Destination Address Define करने के लिए किया जाता है. मतलब किसी पेज विशेष का URL Define किया जाता है.



target

target:अब हम Target Attribute के बारे में जानने का प्रयास करते है कि ये किस काम आता है। Target Attribute का use हम जब करते है जब हम ये Decide करना हो कि जब हम Link पर Click करेंगे तो Webpage कहा open होगा new Tab पर या वही पर तो Target Attribute की मदत से हम ये set कर सकते है कि Document कहा open होगा।

वेसे अगर आप HyperLink Tag में ये Attribute declear नही करते है तो by default Document current Webpage पर ही open हो जाता है।

अब हम देखते कि target attribute में कोन कोन सी Value दे सकते है।



  1. _blank
  2. _self
  3. _parent
  4. _top


_blank: यह Value URL को एक New Window/Tab में Open कराती है.

_self: इसके द्वारा URL उसी Window/Tab में Open होता है, जिस Window/Tab पर आपने उस URL पर क्लिक किया है.

_parent: इस Value के द्वारा URL Parent Frame में Open होता है.

_top: इसके द्वारा URL पूरी Window में Open होता है.

इस Value के द्वारा URL नाम विशेष Frame में Open होता है.

hreflang



hreflang: इस Attribute से ब्राउजर को बताया जाता है कि Linked Document इस भाषा में लिखा गया है. भाषा को Standard Format में लिखा जाता है. जैसे; हिंदी का मान्य नाम hi है. और अंग्रेजी का मान्य नाम en है.



type



type: इस Attribute से Internal Media Type को बताया जाता है कि इस URL से इस प्रकार की File जुडि हुई है.



download

download: इस Attribute से ब्राउजर को बताया जाता है कि इस URL से कोई Download होने वाला Content Linked है.



mailto



mailto: इस Attribute से Email Address को Define किया जाता है. जब आप इस प्रकार की लिंक पर क्लिक करते है, तो आप सीधे Mail Software पर पहुँच जाते है.



title

title: इस Attribute से Link को परिभाषित किया जाता है. जब आप किसी Link पर माउस को ले जाते है तो यह Title दिखाई देता है.



Importance of HTML Links



बिना Links के Internet अधूरा है. Links ही इंटरनेट का महत्व सिद्ध करती है. नीचे HTML Links के कुछ उपयोगों की जानकारी दी जा रही है. जिनसे आप खुद HTML Links की Importance का अदांजा लगा सकते है:

HTML Link का उपयोग एक Document को दूसरे Document से जोडने के लिए किया जाता है.

Users को आसान Navigation भी Links के द्वारा ही उपलब्ध कराया जाता है.

External Links, जिन्हे SEO – Search Engine Optimization की दुनिया में Backlinks भी कहते है. ये SEO का अहम हिस्सा होती है.

Previous
Next Post »

Quote

"Educationists should build the capacities of the spirit of inquiry, creativity, entrepreneurial and moral leadership among students and become their role model."

Dr. Abdual Kalam