الهيكلية لـ XHTML 2: حالة دراسة: علامات الهيكلية لموقع W3school

على أي حال، لا تتخطى هذا القسم. قراءة هذا الفصل سيزيد من مهاراتك، وتقلل من وزن صفحات موقعك، وتجعل لديك فهم واضح للفرق بين العلامات والتصميم. المفاهيم في هذا الفصل سهلة التعلم، ولكنها يمكن أن تزيد بشكل كبير من أداء الموقع، وكذلك سهولة تصميم وإنتاج وتحديث الموقع.

في هذا القسم، ستتعلم كيفية كتابة علامات منطقية ومكثفة تجعلك قادرًا على خفض حركة المرور على الباندwidth بنسبة حوالي 50 في المئة، في نفس الوقت تقلل من حمل الخادم والضغط، وتقلل أيضًا من وقت تحميل الموقع. من خلال إزالة العناصر التي لا تحمل أي فائدة، وتغيير العادات السيئة التي لا تحمل أي فائدة، يمكننا الوصول إلى الهدف المذكور أعلاه.

هذه العادات السيئة تعذب العديد من المواقع على الإنترنت، خاصة تلك التي تخلط بين كود CSS وكود التخطيط القائم على الجداول. هذا الأسلوب غير مريح وغير اقتصادي، حتى بالنسبة للمعماريين ذوي الخبرة في مجالات أخرى. كما أن فرص حدوث هذه المشكلة متساوية، سواء كانت المواقع التي تكتب الكود يدويًا، أو المواقع التي يتم إنشاؤها باستخدام أدوات تحرير مرئية مثل Dreamweaver و GoLive.

سيقوم هذا الفصل بطرح هذه الأخطاء الشائعة، حتى يمكنك التعرف عليها ومكافحتها، وتعلم كيفية تصحيحها. نوضح خصائص المحدد الفريد (id) -، وعرض كيفية استخدامها لكتابة XHTML متشابك بشكل كبير، سواء كنت تقوم بإنشاء تصميم مختلط أو تصميم CSS نظيف.

هل يجب هيكل كل عنصر؟

كما ذكرنا في الفصل السابق، يمكن تحديد كل عنصر بشكل هيكلي، يمكن أن تجعل CSS قائمة مرتبة أو غير مرتبة تظهر كقائمة توجيهية تامة، وهي تحتوي أيضًا على تأثيرات زر العكس. يمكن العلامات العادية لتحديد محتوى المستند، والتي يتم تعيينها باستخدام خصائص هيكلية معينة لتوضيح دورها اللغوي في تصميم الموقع.

أنشأنا النسخة التجريبية الأولى من CodeW3C.com باللغة الصينية في عام 2006، حيث استخدمنا 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 tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</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>

div،id وغيرها من المساعدات

إذا تم استخدامه بشكل صحيح، يمكن أن يكون div دعماً جيداً للإشارات الهيكلية، بينما id هو أداة صغيرة مذهلة تجعلك قادراً على كتابة XHTML متشابك بشكل كبير، واستخدام CSS بشكل ذكي، وإضافة سلوك معقد وماهر إلى الموقع من خلال نموذج الكائنات في المستند (DOM) القياسي.

تعرف W3C div في نموذج هيكل XHTML2 الجديد الخاص بها كالتالي:

العنصر div، بالإضافة إلى الخصائص id، class و role، يوفر ميكانيزم عام لإنشاء هيكل إضافي في المستند. لا يحدد هذا العنصر النمط التعبيري للنص. لذلك، يمكن للمبدعين استخدام هذا العنصر مع قوائم النمط، xml:lang و الخصائص الأخرى لجعل XHTML يتوافق مع احتياجاتهم وأذواقهم.

div هي اختصار لـ division. يعني division تقطيعًا، منطقة، تجميعًا. على سبيل المثال، عندما تُدمج مجموعة من الروابط معًا، فإنها تشكل division من وثيقة.

ميكانيكية تحديد الهيكل

جميع كتابة HTML مألوفون بعناصر شائعة مثل الفقرات والعناوين، ولكن بعضهم قد لا يكون مألوفًا بـ div. يمكن العثور على مفتاح فهم عنصر div في وصف W3C، "ميكانيكية عامة لتحديد الهيكل."

في صفحة البداية لهذا الموقع، نحن نغلف قائمة محتويات الدليل في div، لأن قائمة محتويات الدليل ليست جزءًا من أي عنصر من النص الرئيسي. حيث يُستخدم علامة h2 لتمييز عنوان كل دليل، بينما يستخدم عنصر القائمة ul لتمييز قائمة التفاصيل لكل دليل. ولكن في معنى أوسع وأكثر تحديدًا، يلعب هذا الدليل دورًا تنظيميًا، وهو مكون التوجيه ثانوي. لنؤكد هذا الدور، نستخدم id "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 لاسم فريد لكل عنصر. لا يمكن استخدام نفس الاسم مرة واحدة في الصفحة التي تم تخصيصها له (مثلاً، إذا كان لديك div يحتوي على id "content"، لا يمكن استخدام هذا الاسم لـ div آخر أو أي عنصر آخر. عكس ذلك، يمكن استخدام خاصية class مراراً وتكراراً في الصفحة (مثلاً، يمكن أن تستخدم خمس فقرات في الصفحة نفسها اسم "small" أو "footnote" للـ class). سيساعدك التسميات التوضيحية التالية على توضيح الفرق بين id وclass:

<div id="searchform">يذهب مكونات نموذج البحث هنا. هذا
جزء من الصفحة فريد.
<div class="blogentry">
   <h2>منشور المدونة اليوم</h2>
   <p>يذهب محتوى المدونة هنا.</p>
   <p>هذا هو فقرة أخرى من محتوى المدونة.</p>
   <p>كما يمكن أن تكون هناك العديد من الفقرات في الصفحة، كذلك
   قد تكون هناك العديد من المدخلات في المدونة. يمكن أن يستخدم صفحة المدونة
   عدة حالات من الفئة "blogentry" (أو أي أخرى
   class).</p>
</div>
<div class="blogentry">
   <h2>مقال blog من أمس</h2>
   <pفي الواقع، نحن الآن داخل div آخر من class
   "blogentry."</p>
   <p>هم ينمون مثل الأرانب.</p>
   <p>إذا كان هناك عشرة مقالات blog في هذه الصفحة، قد
   هناك عشرة divs من class "blogentry" كذلك.</p>
</div>

في هذا المثال، يستخدم div الذي يحمل اسم searchform لتغليف منطقة الصفحة التي تحتوي على نموذج البحث، ويستخدم div class="blogentry" لتغليف كل مدخل لمقال في blog. هناك نموذج بحث واحد في الصفحة، لذا اخترنا استخدام id لتعليم هذا العنصر الفريد. ولكن blog يحتوي على العديد من المداخل (المقالات)، لذا يتم تطبيق خاصية class في هذه الحالة. وبالمثل، يحتوي موقع الأخبار عادةً على العديد من div، ويمكن تسمية class لهذه div "newsitem" أو أي اسم آخر.

لكن ليس كل الموقع يحتاج إلى div. يمكن لموقع blog أن يستخدم فقط عناوين h1، H2، وعناوين h2 وأجزاء <p>، مثل موقع الأخبار. نحن نعرض div الذي يحمل اسم class blogentry هنا، وليس لتحفيزك على ملء موقعك بـ div، بل لعرض المبدأ التالي: في نفس مستند HTML، يمكنك استخدام class عدة مرات، ولكن يمكنك استخدام id مرة واحدة فقط.

نظرية الإصلاح اللصق

من المفيد التفكير في الخاصية id كإصلاح لصق لفهمها بشكل أفضل. سأقوم بصق إصلاح على الثلاجة لتذكيري بشراء الحليب، وسأقوم بصق إصلاح على الهاتف لتذكيري باتصال بعميل لم يصادق الالتزامات المالية. بالإضافة إلى ذلك، هناك إصلاح م粘ق على ملف الحسابات لتذكيري بأنني يجب أن أتسلم الفواتير قبل 15 من هذا الشهر.

id سيزيد من علامات المناطق الخاصة في المستند، ليعلمك أي منطقة تحتاج إلى معالجة خاصة، في هذا الصدد، يبدو الخاصية id مشابهة للاصلاح اللصق. لتحقيق المعالجة الخاصة المزعومة، يجب عليك استخدام هذا id الخاص لتحرير بعض القواعد في جدول الأسلوب، أو إضافة بعض الأسطر إلى ملف JavaScript. على سبيل المثال، قد تحتوي ملفات CSS الخاصة بك على بعض القواعد المحددة، وتطبيق هذه القواعد فقط على العناصر داخل div الذي يحمل اسم searchform.

When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreate selectormethod, but id is easy to use and has many uses.

The power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a stylesheet selector, enabling us to create compact and minimized XHTML.
  • As a hyperlink target, replacing the outdated name attribute.
  • As a method to locate a specific element from a script based on DOM.
  • As the name of an object element.
  • As a tool for general purpose processing (in the examples of W3C, 'when data is extracted from an HTML page to a database, or when an HTML document is converted to other formats, etc., it is used as a domain identification tool').

Rules of id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, an XML parser will. At the same time, if you use id with JavaScript in a form, the id name and value must be valid JavaScript variables. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore for class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

Semantic markup and accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's look at an example about the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</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' لتعليمات HTML، وهكذا. وتغلف هذه الروابط في عنصر قائمة يُدعى menu، ويُحدد id 'menu' وظيفة هذه القائمة - قائمة من القوائم، أما العنصر div الخارجي المسمى navfirst فهو يستخدم لتحديد هذا الفصل (section) في الصفحة، مما يفرق بينه وبين عناصر مثل المحتوى الرئيسي (maincontent) والجانب الجانبي (sidebar) والقاعدة (footer).

العناصر div و ul توفر بنية حقيقية، حيث يتم تحديد الوظيفة التي يقوم بها المحتوى (شريط التوجيه) والموقع الذي يتواجد فيه في المستند (موقع الرأس في الصفحة). في المقابل، لا يمكن للتصميم التقليدي باستخدام الجداول أن يقدم أي معلومات حول المعنى البياني للبيانات، كما يمكن أن يستهلك ثلاثة أضعاف النطاق الترددي.

لا تحتوي هذه العناصر على علامة img، لذا لا تشمل width،height،background أو border وما إلى ذلك. كما لا تستخدم خلايا الجداول، ولا تتضمن جميع الخصائص المتعلقة بها. إنها نظيفة وصغيرة جدًا، وتوفر جميع المعلومات التي يمكن فهمها منها.

بتعاون مع CSS، توفر هذه العناصر للزوار إلى الموقع تصميمًا موثوقًا به يمكن تحميله بسرعة، وتوفر أيضًا إمكانية إنشاء مظهر أكثر تنوعًا وملاءمة للزوار. كما أن العناصر المكتوبة بالغة الصينية الجيدة توفر جميع المحتويات دون أي فوضى في بيئة لا تحتوي على CSS.

القراء البصريون الحادون قد لاحظوا بالفعل، أن النص الموجود في العنصر a لم يتم عرضه من قبل المتصفح، ويجب أن يعطى الفضل لتنسيق العناصر المكتوبة بالغة الصينية والCSS المتناسق، مما يسمح لنا بتعريف آلية تحفيزية ببضع قواعد CSS، وعند استخدام المستخدم لمتصفح الرسومات، سيرون الأزرار التوجيهية الجميلة، وعند استخدام قارئ النص النقي، سيحصلون على النص الكامل، وبالتالي، تكون المحتويات متشابهة لجميع المستخدمين.

وبما أن العلامات لم تكن تحتوي على صور أو وحدات جدول، يمكن استخدام مكون القائمة هذا في أي صفحة داخل الموقع دون تغيير الهيكل، مما يمنحها تأثيرات視وية مختلفة. على سبيل المثال، من خلال تحويل الكود إلى وحدات، رفعنا قابلية التكرار للكود.