HTML फ़ाइल पथ
In this page:
<img src="folder/file.ext">
<img src="/folder/file.ext">
<img src="../file.ext">
<img src="https://domain.com/file.ext">Relative Paths - एक जैसी Directory
जब HTML फ़ाइल और वह asset जिसे आप load करना चाहते हैं, दोनों एक ही फ़ोल्डर में स्थित हों, तो आपको किसी भी फ़ोल्डर नाम या slashes लिखने की जरूरत नहीं है। आप सीधे filename को reference कर देते हैं।
उदाहरण: Relative Paths - Same Directory
<img src="photo.jpg" alt="Photo">Relative Paths - Subfolders में नीचे जाना
व्यवस्थित web projects में, assets आमतौर पर images या css जैसे subfolders में sort किए जाते हैं। इन्हें target करने के लिए, आप subfolder का नाम, उसके बाद एक forward slash, और फिर filename लिखते हैं।
उदाहरण: Relative Paths - Down into Subfolders
<img src="images/photo.jpg" alt="Photo">Relative Paths - Parent Folders में ऊपर जाना
अगर आपकी HTML फ़ाइल किसी nested subfolder के अंदर है और उसे directory hierarchy में एक स्तर ऊपर स्थित किसी asset को load करना है, तो आप browser को मौजूदा फ़ोल्डर से बाहर निकलने के लिए एक double dot sequence (../) इस्तेमाल करते हैं।
उदाहरण: Relative Paths - Up into Parent Folders
<img src="../images/photo.jpg" alt="Photo">Absolute File Paths
एक absolute path एक पूरा, global web address होता है जिसमें secure domain name और protocol शामिल होता है। यह internet पर किसी fixed location को point करता है, जिससे आप दुनिया में कहीं भी hosted assets को load कर सकते हैं।
उदाहरण: Absolute File Paths
<img src="https://example.com/images/photo.jpg" alt="Photo">Best Practice में Relative Paths क्यों पसंद किए जाते हैं
जब आप कोई website बनाते हैं, तो प्रोजेक्ट को public domain पर upload करने से पहले उस पर अपने computer में locally काम करते हैं।
Relative paths यह सुनिश्चित करते हैं कि आपके links आपकी local hard drive पर पूरी तरह काम करें और बिना किसी बदलाव के automatically internet पर भी सही तरीके से transfer हो जाएं।
उदाहरण: Why Best Practice Prefers Relative Paths
<link rel="stylesheet" href="css/styles.css">
<img src="images/logo.png" alt="Logo">URL बनाम File Path: क्या फ़र्क है
एक file path यह बताता है कि कोई फ़ाइल किसी computer के storage पर भौतिक रूप से कहाँ है, जैसे Windows पर C:/projects/site/logo.png।
एक URL यह बताता है कि किसी resource को internet पर कहाँ ढूंढा और request किया जा सकता है, जैसे https://cookiescursor.com/logo.png। जब आप HTML में कोई relative link लिखते हैं, तो browser उसे एक literal file path में नहीं बल्कि पूरे URL में बदल देता है।
उदाहरण: URL vs File Path: What's the Difference
<!-- File path on disk: C:/projects/site/logo.png -->
<!-- Becomes this URL in the browser: -->
<img src="logo.png" alt="Logo">- web URLs में local Windows backslash characters इस्तेमाल करना, जिससे public servers links parse करने में fail हो जाते हैं।
- अपनी project directory में ऊपर स्थित files को reference करते समय step-up sequences जोड़ना भूल जाना।
- standard web path configurations इस्तेमाल करने के बजाय link tags में raw computer drive locations लिखना।
- Relative paths local instructions होती हैं जो current HTML file के relative folders और files को reference करती हैं।
- dot-slash और double-dot-slash syntaxes browser को क्रमशः subfolders में या parent folders में ऊपर ले जाती हैं।
- Absolute paths पूरा URL address specify करते हैं, domain protocols समेत, जो external sites को link करने के लिए ज़रूरी हैं।
standard absolute और relative file path structures सभी web browsers में universally supported हैं।
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: