HTML File Paths: Relative vs Absolute Path हिंदी में
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
जब भी आप किसी page, image या CSS file को link करते हैं, तो आप एक path लिखते हैं — उस file का पता। Path दो तरह के होते हैं: relative और absolute। इन्हें सही करना शुरुआती लोगों की सबसे आम समस्याओं में से एक है, इसलिए इसे ठीक से सीखना चाहिए।
सापेक्ष पथ (Relative Path)
Relative path बताता है कि file इस page से कहाँ है। अगर image उसी folder में है: src="photo.jpg"। किसी subfolder में है: src="images/photo.jpg"। Parent folder में है (एक level ऊपर): src="../photo.jpg"। हर ../ एक level ऊपर जाता है। अपनी website के अंदर relative path ही इस्तेमाल करने चाहिए — site किसी दूसरे domain पर ले जाने पर भी काम करती रहती है।
पूर्ण पथ (Absolute Path)
Absolute path पूरा पता होता है: https://kamaldnp.com/images/photo.jpg। इसे सिर्फ दूसरी websites की files के लिए इस्तेमाल करें। अपनी files के लिए कभी नहीं — अगर domain बदल जाए, तो हर link टूट जाएगा।
आम गलतियाँ
- गलत capital letters —
Photo.jpgऔरphoto.jpgLinux server पर अलग-अलग files हैं। File के नाम lowercase रखें। - File के नाम में space —
my photo.jpgपरेशानी करता है। Hyphen इस्तेमाल करें:my-photo.jpg। ../भूल जाना — folder के अंदर वाली page को main folder की file link करने के लिए पहले एक level ऊपर जाना होता है।
File path क्या है
File path किसी file का पता है, जो आपकी page की जगह के हिसाब से लिखा जाता है। यह browser को बताता है कि image, stylesheet या दूसरी page कहाँ मिलेगी। तीन तरह के path होते हैं: relative path (इस page से), root-relative path (site के सबसे ऊपर से), और absolute path (पूरा web address)।
याद रखने की तरकीब: दो बिंदु, एक slash — एक folder ऊपर, यही है रास्ता।
Syntax — path के उदाहरण
<!-- same folder as this page --> <img src="logo.png"> <!-- one folder down, inside "images" --> <img src="images/logo.png"> <!-- one folder up, then into "images" --> <img src="../images/logo.png"> <!-- from the top of the website --> <img src="/images/logo.png"> <!-- full web address --> <img src="https://kamaldnp.com/images/logo.png">
../ को "एक folder ऊपर जाओ" समझें। दो बिंदु, एक slash, मतलब एक level ऊपर। ../../ मतलब दो level ऊपर।
/ से शुरू होने वाला path website के सबसे ऊपर से शुरू होता है, आपके computer से नहीं। अपने computer पर /images/logo.png तब काम नहीं करेगा जब आप file को सीधे खोलते हैं — यह तभी काम करता है जब site server पर हो। अभ्यास के दौरान relative path ही इस्तेमाल करें।images folder में, CSS css folder में। जब folders साफ होते हैं, तो path छोटे और जाँचने में आसान रहते हैं।आम गलतियाँ
- गलत capital letters —
Images/logo.pngऔरimages/logo.pngserver पर अलग-अलग files हैं। - Page subfolder में हो तब
../भूल जाना — image 404 हो जाती है और page पर टूटा हुआ icon दिखता है। - अपनी ही images के लिए पूरा
https://address इस्तेमाल करना — अगर domain कभी बदल जाए, तो हर link टूट जाएगा। Relative path site के साथ चलते हैं। - File और folder के नाम में space — URL में space
%20बन जाती है और उसे गलत टाइप करना आसान होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>File Paths</title>
</head>
<body>
<img src="images/photo.jpg" alt="Photo in a subfolder">
<img src="../logo.png" alt="Logo in the parent folder">
<a href="about.html">About (same folder)</a>
<a href="https://kamaldnp.com">KAMALDNP (absolute)</a>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. रिलेटिव पाथ किसे कहते हैं?
रिलेटिव पाथ बताता है कि फ़ाइल इस पेज से कहाँ है, जैसे उसी फ़ोल्डर में photo.jpg या images फ़ोल्डर में images/photo.jpg।
2. दो बिंदु और स्लैश का क्या अर्थ है?
हर ../ एक फ़ोल्डर ऊपर जाने का संकेत है, इसलिए ../photo.jpg का अर्थ है एक स्तर ऊपर वाली फ़ाइल।
3. अपनी वेबसाइट के लिए एब्सोल्यूट पाथ क्यों नहीं लिखना चाहिए?
डोमेन बदलने पर हर लिंक टूट जाएगा, इसलिए अपनी साइट के अंदर रिलेटिव पाथ ही इस्तेमाल करना चाहिए।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
