مرحبا! ها نحن نصل إلى نهايته. أمامنا عام كامل من العمل المثمر ، تم التخطيط للعديد من الأفكار الشيقة والآن الشيء الوحيد المتبقي هو إعادتها إلى الحياة يمكنك متابعة مجرى الأحداث ومعرفة كيف يتم التعبير عن حرية التفكير في العمل - فقط اشترك في مدونة ، أؤكد لكم - لن يستغرق الأمر الكثير من الوقت.

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

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

أربعة عوامل رئيسية لصالح موقع صالح

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

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

وهذه ليست كلمات فارغة ، فكل من واجه مشاكل مع Yandex تلقى ردًا من الدعم الفني: تحسين الموقع والعمل عليه. على سبيل المثال ، في شريط أدوات Yandex Webmaster ، يمكنك العثور على مساعدة لقسم يحتوي على توصيات لإنشاء المواقع.

إذا كنت تدرس هذا المستند بعناية ، ففي الفقرة 3 "تخطيط" يتم ذكر ما يلي:

تأكد من أن تخطيط صفحتك يصل إلى المستوى القياسي.

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

وأخيرًا ، رابعًا ، لا يلعب العامل النفسي الدور الأخير. من الجيد معرفة أن العمل المنجز يلبي معايير ومعايير معينة ، في حالتنا ، معايير اتحاد شبكة الويب العالمية. وكما تعلم ، فإن علم النفس شيء عظيم! لذلك لا تتجاهلها.

أوه ، من اللطيف رؤية مثل هذا النقش 😉

تحدثت في إحدى مقالاتي السابقة عن. ومع ذلك ، لا يعلم الجميع ذلك بالإضافة إلى المدقق ل HTML، يوجد المدقق و CSS.

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

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

ل تحقق من صلاحية CSS، عليك استخدام هذا خدمة W3: http://jigsaw.w3.org/css-validator/.

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

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

مرحبًا بك في مدونة مشرفي المواقع المجانية! في المرة الأخيرة التي أخبرتك فيها بكيفية التحقق ، وأقترح اليوم متابعة موضوع التحقق من صحة صفحة الويب. دعنا نتحقق من أوراق الأنماط المتتالية (CSS) ووثائق HTML التي تحتوي على أوراق الأنماط للتوافق مع معايير الإنترنت المقبولة عمومًا.

مطور لغة نمط CSS هو World Wide Web Consortium (W3C للاختصار) وهي منظمة تطور وتنفذ المعايير التكنولوجية على الإنترنت.

CSS (من أوراق الأنماط المتتالية الإنجليزية - أوراق الأنماط المتتالية) هي لغة رسمية مصممة لوصف مظهر المستند باستخدام لغة الترميز.

للتحقق من الأنماط ، هناك خدمة مفيدة للغاية تقدمها W3C. دعنا ننتقل إلى الصفحة الرئيسية لخدمة التحقق من صحة CSS والتحقق من صلاحية CSS.

كالعادة ، سوف أتحقق من مدونتي كمثال. نتبع الرابط ، تفتح نافذة جديدة تبدو كالتالي:

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

1. تحقق عن طريق URI - فقط حدد عنوان الصفحة ؛
2. تحقق من الملف الذي تم تحميله - تحتاج إلى تحديد ملف CSS محلي ؛
3. تحقق من النص المكتوب - تحتاج إلى إدخال كود CSS للتحقق من صحته.

تسمح لك الميزات الإضافية بتحديد خيارات الفحص الممتدة. فيما يلي ملخص موجز لكل منهم:

• الملف الشخصي - يسرد جميع الميزات وإمكانيات التنفيذ على نظام أساسي معين. يتبع التحديد الافتراضي معيار CSS3 من المستوى الثالث الأكثر استخدامًا.
• التحذيرات - تحديد تفاصيل التقارير: جميع التحذيرات أو أهمها ، تقرير عادي ، بدون عرض تحذيرات. يمكن للخدمة إصدار نوعين من الرسائل: الأخطاء والتحذيرات. إذا كان CSS قيد التحقق لا يتطابق مع التوصية ، فهذا خطأ. تختلف التحذيرات عن الأخطاء من حيث أنها لا تشير إلى مشاكل في تنفيذ المواصفات.
• البيئة - حدد مكان تطبيق الأنماط ، على سبيل المثال على جهاز محمول أو شاشة عرض أو تلفزيون أو صفحة طباعة. يوصى بالتحقق من جميع بيئات التصميم.
• امتدادات الموفر - من المستحسن تركها بشكل افتراضي ، فمن الممكن عرض الأخطاء فقط أو التحذيرات فقط. يقوم بائعو المستعرضات أحيانًا بتطبيق خصائص CSS التجريبية ، والتي تدعمها البادئات: -moz- (لمتصفح Firefox) ، -webkit- (لمتصفح Chrome) ، -ms- (لـ Internet Explorer) ، -o- (لـ Opera) وغيرها.

أحدد عنوان URL ، وقم بتكوين معلمات تحقق إضافية وانقر على الزر "تحقق" للبدء. الصيحة! نتيجة فحص CSS: لم يتم العثور على أخطاء!

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

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

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

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

تتم استضافة هذه الخدمة وصيانتها بواسطة خادم W3C ، ولكنها في الوقت نفسه ليست مدققًا رسميًا لـ CSS.

اختياريًا ، استخدم أداة التحقق المدمجة - فهي تتحقق من المستند بأكمله ، وتجمع نتائج مدققي HTML و CSS ، بالإضافة إلى أدوات أخرى مفيدة ، في صفحة واحدة.

عند تطوير مواقع الويب ، راجع أحدث مواصفات ومراجع ورقة الأنماط المتتالية. أوصي باستخدام مدقق CSS والتحقق من موقعك ، ومشاركة النتائج في التعليقات!

2016-12-29

نقوم بتحريك الأزرار والتحقق من صحة كود HTML و CSS في الموقع

مرحبا عزيزي الزائر!

اليوم ، باستخدام مثال صفحة ويب تم إنشاؤها ، سننظر في كيفية التحقق من صحة الموقع ، أي الامتثال للمواصفات المحددة للغات HTML و CSS.

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

• جعل الأزرار كبيرة الحجم
• جعل الأزرار تفاعلية
• هل هناك حاجة إلى التحقق من الصحة؟
• كيفية التحقق من صحة كود HTML
• كيفية التحقق من صحة كود CSS
• ملفات مصدر الموقع

جعل الأزرار كبيرة الحجم

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

يوجد أدناه جزء من شريط جانبي به مثل هذه الأزرار.

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

نحدد قيم التدرج الخطي على النحو التالي:

1. يتم تعيين ظلال الألوان من أسفل إلى أعلى ، بدءًا من لون أغمق مقارنةً باللون الأساسي للزر. لتحديد اللون الذي يجب استخدامه في بداية التدرج اللوني ، نستخدم أداة محرر الرسوم ، في هذه الحالة Photoshop.

للقيام بذلك ، مع فتح مستند تخطيط التصميم ، تحتاج إلى تحديد "Color Picker" ، وتحريك مؤشر الماوس فوق المنطقة المطلوبة من الزر ، وتحديد اللون الرئيسي ثم استخدام أدوات "Color Pickers" لتحديد لون أغمق من نفس اللون البني. في حالتنا هذه ، لنأخذ اللون بقيمة "653939". من الواضح أن كيفية القيام بذلك موضحة في لقطة الشاشة أدناه.

2. بعد ذلك ، حدد موضع التوقف للتدرج اللوني حيث ينتقل اللون الأولي الأكثر قتامة إلى اللون الرئيسي. سيتم وضع موضع الإيقاف في المنتصف تقريبًا. في الوقت نفسه ، من أجل جعل اللون أكثر تشبعًا ، دعنا نحرك موضع التوقف قليلاً لأعلى ، ونحدد قيمته ، على سبيل المثال ، 70٪ من الارتفاع.

3. وآخر شيء يجب القيام به لضبط خصائص التدرج هو تحديد لون أفتح مقارنةً باللون الرئيسي ، والذي سوف يلون الأزرار في الأعلى. يتم ذلك بنفس الطريقة التي يتم بها تحديد اللون الأولي للتدرج اللوني. في هذه الحالة ، سيتم أخذ قيمة هذا اللون كـ "b88686".

3. بناءً على البيانات المستلمة ، سنضيف تدرجًا خطيًا إلى خصائص CSS المشكلة مسبقًا للأزرار.

إدخال: {

ارتفاع : 30 بكسل ؛

الهامش السفلي : 10 بكسل ؛

نصف قطر الحد : 5 بكسل ؛

معرفتي : # a76d6d ؛

محاذاة النص :المركز؛

وزن الخط :بالخط العريض؛

اللون : #fff؛

تطفو :الصحيح؛

الصورة الخلفية

وتجدر الإشارة إلى أنه عند تحديد الألوان القصوى ، لا يتم تحديد مواضع التوقف هنا ، لأنه ليس من الضروري القيام بذلك بقيم 0٪ و 100٪.

الآن ، دعونا نحدث المتصفح ونلقي نظرة على النتيجة.

كما ترى ، اكتسبت الأزرار انتفاخًا طفيفًا. الآن يمكنك البدء في "إحياءهم".

جعل الأزرار تفاعلية

من أجل العمل بشكل كامل مع الأزرار ، سنجعلها تفاعلية ، والتي ستعكس بصريًا حالاتها الرئيسية الثلاث ، سلبية (الزر في حالته الأولية) ، نشطة (يتم تحريك المؤشر فوق الزر) والضغط عليها (الماوس) الضغط مع الاستمرار على الزر أثناء تحوم المؤشر).

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

أولاً ، لنفعل ذلك من أجل الحالة السلبية ونحاول رسمها بحيث يرتفع الزر فوق السطح.

نختار ألوان الحدود والظلال بنفس الطريقة كما في الحالات السابقة.

سيأخذ كود CSS بعد الإضافات المناسبة الشكل.

إدخال: {

ارتفاع : 30 بكسل ؛

الهامش السفلي : 10 بكسل ؛

نصف قطر الحد : 5 بكسل ؛

معرفتي : # a76d6d ؛

محاذاة النص :المركز؛

وزن الخط :بالخط العريض؛

اللون : #fff؛

تطفو :الصحيح؛

الصورة الخلفية : التدرج الخطي (إلى الأعلى ، # 653939 ، # a76d6d 50٪ ، # b88686) ؛

ظل الصندوق : 2 بكسل 2 بكسل 4 بكسل 0 بكسل # 422a2a ؛

عرض الحدود : 2 بكسل ؛

نمط الحدود :صلب؛

لون الحدود : #ddbebe # 241616 # 241616 #ddbebe ؛

يمكنك هنا ملاحظة أن الحدود يتم تمثيلها من خلال مجموعة من الخصائص التي تحدد السُمك (عرض الحدود مع القيمة 2 بكسل) ، نمط (نمط حد) بقيمة تحدد حدًا صلبًا وألوانًا (لون حد) على كل جانب من الجوانب الأربعة.

لنقم بتحديث المتصفح ونرى كيف ستبدو الأزرار الآن.

كما ترى ، يبدو أن الأزرار في هذه الحالة قد ارتفعت.

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

سيتخذ رمز CSS للحالة النشطة للأزرار الشكل التالي.

إدخال: يحوم {

ظل الصندوق :لا أحد؛

لون الحدود : # a76d6d # a76d6d # a76d6d # a76d6d ؛

في هذه الحالة ، سنغير لون الحدود مرة أخرى ونضيف ظلًا ، فقط في هذه الحالة سيكون داخليًا وبدون إزاحة. سيتغير محدد الفئة الزائفة أيضًا إلى: نشط ، مطابق للحالة المضغوطة.

سيكون كود CSS للحالة المضغوطة على النحو التالي.

إدخال: نشيط {

ظل الصندوق : 0px 0px 7px 2px # 422a2a أقحم ؛

لون الحدود : # 777 #fff #fff # 777 ؛

يظهر الزر "بحث" أدناه للمقارنة ، حيث يمكنك أن ترى بوضوح كيف يغير مظهره حسب الحالة.

الشكل 8 الحالة السلبية

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

هل هناك حاجة إلى التحقق من الصحة؟

التحقق من صحة هو التحقق من رمز مقابل المعايير المعمول بها. هناك تحقق من صحة كود HTML و CSS. من الواضح أنه في إحدى الحالات ، يتم فحص كود HTML ، وفي الحالة الأخرى ، يتم فحص كود CSS.

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

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

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

والآن دعنا ننتقل إلى التحقق المباشر من صحة الرموز ، أولاً HTML ، ثم CSS.

كيفية التحقق من صحة كود HTML

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

هنا نعتبر الخيار الأبسط والأكثر شيوعًا للتحقق من الصلاحية - هذا هو استخدام موقع "W3C Consortium" ، الذي يطور ، بدعم من مطوري المستعرضات ، مواصفات رموز صفحات الويب.

للتحقق من صحة كود HTML ، ما عليك سوى اتباع الرابط https://validator.w3.org/ ، والذي سيفتح صفحة بها حقل لإدخال عنوان الصفحة المراد التحقق من صحتها.

لقطة شاشة 51

بعد النقر فوق الزر "تحقق" ، نحصل على نتيجة الفحص.

في هذه الحالة ، تكون شفرة HTML صالحة ، ولكن هناك توصية لاستخدام السمة lang مع القيمة "ru"لأن الصفحة تستخدم اللغة الروسية.

تهدف السمة lang إلى جعل المستعرضات تعرض أحرفًا معينة ، مثل علامات التنصيص ، اعتمادًا على اللغة المستخدمة. لذلك ، سيكون من المفيد لنا تضمينه في كود HTML. وسنفعل ذلك في وسم html حتى تعمل هذه السمة على المستند بأكمله.

يوضح الجدول التالي كيفية عمل هذه الإضافة.

"ru" >

. . .

والآن ، إذا أجرينا فحصًا ثانيًا ، يمكننا أن نرى أن الكود أصبح صالحًا تمامًا دون أي تعليقات.

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

تُظهر لقطة الشاشة الخيار الأخير ، عندما يتم نسخ رمز صفحة الويب مباشرةً في نموذج التحقق.

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

كيفية التحقق من صحة كود CSS

لقد غطينا التحقق من صحة كود HTML. يتم التحقق من كود CSS بنفس الترتيب تمامًا. في هذه الحالة فقط ، تحتاج إلى استخدام صفحة مدقق أخرى ، والتي توجد لهذه الحالة في http://jigsaw.w3.org/css-validator/.

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

تظهر نتيجة هذا الفحص في لقطة الشاشة.

كما ترى ، فإن كود CSS الخاص بنا يتوافق تمامًا مع المواصفات دون أي أخطاء ، وهي نتيجة جيدة.

يتطابق ترتيب طرق التحقق الأخرى لهذه الحالة تمامًا مع عمليات التحقق المماثلة لتعليمات HTML البرمجية. لذلك ، لن نكرر أنفسنا هنا وسننهي مراجعتنا لفحوصات التحقق من الصحة.

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

وسنفعل ذلك مباشرة بعد عطلة رأس السنة الجديدة.

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

ملفات مصدر الموقع

يمكن تنزيل ملفات المصدر الخاصة بالموقع مع التحديثات التي تم إجراؤها في هذه المقالة من الملف المرفق مواد إضافية.

بعد إنشاء الموقع وتعبئته بكل ما هو ضروري ، يجب فحص الموقع بحثًا عن الأخطاء. للعثور على أخطاء إملائية في html و css ، سيساعدك مدقق W3 - World Wide Web Consortium ، والتي في الترجمة: World Wide Web Consortium. يعثر على جميع الأخطاء ويشير إلى مكان وجودها ، فضلاً عن تقديم خيارات للتخلص منها.

لماذا إصلاح الكود باستخدام مدقق W3C

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

• ستزداد سرعة تحميل الصفحة ، لكن قليلاً ، لن تكون ملحوظة.
• سيعرض الموقع نفسه في كل متصفح.
• عند إضافة موقع إلى الدليل ، انتبه لمحو الأمية في كتابة html و css.

ليس الكثير من المحترفين ، ولكن الإصلاح أخطاء html و cssاستخدام مدقق W3C يستحق كل هذا العناء!

كيفية إصلاح الأخطاء باستخدام Validator

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

1. اكتب اسم موقعك بالكامل.


2. في القائمة ، نبدأ في البحث عن مكان ونوع الخطأ وما هو مطلوب لإصلاحه.


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

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