लोड हो रहा है...

HTML फ़ाइल पथ

आप पहले से शीर्षक, पैराग्राफ़ और टिप्पणियों वाली पेज लिख सकते हैं। असली साइटें शायद ही कभी एक ही फ़ाइल में रहती हैं। छवियाँ, अन्य पेज, स्टाइलशीट और स्क्रिप्ट आपके HTML के पास फ़ोल्डरों में बैठती हैं — और HTML को सही ढंग से उनकी ओर इशारा करना होता है। ये इशारे फ़ाइल पथ हैं। अगर पथ गलत हो, तो फ़ाइल डिस्क पर मौजूद हो सकती है, फिर भी ब्राउज़र टूटी छवि या मृत लिंक दिखाता रहे। इसलिए यह विषय इतना व्यावहारिक है: इससे तय होता है कि रोज़मर्रा के रेफ़रेंस काम करते हैं या नहीं।

फ़ाइल पथ क्या है?

फ़ाइल पथ वह पता है जिससे ब्राउज़र कोई दूसरी फ़ाइल लाता है। आप आमतौर पर इसे src (छवियाँ, स्क्रिप्ट, मीडिया) और href (लिंक, स्टाइलशीट और कई संबंधित संसाधन) जैसे गुणों में लिखते हैं। पथ सजावट नहीं है। यह निर्देश है: «यहाँ देखो।» जब निर्देश गलत हो, अनुरोध असफल हो जाता है — भले ही मार्कअप टैग ठीक दिखें। पथों को रास्ते की तरह सोचें: गलत मोड़ खाली जगह ले जाता है, भले ही गंतव्य इमारत वाकई मौजूद हो।

सीधा उत्तर

जब लक्ष्य फ़ाइल आपके प्रोजेक्ट फ़ोल्डरों के साथ घूमती है तो सापेक्ष पथ उपयोग करें — उदाहरण के लिए उसी पैरेंट फ़ोल्डर के पेज से images/logo.png, या एक स्तर गहरे पेज से ../images/logo.png। जब साइट होस्टेड हो और हर पेज को साइट रूट से एक ही स्थिर पथ साझा करना हो तो / से शुरू होने वाला रूट-निरपेक्ष पथ उपयोग करें। जब फ़ाइल दूसरे होस्ट या CDN पर हो तो पूर्ण URL (https://…) उपयोग करें। शुरुआती लोगों को पहले सापेक्ष पथ मज़बूत करने चाहिए, क्योंकि स्थानीय अभ्यास फ़ोल्डर उन पर निर्भर करते हैं। निरपेक्ष पथ और URL बाद में स्वाभाविक रूप से आते हैं — लेकिन सुरक्षित सापेक्ष नेविगेशन के बिना हर सबफ़ोल्डर एक पहेली बन जाता है।

एक नज़र में सापेक्ष बनाम निरपेक्ष

📊 पथ प्रकारों की तुलना

प्रकार शुरू कहाँ से उदाहरण सबसे अच्छा कब
सापेक्ष वर्तमान HTML फ़ाइल का फ़ोल्डर images/photo.jpg प्रोजेक्ट फ़ाइलें फ़ोल्डरों में साथ चलती हैं
रूट-निरपेक्ष वेबसाइट रूट /images/photo.jpg एक होस्टेड साइट के कई पेजों को एक स्थिर पथ चाहिए
पूर्ण URL प्रोटोकॉल + डोमेन https://cdn.example.com/a.png फ़ाइल दूसरे होस्ट या CDN पर है

एक छोटा प्रोजेक्ट मैप

project नाम का फ़ोल्डर कल्पना करें। उसके अंदर आपके पास है:

  • index.html (होम पेज)
  • about.html (होम पेज वाले ही फ़ोल्डर में)
  • images फ़ोल्डर जिसमें logo.png है
  • pages फ़ोल्डर जिसमें contact.html है
    महत्वपूर्ण आदत यह है: src या href लिखने से पहले हमेशा पूछें कि आप कौन-सी HTML फ़ाइल संपादित कर रहे हैं। एक ही छवि को अलग-अलग पेजों से अलग सापेक्ष पथ चाहिए। जब आप दृष्टिकोण बदलते हैं — «कहाँ कहीं लोगो है?» के बजाय «किस फ़ाइल से?» — तब पथ रहस्यमय नहीं रहकर अनुमानित हो जाते हैं।

प्रोजेक्ट फ़ोल्डर से सापेक्ष पथ

index.html या about.html से images और pages चाइल्ड फ़ोल्डर हैं। उन तक पहुँचने के लिए ../ की जरूरत नहीं। ब्राउज़र वर्तमान HTML फ़ाइल के फ़ोल्डर से शुरू करता है और पथ के प्रत्येक खंड का चरण-दर-चरण अनुसरण करता है।

index.html से सापेक्ष पथ

html
HTML Code 
<img src="images/logo.png" alt="साइट लोगो">
<a href="pages/contact.html">संपर्क</a>
<a href="about.html">परिचय</a>

ये मान क्यों काम करते हैं

  • images/logo.png का मतलब है: «इस HTML के पास images फ़ोल्डर में जाओ, फिर logo.png खोलो»
  • pages/contact.html का मतलब है: «pages में जाओ, फिर contact.html खोलो»
  • about.html का मतलब है: «वर्तमान पेज वाले ही फ़ोल्डर में कोई और फ़ाइल»
  • alt टेक्स्ट पथ नहीं है; यह सुलभ टेक्स्ट है जब छवि दिखाई न दे
    अगर ब्राउज़र में लोगो गायब है, तो वर्तनी, असली फ़ोल्डर नाम, और यह जाँचें कि आपने HTML उसी फ़ोल्डर में सेव किया है जो आप सोचते हैं। एक अक्षर की गलती काफी है — और कुछ सर्वरों पर केस Logo.PNG और logo.png को अलग फ़ाइलें मानता है।

सबफ़ोल्डर से सापेक्ष पथ

contact.html pages/ के अंदर रहता है। वहाँ से images/ pages/ का चाइल्ड नहीं है। यह project/ के नीचे pages/ के बगल में बैठा है। आपको ../ से एक स्तर ऊपर चढ़ना होगा, फिर images/ में प्रवेश करना होगा। ठीक यही ज्यामिति — «नीचे» के बजाय «बगल में» — कई शुरुआती लोग तब भूल जाते हैं जब वे किसी पेज को सबफ़ोल्डर में ले जाते हैं।

pages/contact.html से सापेक्ष पथ

html
HTML Code 
<img src="../images/logo.png" alt="साइट लोगो">
<a href="../index.html">होम</a>
<a href="../about.html">परिचय</a>

../ पढ़ना

  • ../ का मतलब है: «पैरेंट फ़ोल्डर तक ऊपर जाओ»
  • ../images/logo.png का मतलब है: «project/ तक ऊपर जाओ, फिर images/logo.png में प्रवेश करो»
  • ../index.html का मतलब है: «project/ तक ऊपर जाओ, फिर index.html खोलो»
  • contact.html से images/logo.png लिखना pages/images/logo.png खोजता है, जो इस मैप में मौजूद नहीं
    यही एक गलती — सबफ़ोल्डर से ../ भूल जाना — शुरुआती प्रोजेक्टों में «टूटी छवि» रिपोर्टों का बड़ा हिस्सा बनाती है। अगर किसी पेज को स्थानांतरित करने के बाद छवि अचानक टूटे, पहले जाँचें कि क्या आपको एक स्तर ऊपर जाना है।

रूट-निरपेक्ष पथ और पूर्ण URL

रूट-निरपेक्ष पथ / से शुरू होता है और वास्तविक वेब सर्वर पर साइट रूट से हल होता है, वर्तमान फ़ोल्डर से नहीं। पूर्ण URL में प्रोटोकॉल और डोमेन शामिल होते हैं। तृतीय-पक्ष फ़ाइलों के लिए पूर्ण URL सामान्य हैं। होस्टेड साइटों पर रूट-निरपेक्ष पथ तब उपयोगी होते हैं जब कई पेजों को एक स्थिर पथ साझा करना हो।

रूट पथ और पूर्ण URL

html
HTML Code 
<img src="/images/logo.png" alt="साइट लोगो">
<img src="https://example.com/images/logo.png" alt="साइट लोगो">
<link rel="stylesheet" href="/styles/main.css">

स्थानीय फ़ाइलें बनाम होस्टेड रूट

जब आप HTML को सीधे डिस्क से खोलते हैं (file://…), अक्सर कोई असली वेबसाइट रूट नहीं होता। /images/logo.png जैसा पथ आपके कंप्यूटर फ़ोल्डर से उसी तरह मेल नहीं खा सकता जैसे सर्वर पर मेल खाएगा। स्थानीय शुरुआती अभ्यास के लिए वास्तविक फ़ोल्डरों से मेल खाने वाले सापेक्ष पथ प्राथमिकता दें। होस्टिंग के बाद रूट-निरपेक्ष पथ पेजों के बीच अधिक विश्वसनीय हो जाते हैं — क्योंकि सर्वर को स्पष्ट रूट पता होता है। तब तक सापेक्ष नेविगेशन निराशा और अनुमान से बचाता है।

अभ्यास: फ़ोल्डर मैप से पथ

फ़ोल्डर shop में है:

  • home.html
  • assets फ़ोल्डर जिसमें hero.jpg है
  • help फ़ोल्डर जिसमें faq.html है
    अपने एडिटर में यह करें:
  1. home.html में एक img जोड़ें जो सापेक्ष पथ से hero.jpg लोड करे।
  2. help/faq.html में एक img जोड़ें जो ../ से वही फ़ाइल लोड करे।
  3. faq.html से home.html तक सापेक्ष लिंक बनाएँ।
  4. दोनों पेज ब्राउज़र में खोलें और छवि व लिंक की पुष्टि करें।
  5. जानबूझकर एक पथ तोड़ें, रिफ़्रेश करें, विफलता देखें, फिर ठीक करें — यह प्रतिक्रिया केवल पढ़ने से तेज़ आँख को प्रशिक्षित करती है।
    इस मैप के अपेक्षित सापेक्ष उत्तर: home.html से assets/hero.jpg; faq.html से ../assets/hero.jpg और ../home.html। किसी और पेज की याद से पथ न लिखें — हमेशा उस फ़ाइल के स्थान से निर्णय लें जिसे आप संपादित कर रहे हैं।

पथ की गलतियाँ जो पेज तोड़ती हैं

  • सबफ़ोल्डर से images/logo.png लिखना जब सही पथ को ../images/logo.png चाहिए
  • फ़ाइल या फ़ोल्डर नाम गलत लिखना, या केस न मिलाना — उन होस्ट पर जहाँ Logo.PNG और logo.png अलग फ़ाइलें मानी जाती हैं
  • वेब पथों में Windows \ उपयोग करना — HTML गुणों में / प्राथमिकता दें
  • सामान्य वेब पेज के src या href में C:\site\img.png जैसा डिस्क पथ रखना
  • केवल स्थानीय फ़ाइल के रूप में खोले गए प्रोजेक्ट में रूट पथ /images/... कॉपी करना और होस्टेड साइट जैसा व्यवहार मान लेना
  • contact.html से लिंक करना जबकि फ़ाइल वास्तव में pages/contact.html पर है
  • Explorer/Finder में फ़ोल्डर बदलना लेकिन पुराने लेआउट की ओर इशारा करने वाले हर पथ को अपडेट न करना
    इनमें से हर गलती तब तक «रहस्यमय» लगती है जब तक आप फ़ोल्डर मैप और वर्तमान फ़ाइल के शुरुआती बिंदु को जानबूझकर जाँचते नहीं। फिर विफलता अक्सर कुछ सेकंड में दिख जाती है।

सारांश

  • फ़ाइल पथ ब्राउज़र को बताते हैं कि src, href और समान गुणों के लिए जुड़ी फ़ाइलें कहाँ हैं
  • सापेक्ष पथ वर्तमान HTML फ़ाइल के फ़ोल्डर से हल होते हैं
  • सापेक्ष पथ में ../ एक फ़ोल्डर ऊपर चढ़ता है; जब लक्ष्य वर्तमान फ़ाइल के ऊपर हो तो इसका उपयोग करें
  • रूट-निरपेक्ष पथ / से शुरू होते हैं; पूर्ण URL में प्रोटोकॉल और डोमेन होते हैं
  • पथ शैली को अपने लेआउट से मिलाएँ: स्थानीय प्रोजेक्ट अभ्यास के लिए सापेक्ष, होस्टिंग मॉडल की जरूरत पर रूट/URL
  • टूटे पथ छवियों और लिंक के «रहस्यमय» असफल होने के सबसे आम कारणों में से हैं
  • पथ हमेशा उसी फ़ाइल से तय करें जिसे आप संपादित कर रहे हैं, किसी और पेज की याद से नहीं

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
7
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
Html ट्यूटोरियल