Introduction of anchor tag in html in hindi
दोस्तो, एक page से दूसरे page पर जाने वाले हिस्से को हम web page मे link कहते है। इसे Hyperlinks भी कहा जाता है।
Hyperlinks किसी भी image या text पर होता है। आप इस लिंक को क्लिक करके दूसरे webpage या document पर चले जाते है।
HTML Links – Syntax
HTML मे link बनाने के लिए <a> tag का इस्तेमाल करते है जिसे anchor tag कहते है।
अगर किसी text को link देना है तो हम इसे <a> और </a> के बीच मे लिखते है। और href attribute का इस्तेमाल करते है।
HTML link का syntax नीचे दिया है।
<a href=”URL”> Link Text </a>
उदाहरण
<!DOCTYPE html> <html> <body> <h2>HTML Links</h2> <p>anchor tag in HTML</p> <p><a href="https://megatechbook.com/">Visit our website</a></p> </body> </html>
यहा href attribute मे हम web address को लिखते है। अगर हम link text पर click करेंगे तो web address का page open होगा।
target Attribute
यह attribute के द्वारा browser को बताया जाता है की destination address को कहा खोलना है।
target attribute मे हम नीचे दी गई value को लिख सकते है।
- _blank – यह value url को new tab /window मे open करती है।
- _self – यह value url को same tab /window मे open करती है, जिस window / tab पर आपने url को click किया है।
- _parent – यह value url को parent frame मे open करती है।
- _top – यह value url को पूरी window मे open करती है।
- framename – link किये गये दस्तावेज़ को named frame मे open करता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h2>HTML Links</h2> <p>anchor tag in HTML</p> <p><a href="https://megatechbook.com/" target="_blank">Visit our website</a></p> </body> </html>
<!DOCTYPE html> <html> <body> <h2>HTML Links</h2> <p>anchor tag in HTML</p> <p><a href="https://megatechbook.com/" target="_top">Visit our website</a></p> </body> </html>
HTML Images as a Links
image को as a link इस्तेमाल करने के लिए <a> tag का इस्तेमाल होता है। अगर आप image पर click करेंगे तो आपने जो link add किया है वो open होगा।
उदाहरण
<!DOCTYPE html> <html> <body> <p>The image is a link. You can click on it.</p> <a href="https://megatechbook.com/"> <img src = "C:\Users\PC\Desktop\Megatechbook.jpg" alt = "Megatechbook Image logo" > </a> </body> </html>
अगर आप image पर click करेंगे तो आपने जो link add किया है वो open होगा।
HTML base tag
जब आप किसी website के web page मे संबधित website का लिंक बनाते है तब आपको बार बार पूरे link के url को लिखना पड़ता है। इससे छुटकारा पाने के लिए हम <base> tag का इस्तेमाल करते है।
<base> tag को हम header section मे define करते है। और इसके relative link को bady section मे लिखा जाता है।
उदाहरण
<!DOCTYPE html> <html> <head> <title>HTML Base Path Example</title> <base href="https://megatechbook.com/"> </head> <body> <a href="/about-us">Know About Us</a> </body> </html>
यहा हमने base tag मे website का url: https://megatechbook.com/ को add कर दिया है। अब आपको body section मे सिर्फ /about-us लिखना पड़ेगा। यहा आपको पूरा url जैसे की https://megatechbook.com/about-us लिखने की जरूरत नहीं है।
HTML Link का प्रकार
HTML link का विभिन्न प्रकार है। जैसे की
- Internal Link
- External Link
- Download Link
- E-mail Link
Internal Link – internal link मे एक website का दूसरा url होता है ।इस पर click करके आप एक ही website के दूसरे page पर चले जाते है।
External Link – External link पर click करके आप दूसरी website के page पर चले जाते है।
Download Link – इस प्रकार की link उपयोग विभिन्न फाइलों को downloadable बनाने के लिए करते है। इस लिए आपको download attribute को जोड़ना पड़ेगा।
E-mail Link – आप email link भी बना सकते है। इसलिए आपको href attribute मे email address को लिखना पड़ेगा। जैसे की
<a href=”mailto:megatechbook@gmail.com”>Mail Us</a>
तो उम्मीद करता हु दोस्तो की आपको anchor tag के बारे मे पता चल गया होगा। लेकिन अभी भी कोई सवाल हो तो आप हमे comment कर सकते है।
Next: HTML list in Hindi