ایکس ایچ ایمل آرکائٹکچر دو: مثال: وسیکول سائکول کی آرکائٹکچر مارکر

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

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

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 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>

دیوی، id اور دیگر امدادگار

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

وائی سی سی، اپنے نئی میتارک ڈاکٹ 2 کے ایکس ایچ تی ایم کے ڈھانچہ ماڈل میں اس طرح تعریف کرتا ہے:

دیوی، کے ذریعہ id، class اور role خصوصیات کے ساتھ تعاون، ایک عام مکینزم فراہم کرتا ہے جس کے ذریعہ ڈاکٹ کا معیار اضافی ڈھانچہ اضافی کر سکتا ہے. یہ عناصر نہیں کہتا کہ ان کا استعمال کیا جائے گا. اس لئے، مصنف کا اس عناصر کو استعمال کرکے جس کا تعاون کیا جائے گا، مثلاً استایل شیٹ، xml:lang، خصوصیات وغیرہ، ایکس ایچ تی ایم کو اپنے اپنے اور چمکدار اور چمکدار کی ضرورتوں اور چمکدار اور چمکدار کی ضرورتوں کے مطابق بنایا جاسکتا ہے.

div یعنی division کا مخفف ہے۔ division کا مطلب تقسیم، علاقہ، یا گروپ ہوتا ہے۔ مثلاً، جب آپ کچھ سلسلے کی لنکس کو جمع کرتے ہیں، تو وہ ایک division کی حیثیت سے کام کرتا ہے۔

بنیادی ڈھانچہ کا معیار

تمام HTML کے لکھنے والوں کو پاراگراف اور عنوان جیسے عام عنصروں کا پتہ چلتا ہے، لیکن کچھ لوگ کو div کا تعلق نہیں اچھا معلوم ہوتا ہے۔ وائی-3-سی کی توصیف میں، ان کا فہم کرنے کا کلیدی عنصر 'ایک عام بنیادی ڈھانچہ' ہے。

اس ویب سائٹ کی منزل کی ویب پینج پر، ہم تعلیم فائلوں کی فہرست کو ایک div میں بندار کرتے ہیں، کیونکہ تعلیم فائلوں کا فہرست حقیقی متن کا کوئی عنصر نہیں ہوتا۔ اس میں، h2 عنصر ہر تعلیم کی عنوان کی نشاندہی کرتا ہے، نیز ul فہرست عنصر ہر تعلیم کی تفصیلی فہرست کی نشاندہی کرتا ہے۔ لیکن بڑتر اور خاصتر معنوں میں، اس تعلیم فہرست کوئی جسٹرکچر کا کردار ادا کرتا ہے، یعنی دوسری ناویگیشن کا عنصر۔ تاکہ اس کردار کو مشتاق کرنے کی غرض سے، ہم اس div کو navsecond کے id کے ذریعے نشان دہ کرتے ہیں。

<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 کی نام کاری کے قوانین کی مطابق ہیں، لیکن معنوی یا میٹا-سٹرکچر کی نام کاری بہترین ہیں (یعنی جو کسی عنصر کی کا مکنی کی توجیہ کرتی ہیں)。

جب مشتری آبی رنگ کا استعمال کرنا فیصلہ کرتا ہے تو آپ کو لگتا ہوگا کہ سائٹ کی کسی حصے کو orangebox (نارنجی دھاب) کا نام دینا بے حد مظنون ہوگا۔ اس طرح کی ایک صورتحال میں آپ کو لگتا ہوگا کہ آپ کو بے حد مظنون ہوگا، جب آخری تحویل کا وقت صرف شش ماہ رہ گئی تو آپ نے استایلیز کا تذکرہ شروع کردیا اور آپ کو یاد نہیں آتا کہ "Gladys" (گراڈیز، خاتون کا نام) کیا ہوتا ہے، یعنی نیویگیشن ایریا، سائیڈ بار یا سرچ فورم

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

id کی مقابلو کی class

id کا اپنائے جانے والا اپنے آپ میں ایک جگہ جدید نہیں ہے؛ class کی اپنائے جانے والی یا div عناصر بھی ایسا ہی نہیں ہیں۔ ان دونوں کو بھی HTML دور سے آگاہی ملتی ہے۔ id کا اپنائے جانے والا کسی عنصر کو ایک منفرد نام دیتا ہے۔ کسی نام کو صرف اس صفحے میں ایک بار استعمال کیا جاسکتا ہے جس پر اس کا نام دیا گیا ہے (مثلاً اگر آپ کی صفحے میں content کا نام رکھا گیا ہوا تو دوسرا div یا کسی دیگر عنصر اس نام کو استعمال نہیں کرسکتا)۔ باقی کی طرح، class کا اپنائے جانے والا کسی نام کو کئی بار استعمال کیا جاسکتا ہے (مثلاً صفحے میں کئی پیراگرفت کو "small" یا "footnote" کا نام دیا جاسکتا ہے)۔ درج ذیل نقش id اور class کی فرق کو واضح کرنے میں مدد کرتا ہے:

<div id="searchform">بحث فرم کے عناصر یہاں جاتے ہیں۔ یہ
صفحے کی ایک حصہ منفرد ہوتی ہے。</div>


   <h2>آج کا بلاگ پوسٹ</h2>
   <p>بلاگ کا مواد یہاں آتا ہے。</p>
   <p>یہ بلاگ کا ایک اور پیراگرفت ہے。</p>
   <p>جیسا کہ ایک پیج پر کئی پیراگرفت ہوسکتی ہیں، ویسا ہی
   بلاگ میں کئی اینٹریز ہو سکتی ہیں۔ بلاگ پیج میں استعمال کی جاسکتی ہے
   کلاس "blogentry" کی متعدد مثال موجود ہو سکتے ہیں (یا کسی دیگر
   class).

</div>


   
Yesterday's blog post

   
In fact, here we are inside another div of class
   "blogentry."

   
They reproduce like rabbits.

   
If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.

</div>

在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 "newsitem" 或者别的什么。

然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和

段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。

粘性贴纸理论

把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。

id بھی دستاویز میں خصوصی علاقوں کو نشان دہی کرتی ہے، تاکہ آپ کو بتائے جائے کہ کس علاقے کو خصوصی طور پر بندوبست کیا جانا چاہئے، اس بات میں، id پرزنٹیج کا استعمال کسی بندوبست کی ترجیح سے مشابهت رکھتا ہے۔ تاکہ اس طرح کا خصوصی بندوبست ممکن ہوسکے، آپ کو اس خاص id کا استعمال کردیا جانا چاہئے، تاکہ آپ کا استایل چیٹ میں کچھ اصول لکھ سکیں یا جسٹاً جاوا اسکریپٹ فائل میں کچھ کدوں شامل کرسکیں۔ مثلاً، آپ کا CSS فائل میں کچھ خصوصی اصول ہو سکتے ہیں، جو صرف id نامی searchform کا div کے اندر کی عناصر کو متاثر کرتی ہیں۔

وقتی یک ویژگی id به عنوان یک چیز جذاب (آهنربا) برای یک مجموعه خاص از قوانین CSS استفاده می‌شود، آن را انتخاب‌کننده CSS می‌نامند. تعداد زیادی ازایجاد انتخاب‌کننده‌هاروش‌ها، اما id به راحتی قابل استفاده است و کاربردهای متعددی دارد.

قدرت id

خصوصیت id به طور باورنکردنی قوی است. دارای توانایی‌های زیر است:

  • به عنوان یک انتخاب‌کننده پوسته، به ما امکان می‌دهد تا پوسته‌های کم‌حجم و کوچک‌تر از XHTML ایجاد کنیم.
  • به عنوان هدف یک پیکربندی فرامتن، جایگزین ویژگی قدیمی‌name می‌شود.
  • به عنوان روشی برای تعیین موقعیت یک عنصر خاص از طریق اسکریپت‌های DOM.
  • به عنوان نام یک عنصر اشیاء.
  • به عنوان یک ابزار کاربردی عمومی‌المنفعت (در مثال‌های W3C، "وقتی داده‌ها از صفحه HTML به پایگاه داده‌ها منتقل می‌شوند، یا یک مستند HTML به فرمت‌های دیگر تبدیل می‌شود و غیره، به عنوان یک ابزار شناسایی حوزه استفاده می‌شود.")

قوانین id

مقدار id باید با حرف یا خط تیره آغاز شود؛ نمی‌توان با عدد آغاز کرد. اگرچه تأیید W3C این خطا را نمی‌گیرد، اما کاربردهنده XML آن را می‌گیرد. همچنین، اگر شما از id با JavaScript در فرم‌ها استفاده کنید، نام و مقدار id باید یک متغیر معتبر JavaScript باشد. فضاهای خالی و خط‌های منقطع، به ویژه خط‌های منقطع، ممنوع هستند. علاوه بر این، استفاده از خط تیره در نام 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 دریافت می‌کند تا با محتوای مربوطه تطبیق یابد: به عنوان مثال، id به نام h با آموزش HTML تطبیق دارد، و غیره. همچنین این لینک‌ها در یک عنصر لیست به نام menu بسته‌بندی شده‌اند، id به نام menu نشان‌دهنده وظیفه این لیست است - یک لیست منو، و div بیرونی به نام navfirst برای مشخص کردن این بخش (section) در صفحه استفاده می‌شود، که آن را از عناصر دیگری مانند محتوای اصلی (maincontent)، ستون کناری (sidebar) و پایش (footer) جدا می‌کند.

عناصر div و ul ساختار واقعی ارائه می‌دهند، یعنی وظیفه محتوای آن‌ها (ناوبری) و مکان آن‌ها در سند (مکان سربرگ صفحه) را مشخص می‌کنند. برعکس، چیدمان جدول سنتی هیچ اطلاعات معنایی از داده‌ها ارائه نمی‌دهد و به راحتی سه برابر پهنای باند را مصرف می‌کند.

لطفاً توجه داشته باشید که این برچسب‌ها شامل برچسب img نیستند، بنابراین به width، height، background یا border و غیره مرتبط نیستند. همچنین از سلول‌های جدول استفاده نمی‌کنند، بنابراین به مجموعه‌ای از ویژگی‌های مرتبط با آن‌ها نیز مرتبط نیستند. آن‌ها بسیار ساده و کوچک هستند و تمامی اطلاعات قابل فهم آن‌ها را ارائه می‌دهند.

با هماهنگی CSS، این برچسب‌ها به بازدیدکنندگان وب‌سایت امکان ارائه یک چیدمان قابل اعتماد و قابل بارگذاری سریع را می‌دهد. همچنین، امکان ایجاد ظاهری متنوع و قابل تغییر برای بازدیدکنندگان را فراهم می‌کند. و در محیط‌های بدون CSS، برچسب‌های ما با ساختار خوب خود بدون هرج و مرج تمامی محتوا را ارائه می‌دهند.

مقابلو کارکنان دقیق شاید دیگه دریافت کرده باشند، متن شامل در عناصر a ناشناسایی نشده است، این نیز به خاطر هماهنگی کامل ساختاربندی و CSS است، که ما را قادر می‌سازد تا با چند خط قوانین CSS یک مکانیزم فعال‌کننده تعریف کنیم، زمانی که کاربران از مرورگر تصویری استفاده می‌کنند، آنها دکمه‌های ناوبری زیبایی را خواهند دید، و زمانی که کاربران از خواننده‌های متن ساده استفاده می‌کنند، آنها نیز تمامی متن را خواهند گرفت، بنابراین، برای تمامی کاربران، محتوا یکسان است.

اور، کیونکہ نقش میں تصاویر اور ٹیبل یونٹ شامل نہیں کئے گئے ہیں، اس ناٹیویگیشن کامپانینٹ کو بغیر کسی بنیادی تبدیلی کے ویب سائٹ کی کسی پیج کی استعمال میں لایا جاسکتا ہے، اور اس کو مختلف بصری اثرات دیئے جاسکتے ہیں۔ کوتاهی میں، کد کی ماڈیولرائزیشن کے ذریعے، ہم نے کد کی قابل استعمال کو بڑھایا ہے۔