द्वारा शर्लिन खान

लिंक और छवियां दो सबसे आम संसाधन हैं जिन्हें आप अपने वेब पेजों में जोड़ेंगे, इसलिए यह जानना महत्वपूर्ण है कि उन्हें सही तरीके से कैसे संबोधित किया जाए।

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं।

प्रत्येक वेबसाइट को कुछ संसाधनों को संदर्भित करने की आवश्यकता होती है, चाहे वे चित्र हों, फ़ाइलें हों या अन्य वेब पृष्ठ हों। अन्य फ़ाइलों से लिंक करने का निर्णय करना यह सुनिश्चित करने के लिए अत्यंत महत्वपूर्ण है कि ब्राउज़र उन्हें सही तरीके से ढूंढते हैं।

आप या तो सापेक्ष या निरपेक्ष URL का उपयोग करके संसाधनों से लिंक कर सकते हैं। यह कंप्यूटर पर स्थानीय फ़ाइलों और वेब पर एक्सेस किए गए प्रोटोकॉल-आधारित URL दोनों पर लागू होता है।

निरपेक्ष URL पथ का उपयोग कैसे करें

एक निरपेक्ष URL में एक विशेष फ़ाइल स्थान का संपूर्ण पथ होता है। इनके उदाहरणों में आपके कंप्यूटर पर फ़ाइलों का पूरा पथ शामिल है:

  • फ़ाइल: /// सी: /उपयोगकर्ता/Sharl/Desktop/test.html
    • instagram viewer
  • फ़ाइल: /// सी: / उपयोगकर्ता / जॉन / दस्तावेज़ / कार्य / Q4Summary.docx
  • file:///C:/Users/Mark/Documents/Music/Recording.mp3

एक अन्य उदाहरण में एक पूर्ण प्रोटोकॉल URL शामिल है, जिसका उपयोग आप इंटरनेट पर भेजने के लिए संसाधन की पहचान करने के लिए कर सकते हैं। आमतौर पर, ये "https" या "http" से शुरू होते हैं:

  • https://www.google.com
  • https://calendar.google.com/calendar
  • https://www.airbnb.com.au/rooms

निरपेक्ष URL में उस फ़ाइल या संसाधन का पता लगाने के लिए आवश्यक सभी जानकारी होती है जिसे आप एक्सेस करने का प्रयास कर रहे हैं। यदि आप किसी बाहरी साइट से लिंक कर रहे हैं तो यह आवश्यक है।

  1. HTML में एक साधारण वेबसाइट बनाएं एक नया फोल्डर बनाकर और दो नई फाइलें जोड़कर index.html और Styles.css.
  2. में index.html, एक मूल वेबसाइट बनाने के लिए कुछ HTML कोड जोड़ें:
    <!DOCTYPE html>
    <एचटीएमएल लैंग ="एन">
    <सिर>
    <शीर्षक> मेरी वेबसाइट </title>
    <मेटा चारसेट ="यूटीएफ-8">
    <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1">
    <लिंक रिले ="शैली पत्रक" href="Styles.css" />
    </head>
    <शरीर>
    <डिव क्लास ="CONTAINER">
    <एच 1> मेरी वेबसाइट </h1>
    <पी> मेरी वेबसाइट पर स्वागत है। </पी>
    </div>
    </body>
    </html>
  3. में Styles.css, वेबपेज में कुछ स्टाइलिंग जोड़ें।
    शरीर {
     फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सैंस-सेरिफ़;
    }
    कंटेनर {
     डिस्प्ले: फ्लेक्स;
     फ्लेक्स-दिशा: स्तंभ;
     संरेखित-आइटम: केंद्र;
    }
    .mb28 {
     मार्जिन-बॉटम: 28px;
    }
  4. में index.html, एक जोड़ें कंटेनर div के अंदर टैग करें, और संपूर्ण URL को Google की मुख्य साइट में जोड़ें ( https://www.google.com).
    <एक href="https://www.google.com" वर्ग ="mb28">Google.com</ए>
  5. आप संग्रहीत फ़ाइल के पूर्ण निरपेक्ष पथ का उपयोग करके छवियों को ऑनलाइन भी एक्सेस कर सकते हैं। आपने जोड़ा है यह सुनिश्चित करने के लिए आप अतिरिक्त कदम भी उठा सकते हैं आपके HTML के लिए उत्तरदायी छवियां वेब पृष्ठ।
    <आईएमजी एसआरसी ="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ऑटो = प्रारूप&फिट = फसल&डब्ल्यू = 3870&क्यू = 80" ऑल्ट ="प्यारा पक्षी फोटो" वर्ग ="mb28" चौड़ाई ="900" ऊँचाई ="600">
  6. पर क्लिक करें index.html फ़ाइल को एक ब्राउज़र में खोलने के लिए और इसके बाहरी स्थान से प्राप्त छवि को देखने के लिए।
  7. अपनी वेबसाइट के रूट फोल्डर से इमेज स्टोर करने के लिए एक नया फोल्डर बनाएं, जिसे इमेजिस. फ़ोल्डर के अंदर, एक नई छवि जोड़ें और इसे एक नाम दें, जैसे क्यूटबर्ड.जेपीजी.
  8. आपके द्वारा अभी-अभी जोड़ी गई छवि फ़ाइल के निरपेक्ष पथ की पहचान करें। आप इसे अपने ऑपरेटिंग सिस्टम के फ़ाइल मैनेजर ऐप के नेविगेशन पथ में खोज कर कर सकते हैं। आपको पथ के अंत में फ़ाइल का नाम भी जोड़ना होगा। उदाहरण के लिए, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
  9. में index.htmlको इंगित करने वाले निरपेक्ष पथ का उपयोग करने वाली नई छवि के साथ अपने छवि टैग को बदलें क्यूटबर्ड.जेपीजी फ़ाइल आपके कंप्यूटर पर संग्रहीत है। स्थानीय फाइल सिस्टम संसाधन को इंगित करने के लिए फ़ाइल:// उपसर्ग जोड़ना याद रखें। यूनिक्स और मैकोज़ पर, आप पिछले चरण में पहचाने गए पूर्ण पथ को जोड़ सकते हैं। विंडोज पर, आपको बैकस्लैश को फॉरवर्ड स्लैश से बदलना होगा और ड्राइव लेटर से पहले एक अतिरिक्त फॉरवर्ड स्लैश जोड़ना होगा, उदाहरण के लिए: 
    प्यारा पक्षी फोटो
  10. पर क्लिक करें index.html फ़ाइल को ब्राउज़र में खोलने के लिए और अपने कंप्यूटर पर संग्रहीत छवि को देखने के लिए।

सापेक्ष URL पथ का उपयोग कैसे करें

एक सापेक्ष URL केवल URL या पथ का हिस्सा संग्रहीत करता है, और आमतौर पर वर्तमान फ़ाइल या वेबसाइट के अनुभाग के स्थान से संबंधित होता है।

उपरोक्त उदाहरण में, एक्सेस करने के लिए लोगो.आईसीओ से index.html एक सापेक्ष URL का उपयोग करके, आप "Images/Icons/Logo.ico" पथ का उपयोग करेंगे। अन्य उदाहरणों में शामिल हैं:

  • पन्ने/पक्षी1.html
  • छवियां/क्यूटबर्ड.जेपीजी
  • Styles.css

जब आप दूसरे कंप्यूटर पर समान फ़ोल्डर संरचना का उपयोग करते हैं, तब भी वेबसाइट फ़ाइल को पुनः प्राप्त करने में समर्थ होगी। वेब पर रूटिंग करते समय, पूर्ण लिंक का उपयोग करने के बजाय " https://example.com/about", आप इसके बजाय सापेक्ष रूटिंग का उपयोग कर सकते हैं:

  • /about
  • /contact
  • /projects/local-clients

आप अपने एचटीएमएल वेब पेज के अंदर लिंक या संदर्भ छवियों को बनाने के लिए एक सापेक्ष यूआरएल का उपयोग कर सकते हैं।

  1. अपनी वेबसाइट निर्देशिका की जड़ के अंदर, नामक एक नया फ़ोल्डर बनाएँ पृष्ठों.
  2. नए पेज फोल्डर के अंदर, एक नई फाइल बनाएं, जिसे पक्षी1.html.
  3. आबाद करना पक्षी1.html पेज बनाने के लिए HTML कोड के साथ।
    <!DOCTYPE html>
    <एचटीएमएल लैंग ="एन">
    <सिर>
    <शीर्षक> पक्षी 1 </title>
    <मेटा चारसेट ="यूटीएफ-8">
    <मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1">
    <लिंक रिले ="शैली पत्रक" href="../styles.css" />
    </head>
    <शरीर>
    <डिव क्लास ="CONTAINER">
    <एच 1> कॉफ़ी </h1>
    <पी> कॉफ़ी एक प्यारी चिड़िया है जिसे खेल पसंद है! </पी>
    </div>
    </body>
    </html>
  4. कंटेनर div के अंदर, एक छवि टैग जोड़ें, और लिंक करने के लिए एक सापेक्ष URL का उपयोग करें क्यूटबर्ड.जेपीजी छवि।
    <आईएमजी एसआरसी ="../छवियां/क्यूटबर्ड.जेपीजी" ऑल्ट ="प्यारा पक्षी फोटो" वर्ग ="mb28" चौड़ाई ="900" ऊँचाई ="700">
  5. में index.html फ़ाइल, कंटेनर div के अंदर मौजूदा सामग्री को हटा दें। इसे सिंगल से बदलें ए टैग जो खोलने के लिए एक सापेक्ष लिंक का उपयोग करता है पक्षी1.html फ़ाइल।
    <डिव क्लास ="CONTAINER">
    <एच 1> मेरी वेबसाइट </h1>
    <पी> मेरी वेबसाइट पर स्वागत है। </पी>
    <एक href="पन्ने/पक्षी1.html" वर्ग ="mb28">पक्षी 1: कॉफी</ए>
    </div>
  6. पर क्लिक करें index.html फ़ाइल को ब्राउज़र में खोलने के लिए, और नेविगेट करने के लिए नए लिंक पर क्लिक करें पक्षी1.html.

अब आप निरपेक्ष और सापेक्ष URL के बीच अंतर निर्धारित कर सकते हैं। अब आप यह सुनिश्चित करने के लिए अतिरिक्त सावधानी बरत सकते हैं कि आपके संसाधन हमेशा पुनर्प्राप्त हों।

आपको हमेशा यह भी सुनिश्चित करना चाहिए कि आपके उपयोगकर्ता जिन लिंक तक पहुंच सकते हैं वे सुरक्षित और सुरक्षित हैं।

शेयर करनाकरेंशेयर करनाशेयर करनाशेयर करना
प्रतिलिपि
ईमेल
इस लेख का हिस्सा
शेयर करनाकरेंशेयर करनाशेयर करनाशेयर करना
प्रतिलिपि
ईमेल

लिंक को क्लिपबोर्ड पर कॉपी किया गया

संबंधित विषय

  • प्रोग्रामिंग
  • वेब विकास
  • एचटीएमएल
  • फाइल सिस्टम

लेखक के बारे में

शर्लिन खान (60 लेख प्रकाशित)

शे एक सॉफ्टवेयर डेवलपर के रूप में पूर्णकालिक काम करता है और दूसरों की मदद करने के लिए गाइड लिखने का आनंद लेता है। उसके पास आईटी स्नातक है और गुणवत्ता आश्वासन और शिक्षण में पिछला अनुभव है। शे को गेमिंग और पियानो बजाना बहुत पसंद है।

शर्लिन खान से अधिक

बातचीत

टिप्पणियाँ पढ़ें या पोस्ट करें ()

हमारे न्युजलेटर की सदस्यता प्राप्त करें

तकनीकी सुझावों, समीक्षाओं, निःशुल्क ई-पुस्तकों और विशिष्ट सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें