<link> Tag का उपयोग वर्तमान दस्तावेज और बाहरी स्रोत के बीच संबंध को निर्दिष्ट करने के लिए किया जाता है।<link> Tag का उपयोग आमतौर पर वर्तमान दस्तावेज के लिए बाहरी स्टाइलशीट को लिंक करने के लिए किया जाता है,
लेकिन इसका उपयोग लिंक साइट आइकन के साथ भी किया जा सकता है। यह दस्तावेज़ के मुख्य भाग पर रखा गया है।
<head>
<link rel="stylesheet" type="text/css" href="">
</head>
यह सरल उदाहरण एक href विशेषता के अंदर स्टाइलशीट और स्टाइलशीट के मान के साथ एक rel विशेषता का मार्ग प्रदान करता है। rel "संबंध" के लिए खड़ा है, और <link> तत्व की प्रमुख विशेषताओं में से एक है - मान दर्शाता है कि जिस आइटम से लिंक किया जा रहा है वह युक्त दस्तावेज से कैसे संबंधित है।
कई अन्य सामान्य प्रकार हैं जिनका आप सामना करेंगे। उदाहरण के लिए, साइट के Favicon का लिंक:
<head> सेक्काशन में निचे दिए गए कोड को डालना है। फिर फाइल को सेव करें।<link rel="icon" type="image/x-icon" href="" />
कई अन्य आइकन rel मान हैं, मुख्य रूप से विभिन्न मोबाइल प्लेटफॉर्म पर उपयोग के लिए विशेष आइकन प्रकारों को इंगित करने के लिए उपयोग किया जाता है, उदाहरण के लिए:
<link rel="apple-touch-icon-precomposed" size="114x114" type="image/png" href="apple-icon-114.png" />
आकार विशेषता आइकन के आकार को इंगित करती है, जबकि प्रकार में लिंक किए जा रहे संसाधन का MIME प्रकार होता है। ये ब्राउजर को उपलब्ध सबसे उपयुक्त आइकन चुनने की अनुमति देने के लिए उपयोगी संकेत प्रदान करते हैं।
आप मीडिया विशेषता के अंदर मीडिया प्रकार या क्वेरी भी प्रदान कर सकते हैं; यह संसाधन तभी लोड किया जाएगा जब मीडिया की स्थिति सही हो। उदाहरण के लिए:
<link rel="stylesheet" href="print.css" media="print" />
<link
rel="stylesheet"
href="print.css"
media="screen and (max-width: 600px)" />
<link Element में कुछ दिलचस्प नए प्रदर्शन और सुरक्षा सुविधाएँ भी जोड़ी गई हैं। यह उदाहरण लें:
<link
rel="preload"
href="myFont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous" />
preload का एक rel मान इंगित करता है कि ब्राउज़र को इस संसाधन को पहले से लोड करना चाहिए (अधिक जानकारी के लिए rel="preload" के साथ सामग्री को प्रीलोड करना देखें), as विशेषता के साथ सामग्री के विशिष्ट वर्ग को दर्शाता है। crossorigin विशेषता इंगित करती है कि संसाधन को CORS अनुरोध के साथ प्राप्त किया जाना चाहिए या नहीं।
<link> तत्व या तो <head> या <body> Element में हो सकता है, इस पर निर्भर करता है कि इसमें एक लिंक प्रकार है जो शरीर-ठीक है। उदाहरण के लिए, स्टाइलशीट लिंक प्रकार बॉडी-ओके है, और इसलिए बॉडी में <link rel="stylesheet"> की अनुमति है। हालाँकि, यह पालन करने के लिए एक अच्छा अभ्यास नहीं है; यह आपके <link> तत्वों को आपके शरीर की सामग्री से अलग करने के लिए, उन्हें <head> में रखने के लिए अधिक समझ में आता है।
<link> का उपयोग करते समय, और आपकी साइट अपनी सुरक्षा बढ़ाने के लिए सामग्री सुरक्षा नीति (CSP) का उपयोग करती है, नीति फ़ेविकॉन पर लागू होती है। यदि आपको फ़ेविकॉन के लोड न होने की समस्या का सामना करना पड़ता है, तो सत्यापित करें कि सामग्री-सुरक्षा-नीति शीर्षलेख का img-src निर्देश इसे एक्सेस करने से नहीं रोक रहा है।
<link> तत्व के लिए ईवेंट हैंडलर्स को परिभाषित करते हैं, लेकिन यह स्पष्ट नहीं है कि उनका उपयोग कैसे किया जाएगा।
<link> को पीछे की ओर स्लैश की आवश्यकता होती है: </link>
इस तत्व में वैश्विक विशेषताएँ शामिल हैं।
as
इस विशेषता का उपयोग केवल तभी किया जाता है जब <link> तत्व पर rel="preload" या rel="prefetch" सेट किया गया हो। यह <link> द्वारा लोड की जा रही सामग्री के प्रकार को निर्दिष्ट करता है, जो अनुरोध मिलान, सही सामग्री सुरक्षा नीति के आवेदन और सही स्वीकार अनुरोध हेडर की सेटिंग के लिए आवश्यक है। इसके अलावा, rel="preload" इसे अनुरोध प्राथमिकता के लिए एक संकेत के रूप में उपयोग करता है। नीचे दी गई तालिका में इस विशेषता के लिए मान्य मान और वे तत्व या संसाधन सूचीबद्ध हैं जिन पर वे लागू होते हैं।
crossorigin
यह गणना की गई विशेषता इंगित करती है कि संसाधन प्राप्त करते समय सीओआरएस का उपयोग किया जाना चाहिए या नहीं। CORS-सक्षम छवियों को <canvas> तत्व में दागी बिना पुन: उपयोग किया जा सकता है। अनुमत मान हैं:
anonymous
एक क्रॉस-ऑरिजनल रिक्वेस्ट (यानी ओरिजिन HTTP हेडर के साथ) किया जाता है, लेकिन कोई क्रेडेंशियल नहीं भेजा जाता है (यानी कोई कुकी, X.509 सर्टिफिकेट या HTTP बेसिक ऑथेंटिकेशन)। यदि सर्वर मूल साइट (एक्सेस-कंट्रोल-अनुमति-उत्पत्ति HTTP शीर्षलेख सेट नहीं करके) को प्रमाण-पत्र नहीं देता है तो संसाधन खराब हो जाएगा और इसका उपयोग प्रतिबंधित होगा।
use-credentials
एक क्रॉस-ऑरिजनल रिक्वेस्ट (यानी ओरिजिनल HTTP हेडर के साथ) एक क्रेडेंशियल भेजे जाने के साथ किया जाता है (यानी एक कुकी, सर्टिफिकेट और/या HTTP बेसिक ऑथेंटिकेशन किया जाता है)। यदि सर्वर मूल साइट (एक्सेस-कंट्रोल-अलाउंस-क्रेडेंशियल्स HTTP हेडर के माध्यम से) को क्रेडेंशियल्स नहीं देता है, तो संसाधन दूषित हो जाएगा और इसका उपयोग प्रतिबंधित हो जाएगा।
यदि विशेषता मौजूद नहीं है, तो संसाधन CORS अनुरोध के बिना प्राप्त किया जाता है (अर्थात मूल HTTP हेडर भेजे बिना), इसके गैर-दागी उपयोग को रोकता है। यदि अमान्य है, तो इसे इस तरह से हैंडल किया जाता है जैसे एनुमरेटेड कीवर्ड अनाम का उपयोग किया गया हो। अतिरिक्त जानकारी के लिए CORS सेटिंग विशेषताएँ देखें।
disabled
केवल rel="stylesheet" के लिए, अक्षम बूलियन विशेषता इंगित करती है कि वर्णित स्टाइलशीट को लोड किया जाना चाहिए और दस्तावेज़ पर लागू किया जाना चाहिए। यदि अक्षम HTML में लोड होने पर निर्दिष्ट किया गया है, तो पेज लोड के दौरान स्टाइलशीट लोड नहीं की जाएगी। इसके बजाय, स्टाइलशीट को ऑन-डिमांड लोड किया जाएगा, अगर और जब अक्षम विशेषता को गलत में बदल दिया जाता है या हटा दिया जाता है।
DOM में अक्षम संपत्ति सेट करने से स्टाइलशीट को दस्तावेज़ की Document.styleSheets सूची से हटा दिया जाता है।
fetchpriority
प्रीलोडेड संसाधन प्राप्त करते समय उपयोग करने के लिए सापेक्षिक प्राथमिकता का संकेत प्रदान करता है। अनुमत मान:
high
एक ही प्रकार के अन्य संसाधनों के सापेक्ष एक उच्च-प्राथमिकता प्राप्त करने का संकेत देता है।
low
एक ही प्रकार के अन्य संसाधनों के सापेक्ष एक निम्न-प्राथमिकता प्राप्त करने का संकेत देता है।
auto
डिफ़ॉल्ट: एक ही प्रकार के अन्य संसाधनों के सापेक्ष प्राथमिकता प्राप्त करने का स्वत: निर्धारण संकेत करता है।
href
यह विशेषता लिंक किए गए संसाधन का URL निर्दिष्ट करती है। एक URL निरपेक्ष या सापेक्ष हो सकता है।
hreflang
यह विशेषता लिंक किए गए संसाधन की भाषा को इंगित करती है। यह विशुद्ध रूप से सलाह है। अनुमत मान RFC 5646 द्वारा निर्दिष्ट किए गए हैं: भाषाओं की पहचान के लिए टैग (जिसे BCP 47 भी कहा जाता है)। इस विशेषता का उपयोग केवल तभी करें जब href विशेषता मौजूद हो।
imagesizes
केवल rel="preload" और as="image" के लिए, imageizes विशेषता एक आकार विशेषता है जो एक img तत्व द्वारा उपयोग किए जाने वाले उचित संसाधन को इसके srcset और आकार विशेषताओं के अनुरूप मानों के साथ प्रीलोड करने के लिए इंगित करती है।
imagesrcset
केवल rel="preload" और as="image" के लिए, imagesrcset एट्रीब्यूट एक सोर्ससेट एट्रिब्यूट है जो img एलीमेंट द्वारा उपयोग किए जाने वाले उचित संसाधन को इसके srcset और size एट्रीब्यूट के संगत मानों के साथ प्रीलोड करने का संकेत देता है।
integrity
इनलाइन मेटाडेटा शामिल है - संसाधन (फ़ाइल) का एक बेस 64-एन्कोडेड क्रिप्टोग्राफ़िक हैश जिसे आप ब्राउज़र को लाने के लिए कह रहे हैं। ब्राउजर इसका उपयोग यह सत्यापित करने के लिए कर सकता है कि प्राप्त संसाधन अप्रत्याशित हेरफेर से मुक्त वितरित किया गया है। उपसंसाधन अखंडता देखें।
media
यह विशेषता उस मीडिया को निर्दिष्ट करती है जिस पर लिंक किया गया संसाधन लागू होता है। इसका मान मीडिया प्रकार/मीडिया क्वेरी होना चाहिए। बाहरी स्टाइलशीट से लिंक करते समय यह विशेषता मुख्य रूप से उपयोगी होती है - यह उपयोगकर्ता एजेंट को उस डिवाइस के लिए सबसे अच्छा अनुकूलित एक चुनने की अनुमति देती है जिस पर वह चलता है।
prefetch
एक संसाधन की पहचान करता है जो अगले नेविगेशन के लिए आवश्यक हो सकता है और उपयोगकर्ता एजेंट को इसे पुनः प्राप्त करना चाहिए। यह भविष्य में संसाधन के लिए अनुरोध किए जाने पर उपयोगकर्ता एजेंट को तेजी से प्रतिक्रिया करने की अनुमति देता है।
referrerpolicy
संसाधन प्राप्त करते समय किस रेफरर का उपयोग करना है यह इंगित करने वाली एक स्ट्रिंग:
rel
यह विशेषता लिंक किए गए दस्तावेज़ के संबंध को वर्तमान दस्तावेज़ में नाम देती है। विशेषता लिंक प्रकार मानों की एक स्थान-पृथक सूची होनी चाहिए।
sizes
यह विशेषता संसाधन में निहित विज़ुअल मीडिया के लिए आइकन के आकार को परिभाषित करती है। यह केवल तभी मौजूद होना चाहिए जब rel में आइकॉन का मान हो या कोई गैर-मानक प्रकार हो जैसे कि Apple का apple-touch-icon। इसके निम्न मान हो सकते हैं:
<width in pixels>x<height in pixels> या <width in pixels>X<height in pixels> के प्रारूप में। इनमें से प्रत्येक आकार संसाधन में शामिल होना चाहिए।title
शीर्षक विशेषता में <link> Element पर विशेष शब्दार्थ है। <link rel="stylesheet"> पर उपयोग किए जाने पर यह डिफ़ॉल्ट या वैकल्पिक स्टाइलशीट को परिभाषित करता है।
type
इस विशेषता का उपयोग लिंक की गई सामग्री के प्रकार को परिभाषित करने के लिए किया जाता है। विशेषता का मान एक MIME प्रकार होना चाहिए जैसे पाठ/एचटीएमएल, पाठ/सीएसएस, और इसी तरह। इस विशेषता का सामान्य उपयोग संदर्भित की जा रही स्टाइलशीट के प्रकार को परिभाषित करना है (जैसे कि टेक्स्ट/सीएसएस), लेकिन यह देखते हुए कि सीएसएस वेब पर उपयोग की जाने वाली एकमात्र स्टाइलशीट भाषा है, न केवल टाइप विशेषता को छोड़ना संभव है, बल्कि यह है वास्तव में अब अनुशंसित अभ्यास। इसका उपयोग rel="preload" लिंक प्रकारों पर भी किया जाता है, यह सुनिश्चित करने के लिए कि ब्राउज़र केवल उन फ़ाइल प्रकारों को डाउनलोड करता है जिनका वह समर्थन करता है।
blocking
यह विशेषता स्पष्ट रूप से इंगित करती है कि बाहरी संसाधन को लाने पर कुछ संचालन को अवरुद्ध किया जाना चाहिए। ब्लॉक किए जाने वाले ऑपरेशन नीचे सूचीबद्ध ब्लॉकिंग विशेषताओं की स्पेस से अलग की गई सूची होनी चाहिए।
methods
इस विशेषता का मान उन कार्यों के बारे में जानकारी प्रदान करता है जो किसी वस्तु पर किए जा सकते हैं। मान आमतौर पर HTTP प्रोटोकॉल द्वारा उपयोग किए जाने पर दिए जाते हैं, लेकिन यह (शीर्षक विशेषता के समान कारणों के लिए) लिंक में अग्रिम रूप से सलाहकार जानकारी शामिल करने के लिए उपयोगी हो सकता है। उदाहरण के लिए, निर्दिष्ट विधियों के एक समारोह के रूप में ब्राउज़र एक लिंक का एक अलग प्रतिपादन चुन सकता है; खोजने योग्य कुछ अलग आइकन प्राप्त कर सकता है, या एक बाहरी लिंक वर्तमान साइट को छोड़ने के संकेत के साथ प्रस्तुत कर सकता है। परिभाषित ब्राउजर, इंटरनेट एक्सप्लोरर 4 द्वारा भी यह विशेषता अच्छी तरह से समझ में नहीं आती है और न ही समर्थित है।
target
फ्रेम या विंडो नाम को परिभाषित करता है जिसमें परिभाषित लिंकिंग रिलेशनशिप है या जो किसी भी लिंक किए गए संसाधन का प्रतिपादन दिखाएगा।
charset
यह विशेषता लिंक किए गए संसाधन के वर्ण एन्कोडिंग को परिभाषित करती है। मान स्पेस- और/या अल्पविराम-सीमांकित वर्ण सेट की सूची है जैसा कि RFC 2045 में परिभाषित किया गया है। डिफ़ॉल्ट मान iso-8859-1 है।
rev
इस विशेषता का मान वर्तमान दस्तावेज़ के संबंध को लिंक किए गए दस्तावेज़ से दिखाता है, जैसा कि href विशेषता द्वारा परिभाषित किया गया है। विशेषता इस प्रकार rel विशेषता के मान की तुलना में विपरीत संबंध को परिभाषित करती है। विशेषता के लिए लिंक प्रकार के मान rel के संभावित मानों के समान हैं।
अगर आपको हमारी वेबसाइट उपयोग करने में में कही भी, किसी भी प्रकार का समस्या आ रही हो तो हमें विंदास कॉल करके पूछ सकते है। Contact Us पेज में जाकर धन्यवाद...
