Theory
Island की समस्या
कल्पना कीजिए आपने अपने college portfolio के लिए तीन ख़ूबसूरत pages code किए हैं: एक index page, एक projects page, और एक contact page। अभी, वे एक folder में Indian Ocean में अलग-थलग islands की तरह बैठे हैं। आपका introduction पढ़ता एक visitor आपके projects देखने या आपके form में एक message छोड़ने के लिए कूदने का कोई तरीक़ा नहीं रखता। वे फँसे हैं। हम इन अलग files के बीच digital पुल कैसे बनाएँ, या आपके page के अंदर एक interactive map दिखाने के लिए एक live window भी कैसे खोलें?
Theory
Wormholes और Picture Frames
web connections को तीन तरीक़ों से सोचिए। एक hyperlink एक जादुई portal gun की तरह है: इसे click कीजिए, और आप तुरंत एक पूरी तरह नए कमरे या एक अलग website में transport हो जाते हैं। एक bookmark एक अकेली, बहुत लंबी textbook के अंदर एक रंगीन sticky note जैसा है: यह आपको pages scroll किए बिना सीधे Chapter 3 पर पलटने देता है। एक iframe आपके living room की wall में एक छेद काटने और एक neighbor के घर के अंदर दिखाती एक glass window लगाने जैसा है: आप अपने कमरे में रहते हैं, पर आप उनका content live देखते हैं।
Theory
Links, Bookmarks, और Frames
web architecture में, cross-connections ख़ास tags द्वारा manage होते हैं:
- एक hyperlink
<a>(anchor) tag औरhref(hypertext reference) attribute इस्तेमाल करके एक URL या file की ओर point करके documents जोड़ता है।
- एक bookmark एक internal hyperlink है जो अपने
idattribute इस्तेमाल करके एक ही page पर एक ख़ास element को target करता है, एक hash symbol (#) से prefix किया।
- एक iframe (inline frame)
<iframe>tag औरsrcattribute इस्तेमाल करके आपके मौजूदा page layout के अंदर एक पूरा स्वतंत्र HTML document embed करता है।
At a glance
HTML linking और embedding mechanisms की तुलना।
| Connection Type | Primary Tag | Key Attribute | Navigation Flow |
|---|---|---|---|
| Hyperlink | <a> | href="url" | एक पूरी तरह नए webpage या external site पर navigate करता है। |
| Bookmark | <a> | href="#id" | उसी page पर एक ख़ास section पर लंबवत कूदता है। |
| iframe | <iframe> | src="url" | एक live external document को सीधे मौजूदा layout के अंदर embed करता है। |
Practical
पूर्ण Portfolio Navigation Page
<body>
<nav>
<a href="projects.html">View Projects</a> |
<a href="#contact-section">Jump to Contact</a>
</nav>
<hr>
<section>
<h1>Welcome to My Site</h1>
<p>I am a student builder.</p>
</section>
<!-- Tall spacer so the bookmark jump is visible -->
<div style="height: 600px;"></div>
<section id="contact-section">
<h2>Contact Me</h2>
<p>Direct campus location:</p>
<iframe src="map.html" width="100%" height="200"></iframe>
</section>
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
आप id="syllabus" चिह्नित एक section पर कूदने के लिए एक internal bookmark link लिख रहे हैं। आपकी university exam के लिए कौन सा anchor tag setup syntax की दृष्टि से सही है?
- <a href="syllabus">Go to Syllabus</a>
- <a href="#syllabus">Go to Syllabus</a>
- <a id="#syllabus">Go to Syllabus</a>
- <a src="#syllabus">Go to Syllabus</a>
Show the answer
<a href="#syllabus">Go to Syllabus</a>
एक internal element id को target करने के लिए, href attribute में एक अग्रणी hash symbol (#) शामिल होना चाहिए। Option 0 syllabus नाम की एक external file खोजता है। Option 2 hash को link के ख़ुद के id attribute के अंदर डालता है। Option 3 ग़लत तरह src attribute इस्तेमाल करता है, जो iframes या images का है, anchor tags का नहीं।
Think first
Frame Target Behavior का अनुमान
मन में अनुमान कीजिए क्या होता है अगर आप <a href="projects.html" target="_blank"> जैसे एक anchor tag के अंदर target="_blank" जोड़ते हैं। यह browser behavior को कैसे बदलता है? tap करने से पहले सोचिए।
Show the answer
browser projects page को मौजूदा active tab के अंदर load करने के बजाय एक बिल्कुल नए tab या window में खोलेगा। यह recruiters को आपके primary portfolio page से दूर भगाए बिना external college portals या social profiles से link करने के लिए अविश्वसनीय रूप से उपयोगी है।
Watch out
अदृश्य गुमशुदा Hash का जाल
lab practicals में students द्वारा की गई एक विनाशकारी error internal links लिखते समय hash symbol (#) भूलना है। अगर आप href="footer" लिखते हैं, browser सोचता है आप अपनी local directory में footer नाम की एक अलग page file खोज रहे हैं, एक दर्दनाक 404 Not Found error में परिणत होते हुए। हमेशा पक्का कीजिए कि आपका link href="#footer" इस्तेमाल करता है जबकि destination block बिल्कुल id="footer" इस्तेमाल करता है id string के अंदर किसी hash symbol बिना!
Formula
Linking और Embedding Questions का Formula
जब एक exam question आपसे hyperlinks और iframes समझाने को कहे, पूर्ण marks के लिए ये अलग points लिखिए:
- 1. Hyperlink: anchor tag परिभाषित कीजिए, href attribute समझाइए, और एक external link example दीजिए।
- 2. Bookmark: विस्तार से बताइए कि internal navigation कैसे href="#name" और id="name" रखते एक destination element के बीच एक जोड़ी पर निर्भर करता है।
- 3. iframe: inline frames को एक embedding window के रूप में समझाइए, mandatory src, width, और height attributes नोट करते हुए एक छोटे sample snippet के साथ।
Summary
Key takeaways
- Anchor tags नए webpages से external connections बनाने के लिए href attribute इस्तेमाल करते हैं।
- Internal bookmarks element id attributes को target करके एक अकेले page पर तेज़ लंबवत कूदने देते हैं।
- Internal bookmarking काम करने के लिए href attribute में एक अग्रणी hash symbol अनिवार्य है।
- iframe tag आपकी grid के अंदर external web documents दिखाने के लिए एक अलग nested window बनाता है।
- सही दिखने के लिए Iframes को width और height attributes के साथ एक valid src attribute चाहिए।
- Memory Hook: Anchors समुद्र पार पुल बनाते हैं, hashes locally कूदते हैं, frames आपके और मेरे लिए embed करते हैं।