HTML Link in Hindi – HTML Link Tag in Hindi.
HTML Link की पूरी जानकारी
HTML Links इंटरनेट का Super Highway है. यह कहना गलत नही है. क्योंकि Hyperlinks के माध्यम से ही हम WWW – World Wide Web पर उपलब्ध Information (जानकारी) को Search वे Access कर पाते है.
और इस Lesson में हम आपको HTML Links की ही पूरी जानकारी देने वाले है. आप जानेंगे कि HTML Link क्या है – What is HTML Link in Hindi? HTML Links कैसे बनाते है – How to Create HTML Link in Hindi? HTML Links का विभिन्न प्रकार, HTML Links का महत्व (Importance) आदि के बारे में आपको जानकारी मिलेगी.
अध्ययन की सुविधा के लिए हमने इस Lesson को कई छोटे-छोटे भागों में बांटा है. जिनके नाम की सूची नीचे दी जा रही है:
Table of Content
- HTML Links का परिचय – Introduction to HTML Links in Hindi.
- HTML Links कैसे बनाये – How to Create HTML Links?
- HTML Link का Syntax – Introduction to HTML Link Syntax.
- एक HTML Link बनाना – Creating an HTML Link.
- HTML Link का Color बदलने का तरीका – Colors in HTML Link.
- Anchor Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.
- HTML Links का प्रकार – Type of HTML Links?
- HTML Links का महत्व – Importance of HTML Links?
- Base Tag का परिचय – Introduction to Base Tag in Hindi.
- आपने क्या सीखा?
1. HTML Links का परिचय – Introduction to HTML Links in Hindi.
HTML का पूरा नाम Hypertext Markup Language होता है. जिसमें Hypertext HTML Links को ही Define करता है.
Links एक साधारण शब्द ही होता है, मगर इसे Anchor Element द्वारा Hyperlink में बदल दिया जाता है.
जब, आप एक HTML Link पर Mouse Cursor को ले जाते है, तो Cursor एक हाथ में बदल जाता है. यही चीज एक साधारण शब्द और Link में पहचान कराती है.
आपको लगभग हर Webpage पर Links मिल जाएगी. जिन पर क्लिक करके आप एक पेज से दूसरे पेज पर चले जाते है.
आइए अब हम भी HTML Links बनाना सीखते है?
2. HTML Links कैसे बनाये – How to Create HTML Links?
HTML Link बनाने के लिए Anchor Element का इस्तेमाल किया जाता है. Opening <a> Tag द्वारा Link को Define किया जाता है. Anchor Tag से हम Link तभी बना सकते है; जब हमे HTML Link Syntax की जानकारी होगी. तो आइए पहले Link Syntax को जानते है?
2.1 HTML Link का Syntax – Introduction to HTML Link Syntax.
नीचे HTML Link Syntax को दिया जा रहा है:
Syntax को समझिए:
- a: a Anchor Tag को Represent करता है. और Opening Anchor Tag से एक Link को Define किया जाता है. मतलब उसकी शुरूआत होती है.
- href: इसका पूरा नाम Hypertext Reference होता है. href Anchor Tag का एक जरूरी Attribute है, जो Destination Address (वेबपेज पता) को Define करता है. Destination URLs Standard Format (मान्य तरीका) में ही Define होने चाहिए.
- Link Text: वह शब्द या शब्दांश होता है, जो Users को दिखाई देता है. मतलब जिस पर क्लिक होती है. यहाँ आप अपनी पसंद से कुछ भी लिख सकते है.
- </a> यह Closing Anchor Tag होता है. यह ब्राउजर को बताता है कि यह HTML Link यही समाप्त हो गई है.
आपने जाना कि एक HTML Link Syntax चार अलग-अलग भागों से मिलकर बना होता है. जिसमें प्रत्येक भाग का अपना अलग कार्य होता है. उम्मीद है कि आपने Link Syntax को अच्छी तरह समझ लिया है. चलिए अब Link बनाते है.
2.2 एक HTML Link बनाना – Creating an HTML Link.
HTML से आप दो प्रकार की Link बना सकते है:
- Text Link
- Multimedia Link
a. HTML से Text Link बनाने का तरीका
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllink.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Link Example</title></head>
<body>
<p>
Below is an HTML Link. By Clicking on it You Can Visit https://motojiclasses.blogspot.com/
</p>
<a href=”https://motojiclasses.blogspot.com/”>Visit https://motojiclasses.blogspot.com/</a>
</body>
</html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड में एक Paragraph और एक HTML Link Define किया है.
Below is an HTML Link. By Clicking on it You Can Visit TutoriaPandit.com.
Visit https://motojiclasses.blogspot.com/
Example समझिए:
ऊपर दिए गए कोड के माध्यम से हमने एक Paragraph और एक HTML Link बनाई है. हमने यह Link, Link Syntax का उपयोग करते हुए ही बनाई है.
- a: a से हमने Anchor Tag को Define किया है. जो Link की शुरुआत करता है. यह Opening Anchor Tag है.
- href: इस Attribute में हमने एक Web Address;https://motojiclasses.blogspot.com/ को लिखा है. जब आप Link Text पर क्लिक करेंगे तो आप इस वेबपते पर पहुँच जाऐंगे. आप यहाँ Standard Format (मान्य तरीका) में कोई भी Destination URLs Define कर सकते है.
- Visit ambition.com: यह Link Text है. जो Users को दिखाई देता है. जिस पर क्लिक करके Hypertext Reference यानि Web Address पर पहुँचा जाता है. आप यहाँ अपने हिसाब से कुछ भी लिख सकते है. बस आप URL सही होना चाहिए.
- </a>: यह Closing Anchor Tag है. जो ब्राउजर को बताता है कि यह Link यहाँ समाप्त हो रही है.
b. HTML से Multimedia Link बनाने का तरीका
HTML Students द्वारा ये सवाल अक्सर पूछे जाते है कि HTML से Image Link कैसे बनाये? Video Link कैसे बनाते है?
तो इन सवालों का जवाब है: Multimedia Link. Multimedia Link से आप Image, Video, Audio, Gifs आदि को Link में बदल सकते है.
इसे Try कीजिए:
<html>
<head>
<title>HTML Image Link Example</title></head>
<body>
<p>
Below is an Image. By Clicking on it You Can Visit motojiclasses.blogspot.com.
</p>
<a href=”https://motojiclasses.blogspot.com/”><src=”image url”></a>
</body>
</html>
जब आप ऊपर दिए गए कोड को Save करके अपने ब्राउजर में Open करेंगे तो आपके सामने कुछ इस प्रकार से खुलेगा:
Example समझिए:
HTML Image Link बनाना बहुत आसान है. हमने ऊपर एक Image Link बनाई है. हमने Link Text की जगह पर Image को Add किया है. और कुछ नही. हमने Image Add करने के लिए Image Tag का इस्तेमाल किया है. अगर आपको Webpage में Image Add करना नही आता है, तो आप इस Tutorial को पढिए.
आप इसी तरह किसी भी प्रकार की Multimedia File से HTML Link बना सकते है. बस आपको, Link Text की जगह पर Multimedia को Add करना है. बाकि Process Text Link के समान रहती है.
जब आप एक Image Link बनाते है, तो आपके सामने सिर्फ Image ही दिखाई देती है. लेकिन, जब आप इसके ऊपर Mouse Cursor को ले जाऐंगे तो Cursor एक हाथ में बदल जाता है. और यही एक Link की आसान पहचान है.
Text Link में हमें कोई शब्द/श्ब्दांश लिखना पडता है. और Multimedia Link में Text के स्थान पर कोई Multimedia File जैसे; Video, Image, Audio आदि को Add करना पडता है. एक Text Link और Multimedia Link में यही छोटा-सा अंतर होता है.
2.3 HTML Link का Color बदलने का तरीका – Colors in HTML Link.
आप HTML Link का Color भी अपने हिसाब से Set कर सकते है. By Default Link Color कुछ इस प्रकार से होता है:
- Unvisited Link: जिस लिंक पर आपने अभी तक क्लिक नही किया है. Unvisited Link का Color Blue होता है, और ये Underlined रहती है.
- Visited Link: जिस लिंक पर आप क्लिक कर चुके है. Visited Link का Color Purple होता है, और भी Underlined रहती है.
- Active Link: जिस लिंक को आपने अभी आपके सामने खोला हुआ है. Active Link का Color Red रहता है, और ये भी Underlined रहती है.
जब आप HTML Link के लिए कोई Color नही Set करते है. तब भी ब्राउजर द्वारा ये Value दिखाई जाती है. अब आपने Links का Default Colors के बारे में जान लिया है. आइए अब अपनी पसंद का Link Color Set करते है.
इसे Try कीजिए:
<html>
<head>
<title>HTML Link Example</title></head>
<body link=”blue” alink=”green” vlink=”red”>
<p>
Below is an HTML Link. By Clicking on it You Can Visit motojiclasses.blogspot.com
</p>
<a href=”https://motojiclasses.blogspot.com/”>Visit motojiclasses.blogspot.com</a>
</body>
</html>
जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में खोलेंगे तो आपके सामने कुछ इस प्रकार का परिणाम दिखेगा:
Example को समझिए:
हमने ऊपर Link Color बदलने के लिए Body Tag में link, alink और vlink Attributes का इस्तेमाल किया है. और इनमे Color को Set किया है. यहाँ जो Color Set किया गया है. यह आपके पूरे डॉक्युमेंट पर असर करता है. और आपके वर्तमान पेज पर जितनी भी Link होगी. उन सभी का Color इसके अनुसार हो जाएगा.
यहाँ link का मतलब Unvisited Link है; alink का मतलब Active Link है; और vlink का मतलब Visited Link है. आपको जो भी Color अपनी Link के लिए Set करना है, उसका नाम लिखिए बस आपका काम हो गया.
3. Anchor Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.
Anchor Element के साथ दोनों Global Attributes और Event Attributes का Use किया जा सकता है.
इनके अलावा भी कुछ Special और Commonly Used Attributes है, जो Anchor Element के साथ इस्तेमाल किए जाते है. इनके बारे में नीचे बताया जा रहा है:
- href: इस Attribute का इस्तेमाल Link का Destination Address Define करने के लिए किया जाता है. मतलब किसी पेज विशेष का URL Define किया जाता है.
- target: यह Attribute ब्राउजर को बताता है कि Destination Address को कहाँ खोलना है. Target Attribute की निम्न Value हो सकती है:
- _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: इस Attribute से ब्राउजर को बताया जाता है कि Linked Document इस भाषा में लिखा गया है. भाषा को Standard Format में लिखा जाता है. जैसे; हिंदी का मान्य नाम hi है. और अंग्रेजी का मान्य नाम en है.
- type: इस Attribute से Internal Media Type को बताया जाता है कि इस URL से इस प्रकार की फाईल जुडि हुई है.
- download: इस Attribute से ब्राउजर को बताया जाता है कि इस URL से कोई Download होने वाला Content Linked है.
- mailto: इस Attribute से Email Address को Define किया जाता है. जब आप इस प्रकार की लिंक पर क्लिक करते है, तो आप सीधे Mail Software पर पहुँच जाते है.
- title: इस Attribute से Link को परिभाषित किया जाता है. जब आप किसी Link पर माउस को ले जाते है तो यह Title दिखाई देता है.
4. HTML Links का प्रकार – Type of HTML Links?
HTML Links के विभिन्न प्रकार है. हम आपको नीचे इनकी जानकारी दे रहे है:
- Internal Link
- External Link
- Download Link
- E-mail Link
1. Internal Link
Internal Link एक वेबसाईट का दूसरा URL होती है. अर्थात किसी वेबसाईट के एक Document में समान साईट के अन्य Documents की Links को Internal Links कहते है. जैसे; इस Lesson में हमने कई अन्य Lessons की Links को दिया हुआ है. ये सभी Links आपको इसी साईट के अन्य Lessons पर ले जाती है. इन्हे Internal Links कहते है.
2. External Link
External Link एक वेबसाईट पर किसी दूसरी वेबसाईट का URL होती है. अर्थात किसी वेबसाईट पर दूसरी वेबसाईट का URL या Specific Page URL को External Link कहते है. आपको इस साईट पर भी कई External Links भी मिल जाएगी. External Link आपको किसी दूसरी वेबसाईट पर ले जाती है. और आप वर्तमान वेबसाईट से बाहर हो जाते है.
3. Download Link
आप HTML से Download Link भी बना सकते है. Download Links का उपयोग विभिन्न प्रकार की फाईलों को Downloadable बनाने के लिए किया जाता है. आप Word, PDF, Videos, Pictures, Audios आदि प्रकार की फाईलों को अपने Users को Download करा सकते है. Files को Downloadable बनाने के लिए File का Full Path लिखना पडता है. आप एक Download Link इस प्रकार बना सकते है:
<html>
<head>
<title>HTML Download Link Example</title></head>
<body>
<a href=”https://motojiclasses.blogspot.com.tpc-logo.png/” download=motojiclasses.blogspot.com 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 को जरूर शामिल करना चाहिए.
4. E-mail Link
HTML से आप ईमेल लिंक भी बना सकते है. E-mail Link के द्वारा आप Users को सीधे E-mail Programs तक ले जा सकते है. एक ईमेल लिंक इस प्रकार बनाई जाती है:
<html>
<head>
<title>HTML E-mail Link Example</title></head>
<body>
<a href=”motojiclassest@gmail.com”>Mail Us</a>
</body>
</html>
ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा:
E-mail Link बनाने के लिए href Attribute में URL में E-mail Address लिखना पडता है. बाकि Process HTML Text Link के समान ही रहती है. जब Users किसी ईमेल लिंक पर क्लिक करते है, तो यह Users को उनके Default E-mail Program पर पहुँचा देती है.
5. HTML Links का महत्व – 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 का अहम हिस्सा होती है.
6. Base Tag का परिचय – Introduction to Base Tag in Hindi.
जब आप किसी वेबसाईट के एक पेज में संबधित पेज के Links बनाते है, तो आपको सभी Links का Full Path लिखना पडता है. लेकिन, <base> Tag के द्वारा इस कार्य से छुटकारा पा सकते है.
<base> Tag को Document के Header में Set किया जाता है. और बाकि Relative Links को Document के Body Section में लिखा जाता है. Base Path इस प्रकार Set किया जाता है:
<html>
<head>
<title>HTML Base Path Example</title><base href=”https://motojiclasses.blogspot.com/”>
</head>
<body>
<a href=”/about-us”>Know About Us</a>
</body>
</html>
हमने ऊपर कोड में एक Base Path – https://motojiclasses.blogspot.com/ Set किया है. और Body Section में एक Link – /about-us बनाई है, जो आपको motojiclasses.blogspot. के About Us Page पर ले जाती है.
नीचे वाली लिंक में हमने पूरा URL नही लिखा है. लेकिन, Base Path के कारण ब्राउजर इस URL को https://motojiclasses.blogspot.com/about-us/ के समान ही मानता है. आप इस प्रकार कितने भी URLs लिख सकते है. ऊपर दिया कोड इस प्रकार का परिणाम देगा:
7. आपने क्या सीखा?
इस Lesson में हमने आपको HTML Links के बारे में पूरी जानकारी दी है. आपने जाना है कि HTML Links क्या होती है? HTML Links कैसे बनाते है? Links के प्रकार, उपयोग आदि. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
0 Comments