بخش‌بندی XHTML یکی: استفاده از XHTML برای بازسازی وب‌سایت

我们曾经为本节撰写的标题是：“XHTML : 简单的规则，容易的方针。”原因之一是，本节讨论的规则和方针是简单和容易的。原因之二是，一本简单和容易的 WEB 设计图书，就像超级市场的新式的免费商品一样，虽然常见却可以有效地吸引人的眼球，这样的东西可以刺激人的兴趣，并且鼓励人们尝试。

我确实希望本节的内容可以激发你的兴趣，并鼓励你去尝试。为什么这么说呢？因为一旦你掌握了本章包含的简单容易的理念，你就会重新思考网页运作的方式，并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一遍。我希望你可以实实在在地以另一种方式思考和工作。

另一方面，重构才是 XHTML 真正的意义。

在本章，我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目，你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手，也会从本章发现意外的收获。

XHTML 规则概要

将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用 XHTML。

  • 使用恰当的文档类型声明和命名空间。
  • 使用 meta 元素声明你的内容类型。
  • 使用小写字母书写所有的元素和属性。
  • 为所有的属性值加引号。
  • 为所有的属性分配值。
  • 关闭所有的标签。
  • 使用空格和斜线关闭空标签。
  • 不要在注释中写双下划线。
  • یقین کر کہ منفی اعداد اور وسیع یا مساوی نمبر < اور & ہو

Unicode 和其他字符集

XML、XHTML、和HTML 4.0 文档的默认字符集是 Unicode，一个由 Unicode 联盟定义的标准。Unicode 是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode 也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。

尽管 Unicode 是 web 文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用 ISO-8859-1 (Latin-1) 编码，而中华人民共和国的国家标准是 gb2312。

为表达语义而标记文档，而不是为了样式

记住：请最大限度地使用 CSS 来进行布局。在 web 标准的世界里，XHTML 标记与表现无关，它只与文档结构有关。

结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。

کسی ویب سائٹ کو بلافاصله HTML کی تیار شکل کی وجہ سے خلاقیت نہیں کی جاسکتی تھی۔ CSS کا اختراع کرانے والا، W3C، اب تک 2002 سال کا نومبر تک اپنی سرکاری ویب سائٹ کو CSS کی شکل میں نہیں تبدیل کرسکتا تھا۔ لیکن اب، کسی بھی قدیم اصول کی وابستگی سے بے آزاد نہیں رہتا، کم از کم XHTML 1 میں نہیں، لیکن اب، وضاحت سے بے آزاد (یا کہا جاسکتا ہے کہ داده سے ڈیزائن)، بھی کسی قدیم کی تیار شکل سے فائدہ اٹھایا جاسکتا ہے.

درآمدی نکات، جو آپ کو کس طرح سے بہتر سے منظم طور پر سوچنے میں مدد کریں گے:

کیتاب کی شکل کی رنگ بندی

مدرسہ ناٹک میں، ہم میں سے زیادہ تر لوگ کو معیاری کیتاب کی شکل کا استعمال کرنا پڑتا تھا۔ اب، ہم ڈیزائنر بن چکے ہیں، جو کیتاب کی شکل کی حدود سے آزاد ہوسکتے ہیں اور وکھی شخصی بیان کی آزاد زمین میں بہادری سے جا سکتے ہیں (شاید ہمارے بیلٹن اور تجارتی ویب سائٹات اب بھی اتنی وکھی اور شخصی نہیں ہیں) لیکن کم از کم کیتاب کی شکل کی درپیش مسائل سے ماہر ہوئے ہیں.

حقیقت میں، یہاں تک کہ HTML میں، ہمیں وضاحت کی ساختار کو منظم کی ہوئی سطح بنائیں ہوگی۔ کسی برسر کار نہ کسی کی ویب براوزر کو CSS نہیں دے سکتا تھا، لیکن آج، جب ہم اپنے ڈیزائن کو ناقابل اعتراض طور پر نافذ کریں، ہم داخلی ساختار کی اچھی ویب سائٹ دینے کی قابلیت رکھتے ہیں.

جب آپ نئی کاروبار کا متن مارکر کریں یا پچھلے مضمون کو ویب سائٹ پر لایاں، لطفاً قدیم کیتاب کی شکل کی ان سوالات کو ذہن میں رکھیں.

<h1>موضوع میں</h1>
<p>مقدماتی متن</p>
<h2>اضافی نظر</h2>
<p>مربوط متن</p>

علاوہ ازیں، غیر استعمال شدہ HTML عناصر مثلاً <font> یا بغیر معانی کے عناصر مثلاً <br /> استعمال نہ کریں، تاکہ غیر موجود منطقی ساختار کو نمائشی طور پر بنایا جائے۔

مثلاً، اس طرح نہ کریں:

<font size="7">موضوع میں</font><br />
مقدماتی متن<br /><br />
<font size="6">اضافی نظر</font><br />
مربوط مطلب<br />

عناصر کو ان کی معانی کی بنیاد پر استعمال کریں، نہ کہ ان کی نمائش کی بنیاد پر استعمال کریں

مجھا اور کچھ لوگ ایک بدعنوانی میں پھنس چکے ہیں، جب ہم صرف ایک بڑا فونت کا متن چاہتے ہیں تو h1 کا فونت استعمال کرتے ہیں، یا جب ہم آگے دائیروں کا علامت استعمال کرنا چاہتے ہیں تو li استعمال کرتے ہیں۔ جیسا کہ ہم نے پچھلے چپ میں بات کی ہے، براوزر همیشہ سے ڈیزائن کی اقدار کو HTML عناصر پر لگائے رکھتے رہے ہیں۔ ہم سب ایسا خیال رکھتے رہتے ہیں کہ h1 بڑا فونت کا معنا رکھتا ہے، li دائیروں کا معنا رکھتا ہے، یا blockquote متن کو چھوٹا بنانے کا معنا رکھتا ہے۔ ہم سب ترجیحاً ساختاری عناصر کو نمائشی معانی کی بنیاد پر استعمال کرکے HTML لکھتے رہتے ہیں۔

ایسا ہی طور پر، اگر ڈیزائنر تمام عنوانات کا ایک ساتھ فونت سائز چاہتا ہے تو وہ تمام عنوانات کو h1 کا فونت سائز بنادیتا ہے، جو کس طرح سے بغیر کسی کسی ساختاری معانی کا استعمال کیا جائے۔

یہ عنوان نہیں ہے، لیکن یہ ایسا ہے جیسا کہ میں نے متن کو روپ روپ بننے والی شکل میں بنایا ہے۔
یہ نہیں عنوان نہیں ہے، لیکن میں چاہتا ہوں کہ یہ بالا عنوان کی طرح کا فونت استعمال کریں، لیکن میں نہیں جانتا کہ کس طرح سے CSS کا استعمال کریں گا۔
یہ بغیر کوئی عنوان نہیں ہے، لیکن میں بہت چاہتا ہوں کہ صفحے میں کا تعلق رکھنے والا متن کا فونت ایک ساتھ استعمال کیا جائے، تاکہ آپ کی خواہش کی کسی بغیر کا نتیجہ نکال سکتا ہو،
اگر میں CSS کا معلوم رکھ سکتا ہوں تو میں اس کا ڈیزائن بغیر ڈاکومن کی کسی بغیر ساختاری تبدیلی کے حاصل کرسکتا ہوں۔

ہمیں اپنے چھوٹے چرچائی کو ایک بغیر بجائے اس کو چھوڑکر، عناصر کی معانی کی بنیاد پر ان کا استعمال شروع کرنا چاہیئے، نہ کہ ان کی نمائش کی بنیاد پر ان کا استعمال شروع کرنا چاہیئے۔ حقیقت میں، h1 آپ کی خواہش کی کسی بھی شکل میں بن سکتا ہے۔ CSS کی مدد سے، h1 کو غیر کبود، چھوٹی رومی فونت بن سکتا ہے، جبکہ p ٹیکسٹ کو کبود، بڑی فونت بن سکتا ہے، li کو بھی نا کوئی دائیروں نہیں رہتی، (آپ یا تو چھوٹی بھینس یا چھوٹی کوسٹی کی پی این جی، جی آئی ایف یا جی پی اے جی تصویر استعمال کرسکتے ہیں) وغیرہ وغیرہ۔

آج سے، ہم 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 این برچسب‌ها را برای وارد کردن لیست‌ها استفاده می‌کنند:

پروژه اول<br />
پروژه دوم<br />
پروژه سوم<br />

در نظر بگیرید که از لیست‌های مرتب یا نامرتب به جای آن استفاده کنید:

<ul>
<li>پروژه اول</li>
<li>پروژه دوم</li>
<li>پروژه سوم</li>
</ul>

"اما 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 برای مدیریت بخشی از یا تمامی چیدمان، لزوماً باعث نمی‌شود که وب‌سایت قابل استفاده‌تر و سبک‌تر شود و همچنین چقدر باندWITH را صرفه‌جویی کند. مانند فناوری‌هایی که در گذشته استفاده می‌کردیم، XHTML و CSS نیز می‌توانند به نادرست و بیش از حد استفاده شوند. XHTML طولانی و HTML طولانی مانند یکدیگر، باعث هدررفت باند کاربر و زمان می‌شوند. CSS طولانی نیز نمی‌تواند به طور کامل جایگزین کد HTML نمایشی شود؛ این تنها جایگزینی است که یک چیز بد جایگزین چیز بد دیگری شده است.