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

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

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

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

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

<!DOCTYPE html>

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

<html>

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

सामग्री भाषा

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

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

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

शुरुआती और बंद <html> टैग के बीच में, हमें दो बच्चे मिले हैं: <head> और <body>:

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

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

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

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

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

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

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

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

<meta charset="utf-8" />

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

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

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

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

<title>Machine Learning Workshop</title>

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

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

<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> के ज़्यादा विकल्प सेव किए जा रहे हैं.

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

सीएसएस

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

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

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

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

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

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

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

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

अपने दस्तावेज़ में, वैकल्पिक रूप से कैस्केड लेयर में स्टाइल शीट इंपोर्ट करने के लिए, @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> पर इनलाइन स्टाइल जोड़ी जा सकती हैं. हालांकि, style में <style> को स्टाइल करना और भी मज़ेदार है. मैं भटकता हूं.

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

हालांकि, हर पेज पर या हर पेज के लोड होने पर, एक अलग इमेज तय करने के लिए, <link> का इस्तेमाल किया जा सकता है, लेकिन ऐसा न करें. एक ही इमेज का इस्तेमाल करें, ताकि एक ही इमेज का इस्तेमाल करके वीडियो बनाए जा सकें और उपयोगकर्ता को बेहतर अनुभव दिया जा सके! Twitter नीली चिड़िया का इस्तेमाल करता है: जब आपको अपने ब्राउज़र टैब में नीली चिड़िया दिखाई देती है, तो आपको पता चल जाता है कि वह टैब बिना टैब क्लिक किए Twitter पेज पर खुला है. 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 एट्रिब्यूट application/rss+xml या application/atom+xml पर सेट किया जाता है, तो type एट्रिब्यूट किसी आरएसएस फ़ीड के लिए वैकल्पिक यूआरआई तय कर सकता है. चलिए, साइट के ऐसे 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 है. अगर स्क्रिप्ट की कोई दूसरी भाषा इस्तेमाल की जा रही है, तो माइम टाइप के साथ 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 में, आप किसी एलिमेंट के मौजूद होने से पहले उसका रेफ़रंस नहीं देना चाहते. यह अभी तक मौजूद नहीं है, इसलिए हम इसे अभी शामिल नहीं करेंगे. जब हम लाइट स्विच एलिमेंट को जोड़ते हैं, तब हम <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 नहीं है या _top है, जो उसी ब्राउज़र टैब में है, लेकिन पूरे टैब पर ले जाने के लिए किसी भी कॉन्टेक्स्ट से पॉप-आउट होता है.

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

<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" src="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 एट्रिब्यूट जोड़ें.
सही जवाब!
<head> में Add the <lang> एलिमेंट.
फिर से कोशिश करें.

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

<p>
फिर से कोशिश करें.
<title>
सही जवाब!
<meta>
सही जवाब!