يصعب أحيانًا استخدام التحقق من صحة W3C، ولكن يمكنك من خلاله رؤية الأخطاء الناتجة عن تصميم التخطيط. يلقي المدقق الكثير من الأخطاء والتحذيرات، مما يشير إلى أن XHTML الخاص بك لم يكتمل بعد وقد لا يعمل بشكل متسق عبر متصفحات مختلفة. لقد حيرت مشاكل الفشل العشرة التالية عددًا كبيرًا من المبرمجين، وسنخبرك بكيفية حلها. قبل البدء في هذه المقالة، سأقدم بعض المشكلات التي يجب الانتباه إليها عند استخدام مدقق W3C. لا تقلق بشأن التحذيرات الصادرة عن أداة التحقق - إذا قالت أداة التحقق إنها وجدت 12 خطأ و83 تحذيرًا، فتجاهلها وانتقل إلى الخطوة التالية.
تصحيح خطأ واحد في كل مرة - تقدم العمل بشكل تسلسلي، من الأعلى إلى الأسفل، مع تصحيح خطأ واحد في كل مرة. يتم عرض HTML من الأعلى إلى الأسفل باستخدام المتصفح، ويتم عرض هذه الأخطاء بنفس الترتيب.
قم بتحديث الكود بعد كل تصحيح لجعله صالحًا مرة أخرى - يمكن أن يؤدي خطأ صغير في كثير من الأحيان إلى سلسلة من الأخطاء في جميع أنحاء الصفحة بأكملها. لذا، إذا تم القيام بذلك بشكل غير صحيح، فإن "إصلاح الأخطاء" يمكن أن يؤدي أيضًا إلى المزيد من الأخطاء. إن إعادة التحقق من صحة الكود بعد كل إصلاح يضمن حل المشكلة بالكامل.
بعد معرفة الاستثناءات الأساسية المذكورة أعلاه، دعونا نلقي نظرة على عدة أسباب تجعل تصميم التخطيط غير صالح.
1. علامة div غير مغلقة، وهذا أحد الأسباب الأكثر شيوعًا لفشل تصميم التخطيط. من المفاجئ دائمًا أن نتعلم عدد تصميمات التخطيط الدقيقة التي تفشل بسبب هذا. تُظهر الاستطلاعات أن علامات div المفتوحة هي أحد أكثر أخطاء تصميم الأقسام شيوعًا وواحدة من أصعب الأخطاء في التشخيص. يشير المدقق أحيانًا إلى علامة div الافتتاحية الخاطئة، وهو ما قد يشبه العثور على إبرة في كومة قش.
2. علامة التضمين المزعجة في أوائل التسعينيات، بدأت متصفحات Microsoft وNetscape في التمكن من التعرف على الخطوط الفريدة غير القياسية. لسوء الحظ، هذا يعني أن مدقق W3C لم يتعرف بعد على بعض علامات HTML الرئيسية مثل "embed"، على الرغم من استخدام هذه العلامات على نطاق واسع. إذا كنت تريد حقًا التحقق الصارم من صحة DOCTYPE (نوع المستند)، فيمكنك فقط التخلي عن التداخل.
إذا كنت تريد تخطيطًا فعالاً ووسائط مضمنة في نفس الوقت، فيمكنك تجربة طريقة Flash Satay.
3. إعلان DOCTYPE غير صحيح عدم التصريح عن DOCTYPE، أو الإعلان بشكل غير صحيح عن DOCTYPE في بداية الملف هو أيضًا خطأ شائع. وفقًا للخبرة العامة، فإن Strict DOCTYPE هو أعلى مستوى من التحقق يسعى إليه الجميع. يشير التحقق الصارم إلى أن صفحة الويب الخاصة بك سيتم عرضها على النحو الأمثل على جميع المتصفحات. رمز الإعلان الصارم هو كما يلي:
4. الشرطة المائلة اللاحقة إذا تعذر التحقق من موقع الويب الخاص بك، فمن المحتمل أن تكون الشرطة المائلة اللاحقة مفقودة في مكان ما في الكود. من السهل التغاضي عن أشياء مثل الخطوط المائلة اللاحقة، خاصة في عناصر مثل علامات الصور. على سبيل المثال:
هذا ليس له أي تأثير في DOCTYPE الصارم. لحل هذه المشكلة، أضف "/" في نهاية علامة img.
5. علامة المحاذاة إذا تم تعيين DOCTYPE على الانتقالي، فسوف تستخدم علامة "محاذاة"، ولكن إذا كنت أكثر تطلبًا وتريد التحقق الصارم، فسترى الكثير من الأخطاء. المحاذاة هي علامة أخرى لا يمكن استخدامها لتصميم التخطيط. يمكنك تجربة استخدام "float" أو "text-align" بدلاً من المحاذاة لتحويل العناصر.
6. جافا سكريبت
إذا تم الإعلان عن Strict DOCTYPE، فيجب تجاوز علامة CDATA في JavaScript. هذا الجانب من عملية التحقق يربك العديد من المبرمجين، حيث تميل مواقع الويب إلى استخدام جافا سكريبت المضمن للإعلانات وتتبع البرامج النصية. إذا كان من الضروري استخدام JavaScript، فيمكنك إضافة العلامات التالية قبله وبعده:
7. تتطلب الصور السمة "alt" ربما لم تلاحظ ذلك، ولكن الصور تمثل أيضًا حجر عثرة محتمل أمام التحقق المتقدم. بالإضافة إلى الشرطة المائلة اللاحقة، يتطلب التحقق المتقدم أيضًا علامة alt لوصف الصورة، مثل alt= "Scary vampire image".
تعتمد محركات البحث أيضًا على العلامات البديلة لتحديد الصور الموجودة على صفحات الويب، لذلك من الجيد دائمًا إضافة علامات بديلة مهما كانت الظروف.
8. بيانات الكيان غير المعروفة بيانات الكيان هي خطأ شائع آخر يؤثر على التحقق. يمكننا التفكير في استخدام أحرف الترميز المناسبة لاستبدال الرموز مثل "&". قائمة كاملة ببيانات كيان الأحرف المشفرة بشكل مناسب والمتوفرة في تصميم قسم XHTML.
9. التداخل السيئ التداخل يعني أن العنصر يحتوي على العنصر Sweet!
من السهل الخلط بين ترتيب العناصر المتداخلة. على سبيل المثال، ابدأ تشغيل العلامة القوية قبل علامة div، ولكن قم بإغلاق علامة div أولاً. قد لا يؤدي هذا إلى تغيير تخطيط القسم، ولكنه سيؤدي إلى إبطال تصميم القسم الخاص بك.
10. فقدان علامة "العنوان" على الرغم من أن هذا يبدو خطأً واضحًا، إلا أن العديد من المبرمجين (وأنا منهم) غالبًا ما يفتقدون علامة العنوان في قسم "الرأس". عندما ترى "مفقود عنصر فرعي مطلوب من HEAD" (مفقود عنصر فرعي مطلوب من HEAD)، ستجد أنك نسيت إضافة علامة العنوان.