XHTML संरचनात्मकता 1: XHTML के द्वारा वेबसाइट का पुनर्निर्माण करना

हमने इस भाग के लिए लिखी शीर्षक यह है: “XHTML : सरल नियम, आसान दिशानिर्देश।” इसका एक कारण यह है कि इस भाग में चर्चित नियम और दिशानिर्देश सरल और आसान हैं। दूसरा कारण यह है कि एक सरल और आसान WEB डिजाइन पुस्तक, जैसे कि सुपरमार्केट के नए मुफ्त उत्पाद, आम हो लेकिन लोगों का ध्यान आकर्षित करती है, ऐसी चीज़ लोगों की रूचि को जगाती है और उन्हें प्रयास करने के लिए प्रेरित करती है।

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

दूसरी ओर, पुनर्निर्माण ही XHTML का सच्चा अर्थ है。

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

XHTML नियम सारांश

पारंपरिक HTML को XHTML 1.0 में बदलना तेज़ और बिना दर्ददायक है, अगर आप कुछ सरल नियमों और दिशानिर्देशों का पालन करें। HTML का उपयोग करने वाले को भी यह बाधित नहीं करेगा।

  • सही दस्तावेज़ विधि घोषणा और नामस्पति का उपयोग करें。
  • अपनी सामग्री की विधि को meta एलीमेंट के द्वारा घोषित करें。
  • सभी एलीमेंट और गुण के लिए न्यूनतम अक्षर उपयोग करें。
  • सभी गुण मानों को उद्धरणों में लिखें。
  • सभी गुणों के लिए मान आबंटित करें。
  • सभी टैग को बंद करें。
  • खाली टैग बंद करने के लिए अंतर और निशानी का उपयोग करें。
  • टिप्पणियों में दो निशानी लिखने की आदत न करें。
  • सुनिश्चित करें कि छोटे से और और लेखन के लिए < और & का उपयोग करें

Unicode और अन्य चार्टसेट

XML, XHTML और HTML 4.0 दस्तावेज़ की मूल चार्टसेट Unicode है, जो Unicode एसोसिएशन द्वारा परिभाषित एक मानक है। Unicode एक पूर्ण चार्टसेट है, जिसमें प्रत्येक चार्ट एक विशिष्ट अद्यतन नंबर प्रदान करता है, चाहे वह प्लेटफॉर्म, कार्यक्रम या भाषा हो। Unicode भी हमारे पास अधिक से अधिक सामान्य अल्फबेट की बस्ती है, हालांकि यह एक अल्फबेट नहीं है, बल्कि एक नंबर निर्देशक योजना है。

यद्यपि Unicode वेब दस्तावेज़ की मूल चार्टसेट है, डेवलपर अपने अन्य चार्टसेट को चुन सकते हैं जो उनके लिए अधिक सही है। उदाहरण के लिए, अमेरिका और यूरोपीय वेबसाइटें अक्सर ISO-8859-1 (Latin-1) एनकोडिंग का उपयोग करती हैं, जबकि चीन का राष्ट्रीय मानक gb2312 है。

दस्तावेज़ को अभिव्यक्ति के लिए टैग करें, न कि शैली के लिए

याद रखें: CSS का अधिकतम उपयोग लेआउट के लिए करें। वेब स्टैंडर्ड के विश्व में, XHTML टैग रूपांकन केवल डॉक्यूमेंट संरचना से संबंधित है, नहीं कि प्रदर्शन से。

संरचना संगठित दस्तावेज़ ब्राउज़र को ज्यादा से ज्यादा अर्थवानी अर्थ संचार कर सकते हैं, चाहे ब्राउज़र पच्चीसी या शानदार डेस्कटॉप ग्राफिक्स ब्राउज़र हो। संरचना संगठित दस्तावेज़ उपयोगकर्ता को दृश्यक अर्थ संचार कर सकते हैं, चाहे वाधू ब्राउज़र हो या उपयोगकर्ता द्वारा CSS को बंद करे गया नवीन ब्राउज़र हो।

हर साइट तुरंत HTML तालिका लेआउट को छोड़ नहीं सकती। CSS के अविष्कारक, W3C, 2002 नवंबर तक अपनी आधिकारिक वेबसाइट को CSS लेआउट में बदलने के लिए नहीं गया। लेकिन अब, हम इस आदर्श के अनुसार बड़ा कदम उठा सकते हैं, अभी से अलग रंग को संरचना से अलग करके (या देटा से डिजाइन), यहां तक कि मिश्रित पारंपरिक लेआउट भी इससे लाभान्वित हो सकता है。

नीचे कुछ सुझाव हैं जो आपको अधिक संरचित तरीके से सोचने में मदद करेंगे:

सारणी के भीतर का रंग

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

वास्तव में, HTML के अनुसार, हमें सामग्री को संगठित स्तरबद्ध संरचना में संरचित करना चाहिए। जब ब्राउज़र CSS का समर्थन नहीं करते थे, तब हम बिना किसी उलटी-उलटी नहीं बिक्री भी नहीं कर सकते थे। लेकिन आज, हमारी डिजाइन को बिना किसी कमी के कार्यान्वित करते हुए, हम अंतर्निहित संरचना संगठित दस्तावेज़ देने की क्षमता रखते हैं。

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

<h1>मेरा विषय</h1>
<p>परिचयात्मक लिखित</p>
<h2>सहायक दृष्टिकोण</h2>
<p>संबंधित लिखित</p>

साथ ही, अनुप्रयोग की अनुमति नहीं दें, जैसे <font> या अर्थहीन एलीमेंट जैसे <br> को वास्तव में नहीं मौजूद लॉजिकल संरचना को सिमुलेट करने के लिए

जैसे कि इस तरह नहीं करें:

मेरा विषय<br />
परिचयात्मक लिखित<br /><br />
सहायक दृष्टिकोण<br />
संबंधित लिखित

एलीमेंट के अर्थ के अनुसार उनका उपयोग करें, न कि उनके दिखने के अनुसार

हममें से कुछ लोग एक बड़े फ़ॉन्ट के टेक्स्ट की जरूरत होने पर h1 का उपयोग करते हैं, या जब वे सामने गोला चिह्न की जरूरत होती है, तो li का उपयोग करते हैं। जैसा कि हमने पहले अध्याय में चर्चा की, ब्राउज़र को हमेशा से ही डिजाइन गुणों को HTML एलीमेंट पर लगाने की प्रवृत्ति रही है। हम सभी लोग एक साथ विचार करते हैं कि h1 बड़े फ़ॉन्ट का मतलब है, li गोला चिह्न का मतलब है, या blockquote टेक्स्ट के आधुनिकीकरण का मतलब है। हममें अधिकांश लोग रूपात्मक गुणों को संरचनात्मक एलीमेंटों के साथ सिमुलेट करके HTML लिखते हैं।

इसी तरह, यदि डिजाइनर चाहता है कि सभी शीर्षक एक ही आकार में हों, तो वह सभी शीर्षक को h1 में सेट करेगा, भले ही इससे कोई संरचनात्मक अर्थ नहीं हो

यह मुख्य शीर्षक है, जब मैं टेक्स्ट को संज्ञानात्मक रूप से संगठित करता हूँ
यह नहीं है मुख्य शीर्षक, लेकिन मैं चाहता हूँ कि यह उपरी शीर्षक के समान फ़ॉन्ट में दिखे, लेकिन मैं नहीं जानता कि CSS का इस्तेमाल कैसे करूं
यह बस एक शीर्षक नहीं है। लेकिन मैं बहुत चाहता हूँ कि पृष्ठ में की गई लिखित वाक्यों को एक ही फ़ॉन्ट में दिखाया जाए, ताकि मैं चाहता हूँ कि वह दिखे
अगर मैं CSS को जानता, तो मैं इस डिजाइन को डॉक्यूमेंट की संरचना को नष्ट किए बिना प्राप्त कर सकता।

हमें हमारे छोटे-छोटे तौर-तरीकों को एक तरफ रखना होगा और उन्हें एलीमेंट के अर्थ के अनुसार उपयोग करना होगा, न कि उसके दिखने के अनुसार। वास्तव में，h1 आपके चाहे किसी भी तरीके का हो सकता है। CSS के माध्यम से，h1 एक नाना-छोटा रोमन फ़ॉन्ट बन सकता है और p टेक्स्ट एक बड़ा-बड़ा फ़ॉन्ट बन सकता है, li भी गोला का चिह्न नहीं हो सकता है (आप या तो छोटे-छोटे बिल्ली या कुत्ते के PNG, GIF या JPEG चित्र का उपयोग कर सकते हैं या कंपनी के लोगो का) आदि।

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

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。

我们并不想在关于 XHTML 的章节讲述更多 CSS 方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。

使用结构化元素，而不是无意义的垃圾

由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，许多 HTML 争论者这样使用标签来插入列表：

项目一

项目二

项目三

考虑一下使用有序或者无序列表取而代之：

    

  • 项目一
    • 

  • 项目二
    • 

  • 项目三
    •

"但是li给我一个圆点，而我不需要圆点！"你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。

所以，请使用列表元素来标记列表。相似地，使用 strong 来代替 b，使用 em 代替 i，等等。在大多数桌面浏览器缺省状态下，strong 的显示效果和 b 相同，而 em 和 i 相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。

尽管 CSS 不会为任何元素的显示作假设，浏览器却作了很多假设，并且我们还没有碰到一个将 strong 显示为其他效果而不是粗体字的浏览器（除非是被设计师创建的 CSS 指示以其他方式显示）。假如你担心某个陌生的浏览器不会将 strong 显示为粗体字，你可以编写这么一条 CSS 规则：

strong {
	font-weight: bold;
	font-style: normal;
	}

दृश्यात्मक एलीमेंट और संरचना

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