[شرح] فحص وإصلاح أخطاء css-xhtml

بسم الله الرحمن الرحيم

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

حبيت اشارك بموضوع مهم جداً للجميع وهو: كيفية فحص وإصلاح أخطاء (xhtml-css)

أولا: ماذا تعني W3C ؟
هيا اختصار The World Wide Web Consortium معناها إتحاد أو رابطة الشبكة المعلوماتية العالمية مهمتها هي إيصال الشبكة المعلوماتية إلى أقصى إمكانياتها.ولمعرفة المزيد يمكنك زيارة الموقع http://www.w3.org

ثانياً: ماذا يهمنا ؟
يوفر الموقع أدوات لفحص ملفات html و xhtml و css ويبين لنا الأخطاء البرمجية وما اذا كان الموقع مطابق للمواصفات العالمية.

ثالثاً: وما الفائدة ؟
حل الكثير من المشاكل والأخطاء التي معظم سببها الخلط بين الـ html و الـ xhtml مثلما ذكر الأخ khaledtrm في موضوعه على الرابط http://www.ar-wp.com/t249.html

رابعاً: كيف أقوم بالفحص وتصحيح الأخطاء؟
في البداية :-

اذا لم يكن لديك أي خلفية تماماً عن التعامل مع xhtml و css لا تقم بعمل أي شيء واطلب المساعدة من شخص يجيد التعامل معها.

دائماً و أبداً لاتنسى النسخ الاحتياطي قبل أي تعديل حتى لاتندم.

************************************************** *****

فحص ملف CSS:-
الدخول على الموقع: http://jigsaw.w3.org/css-validator ثم إدخال رابط ملف style.css حسب وجوده في موقعك ثم اضغط Check كما في الصورة:





سوف يظهر لنا تقرير يوضح: الأخطاء-Errors (وهو ما يهمنا في الموضوع) – التحذيرات-Warnings (ليست بأهمية كبيرة حيث معظمها بسبب تطابق بعض الألوان المستخدمه في الصفحه مع الخلفية) كما في الصورة:





ونلاحظ وجود 4 أخطاء

نبدأ بحل المشكلات :-

المشكلة الأولى(Parse Error) خطأ وجود ( } ) في السطر رقم 50 لذا سوف نقوم بفتح ملف style.css عن طريق أحد البرامج الموجوده في المنتدى ونذهب للسطر 50 سوف نجد كما في الصورة:



ثم نقوم بحذفها.

المشكلة الثانية والثالثة(Value Error: text-decoration) في السطرين 281 و 285



وسبب الخطأ استخدام قيمة غير صحيحه وهي normal ولا يمكن استخدام غير القيم (none او underline او overline او line-through او blink) بالنسبة للـ text-decoration

فقمت بإستبدالها بـ none

المشكلة الرابعة(Value Error:border-top) في السطر 298 ونلاحظ ان الخطأ في اللون #fffff لو دققت النظر حتلقى ان عدد الخانات 5 خانات والمعروف ان عدد الخانات للألوان مكون من 6 خانات يعني الحل اننا نعدلها إلى #ffffff فقط



وبعد الانتهاء من كل التعديلات نعود للصفحة : http://jigsaw.w3.org/css-validator ونقوم بالفحص مرة أخرى وسوف يظهر لك:

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



************************************************** ***

فحص الـxhtml :-

الدخول على الموقع: http://validator.w3.org ثم إدخال رابط موقعك ثم اضغط Check كما في الصورة:



سوف يظهر لنا تقرير يوضح: الأخطاء-Errors وعددها 17 كما في الصورة:



وسوف اشرح بعض الأخطاء

نبدأ بحل المشكلات :-

المشكلة الأولى كما هو موضح في الصورة:



الطريقة الخاطئة <font color=#2255AA>
والطريقة الصحيحة <"font color="2255AA>

المشكلة الثانية إغلاق التاج بطريقة خاطئة كما هو في الصورة:



الطريقة الخاطئة <"scr="/files/arrow1.gif...
والطريقة الصحيحة </ "scr="/files/arrow1.gif...

وبعد الانتهاء من باقي التعديلات نعود للصفحة : http://validator.w3.org ونقوم بالفحص مرة أخرى وسوف يظهر لك:
مبروك لايوجد أي أخطاء وسوف يظهر لك رابط للشعار الذي يدل على ان موقعك خالي من الأخطاء اذا احببت ان تضيفه في الموقع كما في الصورة: 




وبذلك نكون قد قدمنا شرح بسيط لبعض الاخطاء الشائعه وكيفية اصلاحها

اتمنى اكون وفقت في الشرح وتحياتي للجميع

صفحتي

:))

مدونة مميزات ..
أول ثيم لي مع ورد بريس ..
دورة فى تصميم قوالب وردبريس من الصفر