HTML Anchor Tag in Hindi

Friends, आप इस chapter के जरिये सिखने वाले है – How to create a hyperlink in html

How to create a hyperlink in HTML

A link or hyperlink, एक web resource से दूसरे web resource का connection हैं | Link, user को world में कही भी किसी भी server पर एक web page से दूसरे web page पर move करने की अनुमति देता हैं।

एक link के पास two ends होते हैं , जिन्हे हम anchors कहते है | Link, source anchor से सुरु होता है और destination anchor तरफ निर्देश करता हैं | जो कोई भी web resource हो सकता है – जैसे की an audio or video clip, a PDF file, an image, an HTML document या document के भीतर HTML element और इसी तरह…

By default ज्यादातर web browser में निचे दिए गए sample की तरह link दिखाई देंगे |

• unvisited link में underline के साथ font का color blue होता हैं |
• visited link में underline के साथ font का color purple होता हैं |
• active link में underline के साथ font का color red होता हैं |

हालाँकि, आप इसे css का use करके overwrite कर सकते है |

HTML anchor tag syntax

HTML में <a> tag का उपयोग करके link को specified किया जाता है | एक link या hyperlink – शब्द, शब्दों का group या image हो सकता है |

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

Opening tag <a> और closing tag </a> में दिया गया कुछ भी उस link का parts बन जाता है जिसे user web browser में देखता हैं और click करता है |

यहाँ links के कुछ examples दिए गए है |

<a href="https://techsamundra.com/">Tech Samundra</a>
<a href="https://techsamundra.com/wp-content/uploads/2019/07/full-logo-png.png">
 <img src="https://techsamundra.com/wp-content/uploads/2019/07/full-logo-png.png" alt="Tech Samundra Logo">
</a>

Output

href attribute link के target को specifies करता है | इसकी value absolute url या relative url हो सकती है |

Absolute url वह url है जिसमे url format के सभी part include हो जैसे की protocol, host name, और document का path. for example – https://techsamundra.com/ https://techsamundra.com/html5-tutorial/ etc.

जबकि relavite url, page-relative paths होते है | for example – about.html, images/logo.png etc.

Relavite url में कभी भी http:// या https:// prefix का use नहीं होता हैं |

Link के लिए target निर्धारित करना |

Target attribute, web browser को बताता हैं की linked document को कहा open करना है | यह four defined किये गए targets है और प्रत्येक target का नाम underscore (_) character से start होता है |

• _blank – link किए गए document को एक new window या tab में खोलता है।
• _parent – link किए गए document को parent window में खोलता है।
• _self – link किए गए document को source document की तरह same window या tab में open करता है | यह link की default target value है इसलिए इस value को link define करते time specify करना आवश्यक नहीं है |
• _top – link किए गए document को full brower window में खोलता है।

How to specify target value in a href tag

link target को href tag में किस तरह specify किया जाता है इसे समझने के लिए निचे दिए गए examples को देखे |

<a href="/about-us.php" target="_self">About Us</a>
<a href="https://www.techsamundra.com/" target="_blank">Tech Samundra</a>
<a href="images/logo.jpg" target="_parent">
    <img src="logo.jpg" alt="Tech Samundra">
</a>
<a href="/contact-us.php" target="_top">Contact Us</a>

Tip: यदि आप का web page एक iframe के अंदर place किया हुआ है तो आप iframe से बहार निकल ने के लिए link पर target="_top" set कर सकते है और target page को full browser window में दिखा सकते है |

Bookmark Anchors create करना |

आप bookmark anchor भी create सकते हैं ताकि user web page के specific section पर jump कर सके | यदि आपके पास बहुत लंबा web page है तो bookmarks विशेष रूप से सहायक होते हैं।

HTML में bookmark को two steps में create किया जाता है | first web page में जहा आप jump करना चाहते है उस element पर id attribute add करे | फिर उस id attribute value का उपयोग , <a> tag के href attribute की value में hash sign (#) के रूप में करे | जैसे की निम्नलिखित उदाहरण में दिखाया गया है |

<a href="#SectionA">Jump to Section A</a>
<h2 id="SectionA">Section A</h2>
<p>This is expample paragraph only......</p>

Tip: आप href attribute में anchor (i.e. : #elementId) के साथ उस web page के url को specify करके दूसरे page के section पर भी jump कर सकते है | For example : <a href="testpage.html#topicA">Go to TopicA</a>.

HTML Email Link

href tag, email send करने के लिए email address specify करने का option भी provide करता हैं | <a> tag को email tag की तरह use करते समय href attribute के साथ mailto: email address use किया जाता है | mailto का उपयोग करने का syntex निचे दिया गया है |

href mailto sysntex

<a href="mailto: [email protected]">Send Email</a>

Output

Download link create करना |

आप ठीक text link की तरह ही file download link भी create कर सकते है | just आप जिस file को download कराना चाहते हो उस file पर destination URL point करे |

निम्नलिखित example में हमने zip, pdf और jpg files के लिए download link बनाए हैं।

<a href="downloads/sample1.zip">Download Zip file</a>
<a href="downloads/sample2.pdf">Download PDF file</a>
<a href="downloads/sample3.jpg">Download Image file</a>

Note : जब आप pdf या image file पर point की गयी link पर click करते है तो file सीधे आपकी hard-drive पर download नहीं होती है। यह फाइल केवल आपके web browser में ही खुलेगा | file web broweser में open होने के बाद आप इसे अपने hard-drive में store करने के लिए save या download कर सकते है |