Google I/O से जुड़े रहने के लिए धन्यवाद! मांग पर वीडियो देखें.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

दस्तावेज़ की बनावट

एचटीएमएल दस्तावेज़ों में, दस्तावेज़ टाइप का एलान और <html> रूट एलिमेंट शामिल होता है. <html> एलिमेंट में, दस्तावेज़ का हेडर और दस्तावेज़ का मुख्य हिस्सा नेस्ट किया जाता है. दस्तावेज़ का हेड, कोड के बाहर नहीं दिखता. हालांकि, किसी साइट के काम करने के लिए यह ज़रूरी है. इसमें पूरी मेटा जानकारी होती है. जैसे, सर्च इंजन और सोशल मीडिया के नतीजों के लिए जानकारी, ब्राउज़र टैब और मोबाइल होम स्क्रीन के शॉर्टकट के लिए आइकॉन, और आपके कॉन्टेंट का व्यवहार और प्रज़ेंटेशन. इस सेक्शन में, आपको ऐसे कॉम्पोनेंट के बारे में पता चलेगा जो दिखते नहीं हैं, लेकिन लगभग हर वेब पेज पर मौजूद होते हैं.

MachineLearningWorkshop.com (एमएलडब्ल्यू) साइट बनाने के लिए, उन कॉम्पोनेंट को शामिल करें जिन्हें हर वेब पेज के लिए ज़रूरी माना जाता है: दस्तावेज़ का टाइप, कॉन्टेंट की भाषा, वर्ण सेट, और साइट या ऐप्लिकेशन का टाइटल या नाम.

हर एचटीएमएल दस्तावेज़ में जोड़ें

ऐसे कई एलिमेंट हैं जो हर वेब पेज के लिए ज़रूरी होते हैं. अगर ये एलिमेंट मौजूद नहीं हैं, तो ब्राउज़र कॉन्टेंट रेंडर करते हैं. हालांकि, आपको इन्हें शामिल करना चाहिए.

`<!DOCTYPE html>`

किसी भी एचटीएमएल दस्तावेज़ में सबसे पहले प्रीऐम्बल होता है. एचटीएमएल के लिए, आपको सिर्फ़ <!DOCTYPE html> की ज़रूरत है. यह एचटीएमएल एलिमेंट जैसा दिखता है, लेकिन यह असल में एक खास नोड है. इसे doctype कहा जाता है. DOCTYPE, ब्राउज़र को स्टैंडर्ड मोड इस्तेमाल करने के लिए कहता है. इस मोड को शामिल न करने पर, ब्राउज़र एक अलग रेंडरिंग मोड का इस्तेमाल करते हैं. इसे क्वार्क मोड कहा जाता है. doctype को शामिल करने से, क्वर्क मोड (पुराने वर्शन पर काम करने की सुविधा) को चालू होने से रोका जा सकता है.

`<html>`

<html> एलिमेंट, एचटीएमएल दस्तावेज़ का रूट एलिमेंट होता है. यह <head> और <body> का पैरंट है. इसमें एचटीएमएल दस्तावेज़ में मौजूद doctype के अलावा, बाकी सभी चीज़ें शामिल होती हैं. अगर इसे शामिल नहीं किया जाता है, तो भाषा का मतलब अपने-आप समझ लिया जाता है. हालांकि, आपको दस्तावेज़ की भाषा के बारे में बताने के लिए इसे शामिल करना चाहिए.

सामग्री भाषा

<html> टैग में मौजूद lang एट्रिब्यूट, दस्तावेज़ की मुख्य भाषा तय करता है. वैल्यू, आईएसओ भाषा कोड होती है. इसके बाद, क्षेत्र की जानकारी दी जाती है. हालांकि, यह जानकारी देना ज़रूरी नहीं है. उदाहरण के लिए, कनाडा में फ़्रेंच भाषा fr-CA है, जबकि बर्कीना फ़ासो में यह fr-BF है. इस एलान से, स्क्रीन रीडर, सर्च इंजन, और अनुवाद सेवाओं को दस्तावेज़ की भाषा का पता लगाने में मदद मिलती है.

दस्तावेज़ की मुख्य भाषा के अपवादों की पहचान करने के लिए, अन्य टैग पर lang एट्रिब्यूट का इस्तेमाल किया जा सकता है. हेड में इस्तेमाल किए जाने की तरह, बॉडी में lang एट्रिब्यूट का इस्तेमाल करने से कोई विज़ुअल इफ़ेक्ट नहीं पड़ता. इससे सिमैंटिक्स जुड़ जाते हैं, ताकि सहायता करने वाली टेक्नोलॉजी और अपने-आप काम करने वाली सेवाएं, किसी कॉन्टेंट की भाषा की पहचान कर सकें.

इस एट्रिब्यूट का इस्तेमाल, सीएसएस सिलेक्टर में किया जा सकता है. इससे दस्तावेज़ की भाषा और उस भाषा के अपवादों को सेट किया जा सकता है. <span lang="fr-fr">Ceci n'est pas une pipe.</span> को टारगेट करने के लिए, एट्रिब्यूट और भाषा चुनने वाले टूल [lang|="fr"] और :lang(fr) का इस्तेमाल किया जा सकता है.

`<head>`

ओपनिंग और क्लोज़िंग <html> टैग के बीच नेस्ट किए गए, हमें दो चाइल्ड टैग मिलते हैं: <head> और <body>:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> में किसी साइट या ऐप्लिकेशन का मेटाडेटा होता है, जबकि <body> में दिखने वाला कॉन्टेंट होता है. इस सेक्शन के बाकी हिस्से में, <head> एलिमेंट में नेस्ट किए गए कॉम्पोनेंट के बारे में बताया गया है.

`<head>` में मौजूद ज़रूरी कॉम्पोनेंट

दस्तावेज़ का मेटाडेटा, <head> एलिमेंट में मौजूद होता है. इसमें दस्तावेज़ का टाइटल, वर्ण सेट, व्यूपोर्ट सेटिंग, जानकारी, बेस यूआरएल, स्टाइलशीट लिंक, और आइकॉन शामिल होते हैं. ऐसा हो सकता है कि आपको इन सभी सुविधाओं की ज़रूरत न पड़े. हालांकि, हमेशा वर्ण सेट, टाइटल, और व्यूपोर्ट सेटिंग शामिल करें.

कैरेक्टर एन्कोडिंग

<head> में सबसे पहला एलिमेंट, charset कैरेक्टर एन्कोडिंग डिक्लेरेशन होना चाहिए. यह टाइटल से पहले आता है, ताकि ब्राउज़र उस टाइटल और दस्तावेज़ के बाकी सभी वर्णों को रेंडर कर सके.

ज़्यादातर ब्राउज़र में, स्थान-भाषा के हिसाब से डिफ़ॉल्ट एन्कोडिंग windows-1252 होती है. हालांकि, आपको UTF-8 का इस्तेमाल करना चाहिए. इससे सभी वर्णों को एक से चार बाइट में कोड किया जा सकता है.

कैरेक्टर एन्कोडिंग को UTF-8 पर सेट करने के लिए, यह शामिल करें:

<meta charset="utf-8" />

UTF-8 (केस-इनसेंसिटिव) को शामिल करके, अपने टाइटल में इमोजी भी शामिल किए जा सकते हैं.

वर्ण एन्कोडिंग, दस्तावेज़ में मौजूद हर चीज़ में शामिल होती है. यहां तक कि <style> और <script> में भी. इस छोटे से एलान का मतलब है कि क्लास के नामों और selectorAPI में इमोजी शामिल किए जा सकते हैं. अगर इमोजी का इस्तेमाल किया जाता है, तो पक्का करें कि उनका इस्तेमाल इस तरह से किया गया हो कि वे सुलभता को नुकसान पहुंचाए बिना, इस्तेमाल करने में आसानी बढ़ाएं.

दस्तावेज़ शीर्षक

हर पेज, आपके होम पेज, और सभी अतिरिक्त पेजों का टाइटल यूनीक होना चाहिए. दस्तावेज़ के टाइटल का कॉन्टेंट, ओपनिंग और क्लोज़िंग <title> टैग के बीच का टेक्स्ट होता है. यह ब्राउज़र टैब, खुली हुई विंडो की सूची, इतिहास, खोज के नतीजों, और सोशल मीडिया कार्ड में दिखता है. हालांकि, इसे <meta> टैग की मदद से फिर से तय किया जा सकता है.

<title>Machine Learning Workshop</title>

व्यूपोर्ट मेटाडेटा

साइट को रिस्पॉन्सिव बनाने के लिए, व्यूपोर्ट मेटा टैग ज़रूरी है. इससे यह पक्का होता है कि व्यूपोर्ट की चौड़ाई कुछ भी हो, कॉन्टेंट सही तरीके से रेंडर हो. व्यूपोर्ट मेटा टैग साल 2007 से मौजूद है. हालांकि, इसे हाल ही में स्पेसिफ़िकेशन में शामिल किया गया है. यह व्यूपोर्ट के साइज़ और स्केल को कंट्रोल करता है. इससे कॉन्टेंट को छोटी स्क्रीन पर फ़िट करने के लिए छोटा होने से रोका जा सकता है.

<meta name="viewport" content="width=device-width" />

ऊपर दिए गए कोड का मतलब है कि "साइट को रिस्पॉन्सिव बनाएं. इसके लिए, कॉन्टेंट की चौड़ाई को स्क्रीन की चौड़ाई के बराबर करें". width के अलावा, ज़ूम और स्केलेबिलिटी सेट की जा सकती है. हालांकि, दोनों की डिफ़ॉल्ट वैल्यू सुलभ होती हैं. अगर आपको साफ़ तौर पर जानकारी देनी है, तो यह शामिल करें:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

व्यूपोर्ट, Lighthouse की ऐक्सेसिबिलिटी ऑडिट का हिस्सा है. अगर आपकी साइट को स्केल किया जा सकता है और उसके लिए कोई ज़्यादा से ज़्यादा साइज़ सेट नहीं किया गया है, तो वह ऑडिट पास कर लेगी.

अब तक, हमारी एचटीएमएल फ़ाइल का आउटलाइन यह है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

अन्य `<head>` कॉन्टेंट

<head> में और भी बहुत कुछ शामिल होता है. जैसे, पूरा मेटाडेटा. इस मॉड्यूल में, आपको <head> में मौजूद ज़्यादातर एलिमेंट के बारे में जानकारी मिलेगी. हालांकि, हम मेटाडेटा मॉड्यूल में ज़्यादा जानकारी शेयर करेंगे.

आपने मेटा कैरेक्टर सेट और दस्तावेज़ का टाइटल देखा है. हालांकि, <meta> टैग के बाहर भी बहुत सारा मेटाडेटा होता है जिसे शामिल किया जाना चाहिए.

सीएसएस

<head> में, एचटीएमएल के लिए स्टाइल शामिल की जाती हैं. अगर आपको स्टाइल के बारे में जानना है, तो सीएसएस के लिए एक लर्निंग पाथ उपलब्ध है. हालांकि, आपको यह जानने की ज़रूरत है कि उन्हें अपने एचटीएमएल दस्तावेज़ों में कैसे शामिल किया जाए.

सीएसएस को तीन तरीकों से शामिल किया जा सकता है: <link>, <style>, और style एट्रिब्यूट.

अपनी एचटीएमएल फ़ाइल में स्टाइल शामिल करने के दो मुख्य तरीके हैं. पहला, <link> एलिमेंट का इस्तेमाल करके बाहरी रिसॉर्स शामिल करना. इसके लिए, rel एट्रिब्यूट को stylesheet पर सेट करें. दूसरा, सीएसएस को सीधे तौर पर अपने दस्तावेज़ के हेड में शामिल करना. इसके लिए, ओपनिंग और क्लोज़िंग <style> टैग का इस्तेमाल करें.

स्टाइलशीट शामिल करने के लिए, <link> टैग का इस्तेमाल करना सबसे अच्छा तरीका है. एक या कुछ बाहरी स्टाइल शीट को लिंक करना, डेवलपर के अनुभव और साइट की परफ़ॉर्मेंस, दोनों के लिए अच्छा होता है: आपको सीएसएस को हर जगह डालने के बजाय, एक जगह पर बनाए रखने का विकल्प मिलता है. साथ ही, ब्राउज़र बाहरी फ़ाइल को कैश मेमोरी में सेव कर सकते हैं. इसका मतलब है कि हर पेज पर नेविगेट करने के दौरान, इसे फिर से डाउनलोड नहीं करना पड़ता.

सिंटैक्स <link rel="stylesheet" href="styles.css"> है. इसमें styles.css, आपकी स्टाइलशीट का फ़ाइल नाम और रिलेटिव लोकेशन है. आपको type="text/css" एट्रिब्यूट दिख सकता है, लेकिन यह ज़रूरी नहीं है. rel एट्रिब्यूट, रिलेशनशिप के बारे में बताता है. इस मामले में, रिलेशनशिप stylesheet है. rel एट्रिब्यूट शामिल न करने पर, आपकी सीएसएस लिंक नहीं की जाएगी.

आपको कुछ समय बाद, कुछ और rel वैल्यू के बारे में पता चलेगा. हालांकि, इससे पहले आपको सीएसएस को शामिल करने के अन्य तरीकों के बारे में जानकारी मिलेगी.

अगर आपको अपनी बाहरी स्टाइलशीट की स्टाइल को कैस्केड लेयर में रखना है, लेकिन आपके पास सीएसएस फ़ाइल में बदलाव करने का ऐक्सेस नहीं है, तो आपको सीएसएस को <style> में @import के साथ शामिल करना होगा:

<style>
  @import "styles.css" layer(firstLayer);
</style>

अपने दस्तावेज़ में स्टाइल शीट इंपोर्ट करने के लिए @import का इस्तेमाल करते समय, @import स्टेटमेंट को आपके @import या लिंक की गई स्टाइलशीट में पहला स्टेटमेंट होना चाहिए. हालांकि, इसे कैरेक्टर सेट के एलान से बाहर रखा जाना चाहिए.<style>

कैस्केड लेयर अब भी नई हैं और हो सकता है कि आपको हेड <style> में @import न दिखे. हालांकि, आपको अक्सर हेड स्टाइल ब्लॉक में कस्टम प्रॉपर्टी डिक्लेयर की हुई दिखेंगी:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

<link>, <style> या दोनों के साथ जोड़े गए स्टाइल, हेड में होने चाहिए. हालांकि, इन्हें दस्तावेज़ के बॉडी में शामिल करने पर भी काम किया जा सकता है, लेकिन परफ़ॉर्मेंस की वजहों से आपको स्टाइल को हेड में जोड़ना चाहिए. ऐसा लग सकता है कि यह तरीका सही नहीं है, क्योंकि आपको लग सकता है कि आपका कॉन्टेंट पहले लोड होना चाहिए. हालांकि, ब्राउज़र के लिए यह बेहतर है कि कॉन्टेंट लोड होने पर, उसे कैसे रेंडर करना है. स्टाइल को पहले जोड़ने से, गैर-ज़रूरी रीपेंटिंग को रोका जा सकता है. ऐसा तब होता है, जब किसी एलिमेंट को पहली बार रेंडर करने के बाद स्टाइल किया जाता है.

स्टाइल जोड़ने का एक ऐसा तरीका है जिसका इस्तेमाल शायद ही कभी किया जाता है. यह तरीका है, आपके दस्तावेज़ के <head> में इनलाइन स्टाइल जोड़ना. शायद ही कभी हेड में इनलाइन स्टाइल का इस्तेमाल किया जाता है, क्योंकि उपयोगकर्ता एजेंट की स्टाइल शीट, हेड को डिफ़ॉल्ट रूप से छिपा देती हैं. हालांकि, अगर आपको JavaScript के बिना सीएसएस एडिटर बनाना है, ताकि अपने पेज के कस्टम एलिमेंट की जांच की जा सके, तो display: block की मदद से हेड को दिखाया जा सकता है. इसके बाद, हेड में मौजूद सभी चीज़ों को छिपाया जा सकता है. इसके बाद, इनलाइन style एट्रिब्यूट की मदद से, कॉन्टेंट में बदलाव करने लायक स्टाइल ब्लॉक को दिखाया जा सकता है.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

<style> एलिमेंट में इनलाइन स्टाइल जोड़ी जा सकती हैं.

`<link>` एलिमेंट के अन्य इस्तेमाल

link एलिमेंट का इस्तेमाल, एचटीएमएल दस्तावेज़ और बाहरी संसाधनों के बीच संबंध बनाने के लिए किया जाता है. इनमें से कुछ संसाधन डाउनलोड किए जा सकते हैं, जबकि अन्य सिर्फ़ जानकारी देने के लिए हैं. रिश्ते का टाइप, rel एट्रिब्यूट की वैल्यू से तय होता है. rel एट्रिब्यूट के लिए 25 वैल्यू उपलब्ध हैं. इनका इस्तेमाल <link>, <a>, और <area> या <form> के साथ किया जा सकता है. इनमें से कुछ वैल्यू का इस्तेमाल सभी के साथ किया जा सकता है. मेटा जानकारी से जुड़े टैग को हेड में और परफ़ॉर्मेंस से जुड़े टैग को <body> में शामिल करना बेहतर होता है.

अब आपको अपने हेडर में तीन अन्य टाइप शामिल करने होंगे: icon, alternate, और canonical. rel="manifest", अगले मॉड्यूल में चौथा टाइप जोड़ा जाएगा.

फ़ेविकॉन

अपने दस्तावेज़ के फ़ैविकन की पहचान करने के लिए, rel="icon" के साथ <link> टैग का इस्तेमाल करें. फ़ैविकन एक छोटा आइकॉन होता है. यह ब्राउज़र टैब पर दिखता है. आम तौर पर, यह दस्तावेज़ के टाइटल के बाईं ओर होता है. जब टैब छोटे हो जाते हैं, तो टाइटल गायब हो सकता है, लेकिन आइकॉन दिखता रहता है. ज़्यादातर फ़ैविकन, कंपनी या ऐप्लिकेशन के लोगो होते हैं.

अगर फ़ेविकॉन के बारे में जानकारी नहीं दी जाती है, तो ब्राउज़र टॉप-लेवल डायरेक्ट्री (वेबसाइट का रूट फ़ोल्डर) में favicon.ico नाम की फ़ाइल खोजेगा. <link> की मदद से, फ़ाइल के लिए कोई दूसरा नाम और जगह इस्तेमाल की जा सकती है:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

ऊपर दिए गए कोड का मतलब है कि "उन स्थितियों में mlwicon.png को आइकॉन के तौर पर इस्तेमाल करें जहां 16 पिक्सल, 32 पिक्सल या 48 पिक्सल का इस्तेमाल किया जा सकता है." साइज़ एट्रिब्यूट, स्केलेबल आइकॉन के लिए any वैल्यू या स्पेस से अलग की गई स्क्वेयर widthXheight वैल्यू की सूची स्वीकार करता है; इसमें चौड़ाई और ऊंचाई की वैल्यू 16, 32, 48 या उससे ज़्यादा होती है. पिक्सल यूनिट को शामिल नहीं किया जाता है और X केस-इनसेंसिटिव होता है.

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

Safari ब्राउज़र के लिए, दो खास तरह के नॉन-स्टैंडर्ड आइकॉन होते हैं: apple-touch-icon iOS डिवाइसों के लिए और mask-icon macOS पर पिन किए गए टैब के लिए. apple-touch-icon का इस्तेमाल सिर्फ़ तब किया जाता है, जब उपयोगकर्ता किसी साइट को होम स्क्रीन पर जोड़ता है: अलग-अलग डिवाइसों के लिए, अलग-अलग sizes के साथ कई आइकॉन तय किए जा सकते हैं. mask-icon का इस्तेमाल सिर्फ़ तब किया जाएगा, जब उपयोगकर्ता डेस्कटॉप Safari में टैब को पिन करेगा: आइकॉन खुद एक मोनोक्रोम SVG होना चाहिए. साथ ही, color एट्रिब्यूट आइकॉन में ज़रूरी रंग भरता है.

हर पेज या हर पेज लोड पर, पूरी तरह से अलग इमेज तय करने के लिए <link> का इस्तेमाल किया जा सकता है. हालांकि, ऐसा न करें. एक जैसी इमेज का इस्तेमाल करें, ताकि उपयोगकर्ताओं को बेहतर अनुभव मिल सके. Google अपने अलग-अलग ऐप्लिकेशन के लिए अलग-अलग फ़ेविकॉन इस्तेमाल करता है. उदाहरण के लिए, ईमेल का आइकॉन, कैलेंडर का आइकॉन. हालांकि, सभी Google आइकॉन में एक ही कलर स्कीम का इस्तेमाल किया जाता है. आपको आइकॉन से पता चलता है कि खुले हुए टैब में किस तरह का कॉन्टेंट है.

साइट के अन्य वर्शन

साइट के अनुवाद या अन्य वर्शन की पहचान करने के लिए, rel एट्रिब्यूट की alternate वैल्यू का इस्तेमाल करें.

मान लें कि साइट के वर्शन का अनुवाद फ़्रेंच और ब्राज़ीलियन पुर्तगाली में किया गया है:

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

अनुवाद के लिए alternate का इस्तेमाल करते समय, hreflang एट्रिब्यूट को सेट करना ज़रूरी है.

वैकल्पिक वैल्यू का इस्तेमाल सिर्फ़ अनुवाद के लिए नहीं किया जाता. उदाहरण के लिए, type एट्रिब्यूट, आरएसएस फ़ीड के लिए दूसरा यूआरआई तय कर सकता है. ऐसा तब होता है, जब type एट्रिब्यूट को application/rss+xml या application/atom+xml पर सेट किया जाता है.

साइट के फ़र्ज़ी PDF वर्शन का लिंक:

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

अगर rel वैल्यू alternate stylesheet है, तो यह वैकल्पिक स्टाइलशीट तय करती है. साथ ही, title एट्रिब्यूट को सेट करना ज़रूरी है, ताकि उस वैकल्पिक स्टाइल को नाम दिया जा सके.

कैननिकल

अगर आपने मशीन लर्निंग वर्कशॉप के कई अनुवाद या वर्शन बनाए हैं, तो हो सकता है कि सर्च इंजन, आधिकारिक सोर्स की पहचान न कर पाएं. साइट या ऐप्लिकेशन के लिए पसंदीदा यूआरएल की पहचान करने के लिए, rel="canonical" का इस्तेमाल करें.

अपने सभी अनुवादित पेजों और होम पेज पर कैननिकल यूआरएल शामिल करें. इससे हमें यह पता चलेगा कि आपका पसंदीदा यूआरएल कौन-सा है:

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical" कैननिकल लिंक का इस्तेमाल अक्सर पब्लिकेशन और ब्लॉगिंग प्लैटफ़ॉर्म पर क्रॉस-पोस्टिंग के लिए किया जाता है. इससे ओरिजनल सोर्स को क्रेडिट दिया जा सकता है. जब कोई साइट कॉन्टेंट सिंडिकेट करती है, तो उसे ओरिजनल सोर्स का कैननिकल लिंक शामिल करना चाहिए.

स्क्रिप्ट

<script> टैग में स्क्रिप्ट शामिल होती हैं. डिफ़ॉल्ट टाइप JavaScript होता है. अगर आपको किसी दूसरी स्क्रिप्टिंग भाषा का इस्तेमाल करना है, तो MIME टाइप के साथ type एट्रिब्यूट या JavaScript मॉड्यूल के लिए type="module" शामिल करें. सिर्फ़ JavaScript और JavaScript मॉड्यूल को पार्स और एक्ज़ीक्यूट किया जाता है.

<script> टैग का इस्तेमाल, अपने कोड को इनकैप्सुलेट करने या किसी बाहरी फ़ाइल को डाउनलोड करने के लिए किया जा सकता है. MLW में कोई बाहरी स्क्रिप्ट फ़ाइल नहीं होती. ऐसा इसलिए है, क्योंकि वेबसाइट को काम करने के लिए JavaScript की ज़रूरत नहीं होती. यह एचटीएमएल सीखने का पाथ है, JavaScript का नहीं.

बाद में, ईस्टर एग बनाने के लिए, आपको JavaScript का एक छोटा सा हिस्सा शामिल करना होगा:

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

यह स्निपेट, switch आईडी वाले एलिमेंट के लिए एक इवेंट हैंडलर बनाता है. JavaScript का इस्तेमाल करते समय, किसी एलिमेंट के मौजूद होने से पहले उसका रेफ़रंस देने से बचें. switch अभी मौजूद नहीं है. इसलिए, हम इवेंट हैंडलर को अभी शामिल नहीं करेंगे.

लाइट स्विच एलिमेंट जोड़ने पर, हम <script> को <head> में जोड़ने के बजाय, <body> के सबसे नीचे जोड़ेंगे. क्यों? इसकी दो वजहें हो सकती हैं. हम यह पक्का करना चाहते हैं कि स्क्रिप्ट में रेफ़रंस किए गए एलिमेंट मौजूद हों. ऐसा इसलिए, क्योंकि हम इस स्क्रिप्ट को DOMContentLoaded इवेंट पर आधारित नहीं कर रहे हैं. साथ ही, मुख्य रूप से JavaScript सिर्फ़ रेंडरिंग को ब्लॉक करने वाली नहीं होती है. स्क्रिप्ट डाउनलोड होने पर ब्राउज़र सभी ऐसेट डाउनलोड करना बंद कर देता है. साथ ही, JavaScript का एक्ज़ीक्यूशन पूरा होने तक, अन्य ऐसेट डाउनलोड करना फिर से शुरू नहीं करता है. इस वजह से, आपको अक्सर JavaScript के अनुरोध, दस्तावेज़ के आखिर में मिलते हैं. ये अनुरोध, हेड में नहीं होते.

JavaScript को डाउनलोड और एक्ज़ीक्यूट करने में लगने वाले समय को कम करने के लिए, दो एट्रिब्यूट का इस्तेमाल किया जा सकता है: defer और async. defer का इस्तेमाल करने पर, डाउनलोड के दौरान एचटीएमएल रेंडरिंग ब्लॉक नहीं होती है. साथ ही, JavaScript सिर्फ़ तब काम करती है, जब दस्तावेज़ रेंडर हो जाता है. async का इस्तेमाल करने पर, डाउनलोड के दौरान भी रेंडरिंग ब्लॉक नहीं होती. हालांकि, स्क्रिप्ट डाउनलोड हो जाने के बाद, JavaScript को एक्ज़ीक्यूट करते समय रेंडरिंग रुक जाती है.

किसी बाहरी फ़ाइल में MLW के JavaScript को शामिल करने के लिए, यह लिखा जा सकता है:

<script src="js/switch.js" defer></script>

defer एट्रिब्यूट जोड़ने से, स्क्रिप्ट के एक्ज़ीक्यूशन को तब तक के लिए रोक दिया जाता है, जब तक कि सब कुछ रेंडर न हो जाए. इससे स्क्रिप्ट को परफ़ॉर्मेंस पर असर डालने से रोका जा सकता है. async और defer एट्रिब्यूट, सिर्फ़ बाहरी स्क्रिप्ट पर मान्य होते हैं.

बेस

एक और एलिमेंट है, जो सिर्फ़ <head>. में मिलता है. <base> एलिमेंट का इस्तेमाल कभी-कभी किया जाता है. इससे डिफ़ॉल्ट लिंक यूआरएल और टारगेट सेट किया जा सकता है. href एट्रिब्यूट, सभी मिलते-जुलते लिंक के लिए बेस यूआरएल तय करता है.

target एट्रिब्यूट, <base> के साथ-साथ लिंक और फ़ॉर्म पर भी मान्य होता है. यह सेट करता है कि वे लिंक कहां खुलने चाहिए. _self का डिफ़ॉल्ट विकल्प, लिंक की गई फ़ाइलों को मौजूदा दस्तावेज़ के कॉन्टेक्स्ट में खोलता है. अन्य विकल्पों में _blank शामिल है. इससे हर लिंक नई विंडो में खुलता है. इसके अलावा, _parent विकल्प से मौजूदा कॉन्टेंट खुलता है. अगर ओपनर कोई iframe नहीं है, तो यह विकल्प self के जैसा हो सकता है. साथ ही, _top विकल्प से लिंक उसी ब्राउज़र टैब में खुलता है, लेकिन पूरे टैब पर दिखने के लिए किसी भी कॉन्टेक्स्ट से बाहर निकल जाता है.

ज़्यादातर डेवलपर, <base> एट्रिब्यूट का इस्तेमाल करने के बजाय, कुछ लिंक में target एट्रिब्यूट जोड़ते हैं. ऐसा इसलिए, ताकि वे लिंक या फ़ॉर्म पर मौजूद लिंक को नई विंडो में खोल सकें.

<base target="_top" href="https://machinelearningworkshop.com" />

अगर हमारी वेबसाइट, Yummly जैसी किसी साइट पर iframe में नेस्ट की गई है, तो <base> एलिमेंट को शामिल करने का मतलब है कि जब कोई व्यक्ति हमारे दस्तावेज़ में मौजूद किसी लिंक पर क्लिक करेगा, तो लिंक iframe से बाहर लोड हो जाएगा और पूरी ब्राउज़र विंडो पर दिखेगा.

इस एलिमेंट की एक कमी यह है कि ऐंकर लिंक, <base> के साथ हल किए जाते हैं. <base>, लिंक <a href="#ref"> को <a target="_top" href="https://machinelearningworkshop.com#ref"> में बदल देता है. इससे फ़्रैगमेंट अटैच करके, बेस यूआरएल पर एचटीटीपी अनुरोध ट्रिगर होता है.

<base> के बारे में कुछ और बातें:

किसी दस्तावेज़ में सिर्फ़ एक <base> एलिमेंट हो सकता है.
इसका इस्तेमाल, किसी भी रिलेटिव यूआरएल से पहले किया जाना चाहिए. इसमें स्क्रिप्ट या स्टाइलशीट के रेफ़रंस भी शामिल हैं.

अब कोड ऐसा दिखता है:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

एचटीएमएल टिप्पणियां

स्क्रिप्ट को ऐंगल ब्रैकेट, डैश, और एक्सक्लेमेशन मार्क में रैप किया जाता है. इस तरह, एचटीएमएल को टिप्पणी के तौर पर मार्क किया जाता है.  के बीच मौजूद कोई भी चीज़ दिखती नहीं है या पार्स नहीं होती है. एचटीएमएल वाली टिप्पणियों को पेज पर कहीं भी रखा जा सकता है. हालांकि, इन्हें स्क्रिप्ट या स्टाइल ब्लॉक में नहीं रखा जा सकता. इसके लिए, आपको JavaScript और सीएसएस वाली टिप्पणियों का इस्तेमाल करना चाहिए.

आपने <head> में शामिल की जाने वाली बुनियादी बातों के बारे में जान लिया है. हालांकि, आपको बुनियादी बातों से ज़्यादा जानकारी चाहिए. अगले सेक्शन में, हम मेटा टैग के बारे में जानेंगे. साथ ही, यह भी जानेंगे कि जब आपकी वेबसाइट को सोशल मीडिया पर लिंक किया जाता है, तो यह कैसे कंट्रोल किया जा सकता है कि क्या दिखे.

देखें कि आपको कितना समझ आया

दस्तावेज़ के स्ट्रक्चर के बारे में अपनी जानकारी की जांच करें.

दस्तावेज़ की भाषा का पता कैसे लगाया जाता है?

एचटीएमएल टैग में language एट्रिब्यूट जोड़ें.

फिर से कोशिश करें.

एचटीएमएल टैग में lang एट्रिब्यूट जोड़ें.

सही!

Add the <lang> एलिमेंट को <head> में जोड़ें.

फिर से कोशिश करें.

उन एलिमेंट को चुनें जिन्हें <head> में शामिल किया जा सकता है.

<p>

फिर से कोशिश करें.

<title>

सही!

<meta>

सही!

पीछे जाएं

एचटीएमएल की खास जानकारी

आगे बढ़ें

मेटाडेटा

हर एचटीएमएल दस्तावेज़ में जोड़ें

<!DOCTYPE html>

<html>

सामग्री भाषा

<head>

<head> में मौजूद ज़रूरी कॉम्पोनेंट

कैरेक्टर एन्कोडिंग

दस्तावेज़ शीर्षक

व्यूपोर्ट मेटाडेटा

अन्य <head> कॉन्टेंट

सीएसएस

<link> एलिमेंट के अन्य इस्तेमाल

फ़ेविकॉन

साइट के अन्य वर्शन

कैननिकल

स्क्रिप्ट

बेस

एचटीएमएल टिप्पणियां

देखें कि आपको कितना समझ आया

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` में मौजूद ज़रूरी कॉम्पोनेंट

अन्य `<head>` कॉन्टेंट

`<link>` एलिमेंट के अन्य इस्तेमाल