🧱 Days 1–5 – HTML की नींव · दिन 03
दिन 3: Links, Paths और Navigation Menus
⏱ 75 min📶 Beginner🎯 100% self-study
दिन 3 / 15
✅ आज आप सीखेंगे
- <a> tag और href
- Absolute vs relative paths (../ समझाया)
- rel="noopener" के साथ target="_blank"
- id anchors से jump links
- tel:, mailto:, WhatsApp और download links, और nav menu
🏢 असली दुनिया में
Customers number पर tap करके call करना, WhatsApp पर order करना और सीधे menu पर पहुँचना चाहते हैं। Sharma Sweets के अब तीन pages होंगे – Home, Menu और Contact – navigation bar से जुड़े। Links ही pages के समूह को website बनाते हैं।
Anchor tag
HTML
<p>Order online on <a href="https://www.swiggy.com">Swiggy</a>.</p> <p>Read our <a href="https://example.com/about" title="Our 40-year story">story</a> (hover me).</p>
Absolute vs relative paths
Folder structure
sharma-sweets/
├── index.html
├── menu.html
├── contact.html
├── images/
│ └── logo.png
└── offers/
└── diwali.html| इस file से | इस पर link | href लिखें |
|---|---|---|
| index.html | menu.html | menu.html |
| index.html | offers/diwali.html | offers/diwali.html |
| offers/diwali.html | index.html | ../index.html |
| offers/diwali.html | images/logo.png | ../images/logo.png |
| कोई भी page | site root page | /menu.html (root-relative, server पर) |
| कोई भी page | दूसरी website | https://www.zomato.com (absolute) |
💡 ../ मतलब “एक folder ऊपर जाओ”
पूरा folder server या pen drive पर ले जाने पर भी relative links काम करते रहते हैं। Absolute URLs सिर्फ़ दूसरी websites के लिए लें।
नए tab में खोलना – सुरक्षित तरीके से
HTML
<p><a href="https://maps.google.com/?q=Johari+Bazaar+Jaipur" target="_blank" rel="noopener noreferrer">Open in Google Maps ↗</a></p> <p><small>Use target="_blank" only for external sites, and add rel="noopener".</small></p>
Page के अंदर jump links
HTML
<p><a href="#ghee">Ghee sweets</a> · <a href="#namkeen">Namkeen</a></p> <h2 id="ghee">Ghee sweets</h2> <p>Kaju katli, besan ladoo, motichoor ladoo, ghewar, mysore pak.</p> <p style="height:120px">(scroll)</p> <h2 id="namkeen">Namkeen</h2> <p>Bhujia, mathri, kachori. <a href="#top">Back to top ↑</a></p>
Call, e-mail, WhatsApp और download links
HTML
<p>📞 <a href="tel:+919829012345">Call 98290 12345</a></p> <p>✉️ <a href="mailto:orders@sharmasweets.in?subject=Bulk%20order">orders@sharmasweets.in</a></p> <p>💬 <a href="https://wa.me/919829012345?text=Hi%2C%20I%20want%20to%20order%20sweets">Order on WhatsApp</a></p> <p>📄 <a href="menu.pdf" download>Download menu (PDF)</a></p>
| Link | Phone पर क्या करता है |
|---|---|
| tel:+91… | Number के साथ dialler खोलता है |
| mailto:…?subject=… | Subject भरकर e-mail app खोलता है |
| https://wa.me/91…?text=… | तैयार message के साथ WhatsApp chat खोलता है |
| download | File खोलने की जगह save करता है |
🧠 URL encoding
Link में spaces और commas encode करने होते हैं: space = %20, comma = %2C। इसीलिए code में WhatsApp text अजीब दिखता है।
Navigation menu
HTML
<nav aria-label="Main"> <a href="index.html" aria-current="page">Home</a> | <a href="menu.html">Menu</a> | <a href="contact.html">Contact</a> | <a href="https://wa.me/919829012345">Order on WhatsApp</a> </nav> <h1>Sharma Sweets</h1>
अच्छा link text लिखना
ख़राब
- Click here
- Read more
- https://bit.ly/x9k2
- Link
अच्छा
- Diwali menu download करें (PDF, 1 MB)
- हमारी 40 साल की कहानी पढ़ें
- WhatsApp पर order करें
- 98290 12345 पर call करें
🏅 आज के Job Skills
✔ Internal और external links बनाना✔ सही relative paths लिखना✔ Jump, tel, mailto, WhatsApp और download links जोड़ना✔ Accessible nav menu बनाना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1:
menu.html और contact.html बनाएँ, दोनों में तीनों pages को जोड़ने वाला वही nav menu।Solution देखें
HTML
<nav aria-label="Main"> <a href="index.html">Home</a> | <a href="menu.html" aria-current="page">Menu</a> | <a href="contact.html">Contact</a> </nav> <h1>Our Menu</h1> <p><a href="#milk">Milk sweets</a> · <a href="#dry">Dry fruit sweets</a></p> <h2 id="milk">Milk sweets</h2><p>Rasmalai, kalakand, peda.</p> <h2 id="dry">Dry fruit sweets</h2><p>Kaju katli, badam barfi.</p>
Task 2:
offers/diwali.html से contact.html और images/logo.png के links लिखें।Solution देखें
HTML
<a href="../contact.html">Contact us</a> <a href="../images/logo.png">See our logo</a>
Task 3: ऐसा WhatsApp link बनाएँ जो “Need 2 kg kaju katli for Saturday” message के साथ chat खोले।
Solution देखें
HTML
<a href="https://wa.me/919829012345?text=Need%202%20kg%20kaju%20katli%20for%20Saturday">Order kaju katli</a>
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Link का पता कौन सा attribute रखता है?
Hypertext reference।
2. /offers/diwali.html से ../index.html कहाँ जाता है?
.. = parent folder।
3. href="#menu" कहाँ jump करता है?
Fragment identifier।
4. target="_blank" के साथ rel="noopener" क्यों?
Reverse tab-nabbing रोकता है।
5. सबसे अच्छा link text?
मंज़िल बताता है।
Interview corner
💼 Interview Corner
Absolute vs relative URL?
Absolute URL में protocol और domain होता है (https://site.com/page)। Relative URL मौजूदा page की जगह से निकाला जाता है (../page.html) – एक site के अंदर portable।
aria-current="page" क्या करता है?
यह assistive technologies को बताता है कि navigation का कौन सा link मौजूदा page है; CSS इसे style भी कर सकता है।
सारांश
- <a href> pages जोड़ता है; अपनी site में relative paths लें।
- ../ एक folder ऊपर; #id page के अंदर jump।
- tel:, mailto:, wa.me और download action links बनाते हैं।
- साफ़ link text और aria-current वाला nav उपयोगिता बढ़ाते हैं।
➡️ आगे
Day 4: images, audio, video और embeds – मिठाइयों की photos, दुकान का video और map जोड़ें।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या सभी links नए tab में खुलें?
नहीं। Internal links उसी tab में खुलें; users ख़ुद नया tab चुन सकते हैं। नए tab मुख्य रूप से external sites या files के लिए।
मेरा link computer पर चलता है पर online नहीं, क्यों?
आमतौर पर path या capital letters की गड़बड़ी: servers case-sensitive होते हैं (Menu.html ≠ menu.html) और C:\ paths online नहीं होते।
