Theory
एक click और वे चले गए
FestConnect का home page events list करता है। हर नाम उस event के page से link करता है, और एक footer main college website से link करता है। एक student 'Robotics' पर click करता है, इसे पढ़ता है, back दबाता है, address check करने के लिए college link पर click करता है, और अब fest tab college site से replace हो जाता है। वे register करने वापस कभी नहीं आते।
Link tag पर दो छोटे decisions इसे fix करते हैं: यह कहाँ point करता है (href) और यह कहाँ खुलता है (target)।
Theory
एक address और एक दरवाज़ा
एक link दो settings वाला एक signpost है।
Address (href) या तो एक पूरा postal address है जो कहीं से भी काम करे (absolute), या 'बगल वाला room' directions है जो सिर्फ़ यहाँ से ही समझ आती हैं (relative)।
दरवाज़ा (target) तय करता है signpost destination को उसी room में खोलता है जिसमें आप खड़े हैं (_self) या एक बिल्कुल नए room में इसे intact छोड़ते हुए (_blank)।
Theory
href: absolute बनाम relative
href attribute destination रखता है:
- Absolute URL: पूरा address,
https://college.edu/index.html। इसे दूसरी site point करने के लिए इस्तेमाल कीजिए। - Relative URL: current page से एक path, जैसे
dance.html(same folder),events/dance.html(subfolder), या../index.html(एक folder ऊपर)। इसे अपनी ही site के अंदर point करने के लिए इस्तेमाल कीजिए।
Relative links site के साथ move करते हैं: पूरा folder zip कीजिए, इसे एक server पर upload कीजिए, और वे फिर भी काम करते हैं, क्योंकि वे कभी domain mention नहीं करते।
Practical
FestConnect links
<!-- relative: another page in our own site, opens in same tab -->
<a href="events/dance.html">Dance Night</a>
<!-- relative, up one folder then into home -->
<a href="../index.html">Back to Fest Home</a>
<!-- absolute: an outside site, open a NEW tab so we keep FestConnect -->
<a href="https://college.edu" target="_blank" rel="noopener noreferrer">
College Website
</a>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
चार target values
| target | Link को इसमें खोलता है |
|---|---|
| _self | same tab (यह default है) |
| _blank | एक नया tab या window |
| _parent | parent frame (framesets/iframes के अंदर) |
| _top | पूरी window, सभी frames से बाहर निकलते हुए |
Think first
Same tab या नया?
Outside 'College Website' link के लिए आप चाहते हैं FestConnect tab बचा रहे। Internal 'Dance Night' link के लिए आप normal navigation चाहते हैं। हर एक को कौन सा target चाहिए, और कौन सा default है जिसे आप छोड़ सकते हैं?
Show the answer
'College Website' को target="_blank" चाहिए ताकि यह नए tab में खुले और FestConnect open छोड़ दे। 'Dance Night' को _self चाहिए, जो default है, तो आप कोई target लिखते ही नहीं। Rule of thumb: external links को _blank मिलता है; internal navigation _self रहती है।
Quiz
आप पूरा FestConnect folder college server पर एक नए domain के नीचे move करते हैं। कौन से links बिना किसी edit के काम करते रहते हैं?
- Relative वाले (dance.html, ../index.html)
- आपके पुराने domain को point करने वाले absolute वाले
- सिर्फ़ वे links जो target="_blank" इस्तेमाल करते हैं
- कोई नहीं: move के बाद हर link फिर से लिखना पड़ता है
Show the answer
Relative वाले (dance.html, ../index.html)
Relative URLs आपके अपने folder के अंदर paths describe करती हैं, तो वे किसी भी move से बच जाती हैं (A)। पुराने domain को नाम देने वाली Absolute URLs (B) अब ग़लत जगह point करती हैं। target (C) यह control करता है link कहाँ खुलता है, यह काम करता है या नहीं नहीं। तो एक move सब कुछ नहीं तोड़ती (D), सिर्फ़ absolute self-links, यही वजह है आप अपने पेजेज़ के लिए relative URLs पसंद करते हैं।
Watch out
Examiners जो traps लगाते हैं
1. Default target `_self` है, _blank नहीं। अगर एक question बिना target वाला link दिखाता है और पूछता है कहाँ खुलता है, answer same tab है।
2. _parent और _top सिर्फ़ frames/iframes के अंदर matter करते हैं। एक normal page पर वे _self जैसे behave करते हैं। यह मत कहिए _top 'हमेशा एक नया tab खोलता है', ऐसा नहीं है।
3. जब आप _blank इस्तेमाल करें, rel="noopener noreferrer" जोड़िए: यह नए page को आपके page से छेड़छाड़ करने से रोकता है। यह एक असली security habit है जो examiners अब ज़्यादा expect करते हैं।
Theory
आप form को भी यहीं link करेंगे
कुछ lessons बाद registration <form> अपना data इसके action attribute में बताए गए page पर भेजेगा, और वह path वही absolute-बनाम-relative rule follow करता है जो आपने अभी सीखा। अभी relative paths से comfortable होना forms, images (src), और stylesheets (<link> पर href) में आगे काम आता है, जो सब files को इसी तरह point करते हैं।
Summary
Key takeaways
- <a href="..."> destination रखता है; target attribute रखता है यह कहाँ खुलता है।
- Absolute URL = दूसरी sites के लिए पूरा address (https://...); relative URL = अपनी site के अंदर एक path (dance.html, ../index.html)।
- Relative links site move होने से बच जाती हैं; absolute self-links domain बदलने पर टूट जाती हैं।
- target: _self (same tab, default), _blank (new tab), _parent और _top (सिर्फ़ frames में meaningful)।
- Safety के लिए target="_blank" को rel="noopener noreferrer" के साथ pair कीजिए।
- Memory hook: एक address (href) और एक दरवाज़ा (target)।