1. الخطوة الأولى للتحسين
أضف DOCTYPE الصحيح إلى الصفحة
DOCTYPE هو اختصار لنوع المستند. يستخدم بشكل أساسي للإشارة إلى إصدار XHTML أو HTML المستخدم. يفسر المتصفح رمز الصفحة وفقًا لـ DTD (تعريف نوع المستند) المحدد بواسطة DOCTYPE.
(1) انتقالي (انتقالي)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(٢) صارم
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) نوع الإطار (مجموعة الإطارات)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
تعيين مساحة الاسم (مساحة الاسم)
أضف الكود التالي مباشرة بعد إعلان DOCTYPE:
<html XMLns="http://www.w3.org/1999/xhtml">
مساحة الاسم هي DTD تفصيلية تجمع أنواع العناصر وأسماء السمات. يسمح لك إعلان مساحة الاسم بتحديد مساحة الاسم الخاصة بك من خلال مؤشر العنوان عبر الإنترنت. فقط أدخل الرمز كالمعتاد.
أعلن عن لغة الترميز الخاصة بك
لكي يتم تفسيرها بشكل صحيح بواسطة المتصفحات وتمرير التحقق من صحة العلامات، يجب أن تعلن جميع مستندات XHTML عن لغة الترميز التي تستخدمها. الرمز هو كما يلي:
<meta http-equiv="Content-Type" content="text/html; مجموعة الأحرف=GB2312" />
لغة الترميز المعلنة هنا هي الصينية المبسطة GB2312. إذا كنت بحاجة إلى إنتاج محتوى صيني تقليدي، فيمكنك تعريفها على أنها BIG5.
اكتب جميع التسميات بأحرف صغيرة
XML حساس لحالة الأحرف، لذا فإن XHTML حساس لحالة الأحرف أيضًا. يجب أن تكون كافة أسماء عناصر وسمات XHTML بأحرف صغيرة. وإلا فسيتم اعتبار المستند الخاص بك غير صالح من خلال التحقق من صحة W3C. على سبيل المثال الكود التالي غير صحيح:
<TITLE>ملف تعريف الشركة</TITLE>
والطريقة الصحيحة لكتابتها هي:
<title>ملف تعريف الشركة</title> وبالمثل، قم بتغيير <P> إلى <p>، و<B> إلى <b>، وما إلى ذلك. خطوة التحويل هذه بسيطة.
إضافة سمة البديل إلى الصورة
إضافة سمة البديل لجميع الصور. تحدد السمة alt أنه سيتم عرض النص البديل عندما لا يمكن عرض الصورة، وهذا أمر يمكن الاستغناء عنه للمستخدمين العاديين، ولكنه ضروري لمتصفحات النص فقط والمستخدمين الذين يستخدمون قارئات الشاشة. فقط عند إضافة السمة alt، سيجتاز الكود فحص صحة W3C. لاحظ أننا بحاجة إلى إضافة سمات بديلة ذات معنى، والكتابة كما يلي لا معنى لها:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
الطريقة الصحيحة للكتابة:
<img src="logo_unc_120x30.gif" alt="شعار شركة UNC، انقر للعودة إلى الصفحة الرئيسية">
اقتبس جميع قيم السمات
في HTML، لا تحتاج إلى اقتباس قيم السمات، ولكن في XHTML، يجب أن يتم اقتباسها.
مثال: الارتفاع = "100"، وليس الارتفاع = 100.
أغلق كافة علامات التبويب
في XHTML، يجب إغلاق كل علامة مفتوحة. مثله:
<p>يجب إغلاق كل علامة تبويب مفتوحة. </p> <b>يمكن لـ HTML قبول العلامات غير المغلقة، لكن XHTML لا يمكنه ذلك. </ب>
يمكن لهذه القاعدة تجنب الارتباك والمشاكل في HTML. على سبيل المثال: إذا لم تقم بإغلاق علامة الصورة، فقد تواجه مشكلات في عرض CSS في بعض المتصفحات. استخدم هذه الطريقة للتأكد من ظهور الصفحة كما صممتها. وتجدر الإشارة إلى أنه يجب أيضًا إغلاق العلامات الفارغة. استخدم شرطة مائلة للأمام "/" في نهاية العلامة لإغلاق نفسها. على سبيل المثال:
<br /> <img src="webstandards.gif" />
بعد معالجتها بالقواعد السبعة المذكورة أعلاه، تفي الصفحة بشكل أساسي بمتطلبات XHTML1.0. لكننا ما زلنا بحاجة إلى التحقق مما إذا كانت تلبي المعايير حقًا. يمكننا استخدام W3C لتقديم خدمات التحقق المجانية (http://validator.w3.org/). قم بإصلاح الأخطاء واحدًا تلو الآخر بعد اكتشافها.
2. الخطوة الثانية للتحسين
تحسيننا التالي يتمثل بشكل أساسي في الفصل بين الهيكل والأداء. هذه الخطوة ليست سهلة التنفيذ مثل الخطوة الأولى، فنحن بحاجة إلى تغيير في المفهوم، بالإضافة إلى تعلم وتطبيق تكنولوجيا CSS2. لكن تعلم أي شيء جديد يستغرق وقتا، أليس كذلك؟ الحيلة هي أن تتعلم بالممارسة. إذا كنت تستخدم تخطيط الجدول دائمًا ولم تستخدم CSS مطلقًا، فلا داعي للاستعجال لتوديع تخطيط الجدول. يمكنك أولاً استبدال علامة الخط بورقة أنماط. كلما تعلمت المزيد، يمكنك فعل المزيد. حسنًا، دعونا نلقي نظرة على ما يتعين علينا القيام به:
تحديد مظهر العناصر باستخدام CSS
لقد طورنا عادة عند كتابة الشعارات، فعندما نريد أن يكون الخط أكبر نستخدم <h1>، وعندما نريد إضافة رمز نقطة في المقدمة نستخدم <li>. نحن دائمًا نفكر في <h1> كحجم كبير، و<li> كنقاط، و<b> كنص غامق. في الواقع، يمكن أن يصبح <h1> أي شيء تريده من خلال CSS، ويمكن أن يصبح <h1> خطًا صغيرًا، ويمكن أن يصبح النص <p> كبيرًا وعريضًا، ويمكن أن يصبح <li> صورة وما إلى ذلك. لا يمكننا إجبار العناصر الهيكلية على تحقيق العرض، يجب أن نستخدم CSS لتحديد مظهر تلك العناصر. على سبيل المثال، يمكننا أن نجعل عناوين المستوى 6 الافتراضية الأصلية تبدو بنفس الحجم:
h1، h2، h3، h4، h5، h6 {font-family: 宋体، serif؛
استبدل الأشياء غير المرغوب فيها التي لا معنى لها بعناصر منظمة
ربما لم يعرف الكثير من الأشخاص أبدًا أن عناصر HTML وXHTML مصممة للتعبير عن البنية. لقد اعتاد الكثير منا على استخدام العناصر للتحكم في العرض التقديمي، بدلاً من الهيكل. على سبيل المثال، قد يتم وضع علامة على القائمة على النحو التالي:
الجملة 1<br /> الجملة 2<br /> الجملة 3<br />
سيكون من الأفضل أن نستخدم قائمة غير مرتبة بدلاً من ذلك:
<ul> <li>الجملة 1</li> <li>الجملة 2</li> <li>الجملة 3</li> </ul>
قد تقول: "لكن <li> يعرض نقطة، ولا أريد استخدام نقطة." في الواقع، لا يحدد CSS كيف يبدو العنصر. يمكنك إيقاف تشغيل النقاط باستخدام CSS.
أضف معرفًا إلى كل جدول ونموذج
قم بإعطاء جدول أو شكل علامة هيكلية فريدة، على سبيل المثال.
<معرف الجدول = "القائمة">
بعد ذلك، عند كتابة ورقة الأنماط، يمكنك إنشاء محدد "قائمة" وربطه بقاعدة CSS التي تخبر خلايا الجدول، وتسميات النص، وجميع العناصر الأخرى بكيفية عرضها. بهذه الطريقة، ليست هناك حاجة لإرفاق بعض سمات طبقة العرض المتكررة والمستهلكة لعرض النطاق الترددي مثل الارتفاع والعرض والمحاذاة ولون الخلفية لكل علامة <td>. باستخدام علامة مرفقة فقط (علامة المعرف "القائمة")، يمكنك إجراء معالجة عرض تقديمي مخصصة لترميز التعليمات البرمجية النظيف والمدمج ضمن ورقة أنماط منفصلة.
بالنسبة للتحسينات المتوسطة، سنقوم بإدراج النقاط الثلاث الرئيسية هنا أولاً، ولكنها تحتوي على الكثير من نقاط المحتوى والمعرفة، والتي نحتاج إلى تعلمها وإتقانها خطوة بخطوة حتى نحقق أخيرًا التخطيط باستخدام CSS بالكامل دون استخدام أي جداول.