XHTML संरचनात्मकता 2: केस स्टडी: W3school की संरचनात्मक टैग

किसी भी तरह, इस चयन को नहीं छोड़ें। इस चैप्टर को पढ़ने से आपकी कौशल बढ़ेगी, आपके वेबपेज को उल्लेखनीय रूप से घटाना होगा और आपको टैग और डिजाइन के बीच के अंतर को स्पष्ट रूप से समझाना होगा। इस चैप्टर की विचारधारा आसानी से सीखी जा सकती है, लेकिन यह वेबसाइट के प्रदर्शन, डिजाइन, निर्माण और अद्यतन करने की सुविधा को बहुत अधिक बढ़ा देती है।

इस चयन में, आपको यह सीखना होगा कि कैसे तर्कसंगत और घनी टैग लिखते हैं ताकि आपको बैंडविड्थ ट्रैफिक को लगभग 50% घटाने की क्षमता हो, साथ ही सर्वर के भार और दबाव को कम करने और वेबसाइट के लोड काल को कम करने के लिए। उन प्रदर्शन तत्वों को हटाने और उन बुरी आदतों को बदलने के द्वारा जो कोई फायदा नहीं है, हम उक्त उद्देश्यों को प्राप्त कर सकते हैं।

ये खराब आदतें नेटवर्क के कई साइटों में मौजूद हैं, विशेष रूप से जो कुछ CSS को प्रमुख रूप से टेबल आधारित डिजाइन के साथ मिलाते हैं। यह काम बहुत कठिन और असंवेदनशील है, चाहे वो किसी अन्य क्षेत्र में अनुभवी डिजाइनर हों या नहीं। साथ ही, इस समस्या का संभावना समान है, चाहे वो हाथ से कोड लिखने वाले साइट हों या ड्रीमवेवर और गोलाइव जैसे दृश्य संपादकों का उपयोग करके साइट बनाने वाले साइट हों।

इस खंड में हम इन सामान्य गलतियों को उठाएंगे, ताकि आप उन्हें पहचान सकें, उनका निवारण कर सकें और गलतियों को सुधारने के लिए सीख सकें। हम यूनिक रोलएटर एट्रिब्यूट (id) का विस्तार करेंगे - और दिखाएंगे कि यह कैसे आपको बहुत संक्षिप्त XHTML लिखने की क्षमता देता है, चाहे आपका डिजाइन मिश्रित लेने-देने या शुद्ध CSS लेने-देने हो।

हर एलिमेंट को संरचनात्मक करना आवश्यक है क्या?

जैसा कि पिछले खंड में हमने बताया था, हर एलिमेंट को संरचनात्मक किया जा सकता है, CSS से एक व्यवस्थापन सूची या असंगठित सूची को पूर्णतः नेविगेशन बार के रूप में प्रदर्शित किया जा सकता है, जिसमें वापसी बटन का प्रभाव भी है। दस्तावेज़ की सामग्री को सामान्य एलिमेंटों के द्वारा चिह्नित किया जा सकता है, जो विशिष्ट संरचनात्मक एट्रिब्यूट्स के द्वारा उनके वेबसाइट डिजाइन में अभिन्न भूमिका को संकेत करते हैं।

हमने 2006 में CodeW3C.com का पहला चीनी टेस्ट वर्जन बनाया, हमने शुरू से ही CSS का इस्तेमाल लेने-देने के लिए किया और दस्तावेज़ को संरचनात्मक बनाने के लिए XHTML का इस्तेमाल किया। इसमें सभी एलिमेंट संरचनात्मक हैं, से शीर्षक तक सूची और पैराग्राफ़ तक, अच्छी तरह से संरचनात्मक हैं। आप कोडवै ऑनलाइन के हर पृष्ठ पर पहले पृष्ठ बटन और द्वितीयक मेन्यू बटन का प्रतिक्रियाशील इस्तेमाल देखने को मिलेगा। इसके लिए दोनों संघटकों का XHTML कोड नीचे दिया है:

<div id="header"><h1><a href="/">codew3c ऑनलाइन ट्यूटोरियल</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML शिक्षा">HTML शिक्षा</a></li>
<li id="x"><a href="/x.asp" title="XML शिक्षा">XML शिक्षा</a></li>
<li id="b"><a href="/b.asp" title="ब्राउज़र स्क्रिप्ट">ब्राउज़र स्क्रिप्ट</a></li>
<li id="s"><a href="/s.asp" title="सर्वर स्क्रिप्ट">सर्वर स्क्रिप्ट</a></li>
<li id="d"><a href="/d.asp" title="dot net ट्यूटोरियल">dot net ट्यूटोरियल</a></li>
<li id="m"><a href="/m.asp" title="मल्टीमीडिया ट्यूटोरियल">मल्टीमीडिया ट्यूटोरियल</a></li>
<li id="w"><a href="/w.asp" title="वेबसाइट बिल्डर">वेबसाइट बिल्डर</a></li>
</ul>
</div>

डिव, इड और अन्य सहायक

यदि सही तरीके से इस्तेमाल किया जाए, डिव एक बहुत अच्छी संरचनात्मक टैग की सहायता कर सकता है, और इड एक आश्चर्यजनक छोटा उपकरण है, जो आपको बहुत संक्षिप्त XHTML लिखने की क्षमता देता है, CSS का अच्छा इस्तेमाल करने की एक चौकस कौशल प्रदान करता है, और DOM के माध्यम से साइट में जटिल और उत्कृष्ट व्यवहार जोड़ सकता है।

W3C अपने नवीनतम XHTML2 डिफ़ॉल्ट में XHTML संरचना मॉडल में डिव को इस तरह परिभाषित करता है:

डिव एलिमेंट, इड, क्लास और रोल एट्रिब्यूट्स के साथ सहयोग से, दस्तावेज़ में अतिरिक्त संरचना जोड़ने के लिए एक सामान्य तरीका प्रदान करता है। इस एलिमेंट ने सामग्री पर प्रस्तुतीकरण के शैली को परिभाषित नहीं किया है। इसलिए, निर्माता इस एलिमेंट को स्टाइलशीट, xml:lang, एट्रिब्यूट्स आदि के साथ सहयोग से, XHTML को अपनी आवश्यकताओं और रुचि के अनुसार करने के लिए इस्तेमाल कर सकता है।

div विभाजन का लघुचित्र है। विभाजन का अर्थ है विभाजन, क्षेत्र, समूह। जैसे, जब आप एक श्रृंखला के लिंक को एक साथ जोड़ते हैं, तो यह दस्तावेज़ का एक विभाजन बनता है।

संरचना के लिए सामान्य तरीका

सभी HTML लिखने वाले व्यक्ति सामान्य तत्वों जैसे परिच्छेद और शीर्षक के लिए परिचित हैं, लेकिन कुछ लोगों को div इतना परिचित नहीं है। W3C के वर्णन में हमें div तत्व को समझने के लिए महत्वपूर्ण बातें मिल सकती हैं, "एक संरचना के लिए एक सामान्य तरीका।"

इस साइट के पहले पृष्ठ पर, हमने पाठ्यक्रम सूची को एक div के अंदर बंध कर दिया है, क्योंकि पाठ्यक्रम सूची निबंध के किसी तत्व के एक भाग नहीं है। h2 तत्व हर पाठ्यक्रम के शीर्षक को चिह्नित करता है, और ul सूची तत्व हर पाठ्यक्रम के विस्तृत सूची को चिह्नित करता है। लेकिन बड़े और विशिष्ट अर्थ में, यह पाठ्यक्रम सूची एक संरचनात्मक भूमिका निभाता है, अर्थात द्वितीय सर्वार्थना तत्व। इस भूमिका को बल देते हुए, हमने navsecond इडी इस div को चिह्नित किया है।

<div id="navsecond">
<h2>HTML पाठ्यक्रम</h2>
<ul>
<li><a href="/html/index.asp" title="HTML पाठ्यक्रम">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML पाठ्यक्रम">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS पाठ्यक्रम">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP पाठ्यक्रम">TCP/IP</a></li>
</ul>
<h2>XML पाठ्यक्रम</h2>
<ul>
<li><a href="/xml/index.asp" title="XML पाठ्यक्रम">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL भाषा">XSL</a></li>
... ...
... ...
</div>

आप किसी नाम का उपयोग कर सकते हैं।"Gladys" और "orangebox" दोनों XHTML के नामकरण नियम के अनुसार पूरी तरह से ठीक हैं। लेकिन अर्थवान (semantic) या मेटा-संरचनात्मक (meta-structural) नाम बेहतर है (अर्थात जो उस तत्व के कार्य को समझाता है)।

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

इसलिए, id को "menu"、"content" या "searchform" के रूप में नामित करना आपको याद रखने में मदद करेगा। आगे चलकर, टैग का निर्माण नहीं डिजाइन है; संरचनात्मक पृष्ठ को आपके चाहते किसी भी रूप में फॉर्मेट किया जा सकता है। इस कार्य का परिणाम यह है कि, आपको चुना हुआ CSS ब्रेकआउट या मिश्रित ब्रेकआउट का उपयोग करने वाले होने की बात कही जा सकती है, आपको प्रदर्शन टैग को याद रखने की आदत को पूरी तरह से बदलना होगा。

id विरुद्ध class

id गुण XHTML के लिए नया नहीं है; class गुण या div तत्व भी नहीं। वे दोनों HTML युग से वापस आते हैं। id गुण को किसी तत्व को एक अद्वितीय नाम देता है। प्रत्येक नाम केवल उस पृष्ठ पर एक बार ही इस्तेमाल किया जा सकता है।(उदाहरण के लिए, अगर आपके पृष्ठ में id वाला div है, तो एक और div या किसी अन्य तत्व को इस नाम का इस्तेमाल नहीं किया जा सकता। विपरीत रूप से, class गुण को पृष्ठ में बार-बार इस्तेमाल किया जा सकता है(उदाहरण के लिए, पृष्ठ में पांच अनुच्छेद भी "small" या "footnote" नाम की class इस्तेमाल कर सकते हैं)। नीचे दिए गए टैग इड और class के अंतर को स्पष्ट करने में मदद करेंगे:

<div id="searchform">सर्च फॉर्म घटक यहाँ जाते हैं। यह
पृष्ठ के एक क्षेत्र अद्वितीय है。</div>
<div class="blogentry">
   <h2>आज का ब्लॉग पोस्ट</h2>
   <p>ब्लॉग सामग्री यहाँ आती है。</p>
   <p>यह एक और ब्लॉग सामग्री का अनुच्छेद है。</p>
   <p>जैसे कि एक पृष्ठ पर कई अनुच्छेद हो सकते हैं, इसी तरह
   ब्लॉग में कई प्रविष्टियां हो सकती हैं। एक ब्लॉग पृष्ठ का उपयोग कर सकता है
   क्लास "blogentry" (या किसी अन्य) की कई उदाहरण हो सकते हैं
   class).</p>
</div>
<div class="blogentry">
   <h2>कल का ब्लॉग पोस्ट</h2>
   वास्तव में, यहाँ हम एक और class के div के अंदर हैं
   "blogentry."
   वे चूहों की तरह प्रजनित होते हैं।
   यदि इस पृष्ठ पर दस ब्लॉग पोस्ट हैं, तो इस तरह हो सकता है
   बीस div के रूप में class "blogentry" भी हैं।
</div>

इस उदाहरण में, 'searchform' नाम के div को उस पृष्ठ के क्षेत्र को बंद करने के लिए उपयोग किया जाता है जो तलाश फॉर्म शामिल है, और div class="blogentry" को ब्लॉग में प्रत्येक लेख के प्रवेश को बंद करने के लिए उपयोग किया जाता है। पृष्ठ में केवल एक तलाश फॉर्म है, इसलिए हमने इस एकल घटक को id के रूप में चुना है। लेकिन ब्लॉग के कई (लेख) प्रवेश हैं, इसलिए class विशेषता का उपयोग इस स्थिति में किया जाता है। इसी तरह, समाचार साइटें अक्सर कई div हैं, जिनकी class नाम को 'newsitem' या अन्य कुछ के रूप में रखा जा सकता है।

तथापि, सभी साइटों को div की आवश्यकता नहीं होती। ब्लॉग साइटें केवल h1, H2, और h2 शीर्षक और <p> पैराग्राफ उपयोग कर सकती हैं, समाचार साइटें भी इसी तरह हैं। हम यहाँ class के 'blogentry' वाले div को दिखाते हैं, इसका उद्देश्य आपको इस सिद्धांत को दिखाना है कि एक ही HTML दस्तावेज़ में कई बार class का उपयोग किया जा सकता है, लेकिन id का उपयोग केवल एक बार किया जा सकता है।

बाले चिपके कागज सिद्धांत

id अधिनियम को बाले चिपके कागज के रूप में सोचना मददगार हो सकता है। मैं बर्फाई के उपर एक चिपके कागज लगा देता हूं ताकि मुझे दूध खरीदने के लिए याद दे दे, फोन पर भी एक लगा देता हूं ताकि मुझे एक विलंब से भुगतान करने वाले ग्राहक से फोन करने के लिए याद दे दे। एक और, लेखापत्र के बांधे के उपर लगा देता हूं, ताकि मुझे इस महीने 15 तारीख तक भुगतान करने के लिए याद दे दे।

id दस्तावेज़ में विशेष क्षेत्रों को चिह्नित करता है, ताकि आपको संदेश दे कि कौन सा क्षेत्र विशेष संसाधन की आवश्यकता है, इस बात में id अधिनियम बाले चिपके कागज के समान है। विशेष संसाधन को प्राप्त करने के लिए, आपको शैली पट्टी में कुछ नियम लिखने की आवश्यकता है या फिर JavaScript फ़ाइल में कुछ पढ़े-लिखे जोड़ें। उदाहरण के लिए, आपके CSS फ़ाइल में कुछ विशेष नियम हैं, जो केवल id नाम के 'searchform' वाले div के आइटमों पर लागू होते हैं।

当某一 id 属性作为一个有磁性的东西（磁铁）被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多सेलेक्टर बनानाके तरीके, हालांकि id बहुत सहज उपयोगी है और अनेक प्रयोग हैं。

id की शक्ति

id एट्रिब्यूट अविश्वसनीय रूप से मजबूत है।यह दिए गए क्षमताएँ है:

  • एक स्टाइल शीट चयनकर्ता के रूप में, हमें एक संकुचित न्यूनतम XHTML बनाने की क्षमता देता है。
  • एक हार्डकॉर्प (hardcore) लक्ष्य अण्डर, अतीत name एट्रिब्यूट के स्थान पर。
  • एक डॉम आधारित स्क्रिप्ट से विशेष एलीमेंट को पाठित करने के तरीके के रूप में。
  • एक ऑब्जैक्ट एलीमेंट के नाम के रूप में。
  • एक सामान्य प्रयोग (सामान्य प्रोसेसिंग) उपकरण (W3C के उदाहरण में, "जब डेटा को HTML पेज से डाटाबेस में अंकित किया जाता है, या HTML डॉक्यूमेंट को अन्य फॉर्मेट में बदला जाता है आदि में, एक डोमेन पहचान उपकरण के रूप में इस्तेमाल किया जाता है."।

id के नियम

id वैल्यू को अक्षर या एक निशानी से शुरू होना चाहिए; यह नहीं करना चाहिए कि यह आंकड़े से शुरू हो।हालांकि W3C वेरिफाइयरिंग इस त्रुटि को पकड़ नहीं सकता है, लेकिन XML पार्सर के लिए यह त्रुटि उठाई जाएगी।इसके साथ ही, अगर आप id को फॉर्म में JavaScript के साथ इस्तेमाल करते हैं, तो id नाम और वैल्यू को वैध JavaScript वेरियेबल होना चाहिए।स्पेस और हटचार (hyphen), खासकर हटचार, अनुमति नहीं है।इसके अलावा, class या id नाम के लिए निशानी का उपयोग करना अच्छा विचार नहीं है, क्योंकि यह CSS2.0 (और कुछ ब्राउज़र) में सीमित है。

सांकेतिक टैग और उपयोगिता

अब, हमने व्यापक प्रयोग होने वाले XHTML एलीमेंट (विशेष रूप से div और id) के बारे में चर्चा की है; अब हम इस साइट के होम पेज के बारे में देखेंगे।पहले हम इस साइट की शीर्ष पान के बारे में यहाँ स्थित मेनू को पुनरावलोकित करेंगे:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML शिक्षा">HTML शिक्षा</a></li>
<li id="x"><a href="/x.asp" title="XML शिक्षा">XML शिक्षा</a></li>
<li id="b"><a href="/b.asp" title="ब्राउज़र स्क्रिप्ट">ब्राउज़र स्क्रिप्ट</a></li>
<li id="s"><a href="/s.asp" title="सर्वर स्क्रिप्ट">सर्वर स्क्रिप्ट</a></li>
<li id="d"><a href="/d.asp" title="dot net ट्यूटोरियल">dot net ट्यूटोरियल</a></li>
<li id="m"><a href="/m.asp" title="मल्टीमीडिया ट्यूटोरियल">मल्टीमीडिया ट्यूटोरियल</a></li>
<li id="w"><a href="/w.asp" title="वेबसाइट बिल्डर">वेबसाइट बिल्डर</a></li>
</ul>
</div>

हमारे पास सात लिंक हैं, जिसे उसके संबंधित सामग्री के लिए एक id आवंटित किया गया है: उदाहरण के लिए, 'h' id को HTML ट्यूटोरियल के लिए आवंटित किया गया है, इसी तरह। साथ ही, ये लिंक 'menu' नाम की सूची एलीमेंट के भीतर बंद किए गए हैं, 'menu' id को इस सूची के कार्य को इंगित करता है - एक मेन्यू सूची, और अधिक बाहरी 'navfirst' div को इस सेक्शन को बाहरी रूप से चिह्नित करने के लिए उपयोग किया जाता है, इसे मुख्य सामग्री (maincontent), साइडबार (sidebar) और फुटर (footer) जैसे एलीमेंटों से अलग करता है।

div और ul दोनों एलीमेंट वास्तविक संरचना प्रदान करते हैं, अर्थात् उनके भीतरी सामग्री के कार्य (नेविगेशन बार) और उसके दस्तावेज़ में स्थान (पृष्ठ के हेडर स्थान) को इंगित करते हैं। विपरीत रूप से, पारंपरिक टैबल लेआउट डाटा के किसी भी अर्थसंबंधी जानकारी को प्रदान नहीं करता है, साथ ही तीन गुना बैंडविड्थ खराब कर सकता है।

ध्यान दें कि इन टैगों में img टैग शामिल नहीं है, इसलिए वहां width, height, background या border जैसी विशेषताएँ नहीं हैं। साथ ही, यह टैबल कोष्ठ का उपयोग नहीं करता है, इसलिए इसके साथ जुड़ी विशेषताएँ भी नहीं हैं। यह बहुत साफ़ और छोटा है, साथ ही सभी जानने योग्य जानकारी प्रदान करता है।

CSS के साथ सहयोग के साथ, ये टैग साइट के आगमनकर्ताओं को ठीक से और तेज़ी से लोड करने वाली लेआउट प्रदान करते हैं। साथ ही, आगमनकर्ताओं को अधिक लचीला और विविध आकार की संभावना प्रदान करते हैं। और बिना CSS के इस इकाई में, हमारे संरचनात्मक टैग अच्छी तरह से सभी सामग्री को बिना किसी भी भंगावस्था के प्रदान कर सकते हैं।

दृष्टिशील पाठकों को नजर आई होगी कि a एलीमेंट में शामिल टेक्स्ट ब्राउज़र द्वारा दिखाया नहीं गया है, इसका श्रेय संरचनात्मक टैगों और CSS के साथीदारी को दिया जाता है, जो हमें कुछ लाइनों के माध्यम से CSS नियमों को परिभाषित करने की संभावना प्रदान करता है, जब उपयोगकर्ता ग्राफिक ब्राउज़र का उपयोग करते हैं, तो वे सुंदर नेविगेशन बटन देख सकते हैं, और जब उपयोगकर्ता साफ़ टेक्स्ट रीडर का उपयोग करते हैं, तो वे भी पूरा टेक्स्ट प्राप्त कर सकते हैं, इस प्रकार, सभी उपयोगकर्ताओं के लिए सामग्री एकसी है।

और, चूंकि टैग में इमेज और टेबल सेल शामिल नहीं है, इस नेविगेशन कंपोजिटन को संरचना को बदले बिना साइट के किसी भी पृष्ठ से उद्धार किया जा सकता है, साथ ही उसे अलग-अलग दृश्यसंग दिया जा सकता है।संग्रह की बात करें, नकलीबंद द्वारा कोड को मोड्यूलाइज़ करके, हमने कोड की पुनर्व्यवहारिता को बढ़ाया है।