HTML
संसाधन जोड़ना
खोज…
परिचय
जबकि कई स्क्रिप्ट, आइकन और स्टाइलशीट को HTML मार्कअप में सीधे लिखा जा सकता है, इन संसाधनों को अपनी फ़ाइल में शामिल करने और उन्हें अपने दस्तावेज़ से लिंक करने के लिए यह सर्वोत्तम अभ्यास और अधिक कुशल है। यह विषय बाहरी संसाधनों जैसे कि स्टाइलशीट और स्क्रिप्ट को HTML डॉक्यूमेंट में लिंक करता है।
वाक्य - विन्यास
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
पैरामीटर
| गुण | विवरण |
|---|---|
charset | लिंक किए गए दस्तावेज़ के वर्ण एन्कोडिंग को निर्दिष्ट करता है |
crossorigin | निर्दिष्ट करता है कि तत्व क्रॉस मूल अनुरोधों को कैसे संभालता है |
href | लिंक किए गए दस्तावेज़ का स्थान निर्दिष्ट करता है |
hreflang | लिंक किए गए दस्तावेज़ में पाठ की भाषा निर्दिष्ट करता है |
media | यह निर्दिष्ट करता है कि लिंक किए गए दस्तावेज़ को किस डिवाइस पर प्रदर्शित किया जाएगा, अक्सर प्रश्न में डिवाइस के आधार पर स्टाइलशीट का चयन करने के साथ उपयोग किया जाता है |
rel | आवश्यक है । वर्तमान दस्तावेज़ और लिंक किए गए दस्तावेज़ के बीच संबंध को निर्दिष्ट करता है |
rev | लिंक किए गए दस्तावेज़ और वर्तमान दस्तावेज़ के बीच संबंध निर्दिष्ट करता है |
sizes | लिंक किए गए संसाधन का आकार निर्दिष्ट करता है। केवल जब rel="icon" |
target | निर्दिष्ट करता है कि लिंक किए गए दस्तावेज़ को कहाँ लोड किया जाना है |
type | लिंक किए गए दस्तावेज़ के मीडिया प्रकार को निर्दिष्ट करता है |
integrity | लिंक किए गए संसाधन के आधार 64 एन्कोडेड हैश (sha256, sha384, या sha512) को निर्दिष्ट करता है जो ब्राउज़र को इसकी वैधता को सत्यापित करने की अनुमति देता है। |
बाहरी CSS शैलियाँ
<link rel="stylesheet" href="path/to.css" type="text/css">
मानक अभ्यास अपने HTML के शीर्ष पर <head> टैग के अंदर CSS <link> टैग लगाने के लिए है। इस तरह सीएसएस को पहले लोड किया जाएगा और आपके पेज पर लागू होगा क्योंकि यह लोड हो रहा है, सीएसएस को लोड होने तक अस्थिर HTML दिखाने के बजाय। HTML5 में type विशेषता आवश्यक नहीं है, क्योंकि HTML5 आमतौर पर CSS का समर्थन करता है।
<link rel="stylesheet" href="path/to.css" type="text/css">
तथा
<link rel="stylesheet" href="path/to.css">
... HTML5 में एक ही काम करते हैं।
एक और, हालांकि कम सामान्य अभ्यास, सीधे सीएसएस के अंदर एक @import स्टेटमेंट का उपयोग करना है। ऐशे ही:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
जावास्क्रिप्ट
एक समय का
<script src="path/to.js"></script>
मानक अभ्यास को बंद करने से पहले जावास्क्रिप्ट <script> टैग लगाने के लिए है </body> टैग। आपकी स्क्रिप्ट को लोड करने से अंतिम रूप से आपकी साइट के दृश्य अधिक तेज़ी से दिखाई देते हैं और आपके जावास्क्रिप्ट को उन तत्वों के साथ बातचीत करने से हतोत्साहित करते हैं जो अभी तक लोड नहीं हुए हैं।
अतुल्यकालिक
<script src="path/to.js" async></script>
एक अन्य विकल्प, जब जावास्क्रिप्ट कोड लोड किया जा रहा है, पेज इनिशियलाइज़ेशन के लिए आवश्यक नहीं है, तो इसे एसिंक्रोनस रूप से लोड किया जा सकता है, पेज लोड को तेज किया जा सकता है। async का उपयोग करके ब्राउज़र स्क्रिप्ट की सामग्री को समानांतर में लोड करेगा और एक बार पूरी तरह से डाउनलोड होने के बाद, जावास्क्रिप्ट फ़ाइल को पार्स करने के लिए HTML पार्सिंग को बाधित करेगा।
स्थगित
<script src="path/to.js" defer></script>
आस्थगित स्क्रिप्ट्स, एसिंक्स स्क्रिप्ट्स की तरह हैं, इस अपवाद के साथ कि केवल HTML पूरी तरह से पार्स किए जाने के बाद ही पार्सिंग किया जाएगा। डिफर्ड स्क्रिप्ट को घोषणा के क्रम में लोड किए जाने की गारंटी दी जाती है, उसी तरह जैसे सिंक्रोनस स्क्रिप्ट।
<Noscript>
<noscript>JavaScript disabled</noscript>
<noscript> तत्व प्रदर्शित होने वाली सामग्री को परिभाषित करता है यदि उपयोगकर्ता के पास स्क्रिप्ट अक्षम है या यदि ब्राउज़र स्क्रिप्ट का उपयोग करने का समर्थन नहीं करता है। <noscript> टैग को <head> या <body> में रखा जा सकता है।
फ़ेविकॉन
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
PNG फ़ाइलों के लिए माइम-प्रकार की image/png और आइकन ( *.ico ) फ़ाइलों के लिए image/x-icon उपयोग करें। अंतर के लिए, यह SO प्रश्न देखें।
आपकी वेबसाइट के मूल में favicon.ico नाम की एक फाइल आम तौर पर <link> टैग की आवश्यकता के बिना लोड और स्वचालित रूप से लागू की जाएगी। यदि यह फ़ाइल कभी भी बदल जाती है, तो ब्राउज़र अपने कैश को अपडेट करने के बारे में धीमा और जिद्दी हो सकता है।
वैकल्पिक सीएसएस
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
कुछ ब्राउज़र वैकल्पिक स्टाइल शीट को लागू करने की अनुमति देते हैं यदि वे पेश की जाती हैं। डिफ़ॉल्ट रूप से वे लागू नहीं होंगे, लेकिन आमतौर पर उन्हें ब्राउज़र सेटिंग्स के माध्यम से बदला जा सकता है:
फ़ायरफ़ॉक्स उपयोगकर्ता को व्यू> पेज स्टाइल सबमेनू का उपयोग करके स्टाइलशीट का चयन करने देता है, इंटरनेट एक्सप्लोरर भी इस सुविधा का समर्थन करता है (आईई 8 के साथ शुरुआत), यह भी व्यू> पेज स्टाइल (कम से कम आईई 11 के रूप में) से एक्सेस किया जाता है, लेकिन क्रोम को एक्सटेंशन की आवश्यकता होती है सुविधा का उपयोग करें (संस्करण 48 के रूप में)। उपयोगकर्ता को स्टाइल स्विच करने देने के लिए वेब पेज अपना स्वयं का यूजर इंटरफेस भी प्रदान कर सकता है।
(स्रोत: एमडीएन डॉक्स )
वेब फ़ीड
अपने एटम / आरएसएस फ़ीड की खोज की अनुमति देने के लिए rel="alternate" विशेषता का उपयोग करें।
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
RSS फ़ीड और परमाणु RSS के लिए MDN डॉक्स देखें।
लिंक 'मीडिया' की विशेषता
<link rel="stylesheet" href="test.css" media="print">
मीडिया निर्दिष्ट करता है कि किस प्रकार की मीडिया के लिए शैली शीट का उपयोग किया जाना चाहिए। print मूल्य का उपयोग केवल प्रिंट पृष्ठों के लिए उस शैली पत्रक को प्रदर्शित करेगा।
इस विशेषता का मूल्य mediatype मूल्यों (CSS मीडिया क्वेरी के समान) में से कोई भी हो सकता है।
पिछला और अगला
जब कोई पृष्ठ लेखों की एक श्रृंखला का हिस्सा होता है, उदाहरण के लिए, इससे पहले और बाद में आने वाले पृष्ठों की ओर संकेत करने के लिए prev और next का उपयोग किया जा सकता है।
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
संसाधन संकेत: dns-prefetch, prefetch, prerender
प्रीकनेक्ट
preconnect संबंध dns-prefetch समान है कि यह DNS को हल करेगा। हालांकि, यह टीसीपी हैंडशेक और वैकल्पिक टीएलएस वार्ता भी करेगा। यह एक प्रायोगिक विशेषता है।
<link rel="preconnect" href="URL">
DNS-प्रीफ़ेच
किसी URL के लिए DNS को हल करने के लिए ब्राउज़रों को सूचित करता है, ताकि उस URL से सभी संपत्तियाँ तेज़ी से लोड हों।
<link rel="dns-prefetch" href="URL">
प्रीफ़ेच
ब्राउज़रों को सूचित करता है कि किसी दिए गए संसाधन को पूर्वनिर्मित किया जाना चाहिए ताकि इसे अधिक तेज़ी से लोड किया जा सके।
<link rel="prefetch" href="URL">
DNS-Prefetch केवल डोमेन नाम को हल करता है जबकि Prefetch निर्दिष्ट संसाधनों को डाउनलोड / संग्रहीत करता है।
पूर्वप्रस्तुत
ब्राउज़र को पृष्ठभूमि में URL लाने और रेंडर करने के लिए सूचित करता है, ताकि उपयोगकर्ता को उस URL पर नेविगेट करते समय तुरंत उपयोगकर्ता तक पहुंचाया जा सके। यह एक प्रायोगिक विशेषता है।
<link rel="prerender" href="URL">