نماذج وجداول اتش.تي.إم.إل

أ. ما هو مدقق اتش.تي.إم.إل HTML Validator ، وكيف يساعدك في تصحيح أخطاء الكود Debug Code ؟

تُعد لغة "اتش.تي.ام.ال" HTML لغةً متسامحة للغاية، إذ تظل العناصر تُعرض حتى عند ارتكاب أخطاء، مثل نسيان كتابة وسم الإغلاق a closing tag.

لنفترض أن لديك عنصر h2 بدون وسم إغلاق:

<h1>موضوع المقال</h1>
<h2>عنوان فرعي ١</h2>
<h2>عنوان فرعي ٢</h2>
 
 <!--  هذا لا يحتوي على وسم إغلاق h2 عنصر  -->
<h2>عنوان فرعي ٣
            

سيتم عرض عنصر h2 بشكل سليم حتى في حال عدم وجود وسم إغلاق، ويعود ذلك إلى أن المتصفحات تستخدم خوارزمية تحليل a parsing algorithm تتعامل مع الأخطاء الشائعة، وتسعى لعرض كود "اتش.تي.ام.ال" بأقرب صورة ممكنة لما قصده المؤلف.

ولكن قد يؤدي هذا إلى نتائج عكسية أحياناً. دعنا نضيف بضع فقرات paragraphs أسفل وسوم العنوان من المستوى الثاني heading 2 الموجودة في الكود:

<h1>موضوع المقال</h1>
<p>لا أحد يحب الألم بذاته، يسعى ورائه أو يبتغيه، ببساطة لأنه الألم...</p>

<h2>عنوان فرعي ١</h2>
<p>لا أحد يحب الألم بذاته، يسعى ورائه أو يبتغيه، ببساطة لأنه الألم...</p>

<h2>عنوان فرعي ٢</h2>
<p>لا أحد يحب الألم بذاته، يسعى ورائه أو يبتغيه، ببساطة لأنه الألم...</p>
 
 <!--  هذا لا يحتوي على وسم إغلاق h2 عنصر  -->
<h2>عنوان فرعي ٣
<p>لا أحد يحب الألم بذاته، يسعى ورائه أو يبتغيه، ببساطة لأنه الألم...</p>
            

ونتيجة لذلك، يظهر عنصر الفقرة الموجود أسفل وسم h2 (الذي يفتقر إلى وسم إغلاق) وكأنه عنوان من المستوى الثاني h2. ولهذا السبب أنت بحاجة إلى أداة للتحقق من صحة كود "اتش.تي.ام.ال" HTML validator.

تُعد أداة التحقق من كود "اتش.تي.ام.ال" HTML validator وسيلةً لفحص مدى صحة كود "اتش.تي.ام.ال" الخاص بك ومطابقته للمواصفات القياسية للغة "اتش.تي.ام.ال"، فهي تساعدك على اكتشاف الأخطاء والتحذيرات في الكود، مما يضمن أن تكون صفحات الويب مصاغةً بهيكلية سليمة ومتوافقة مع "معايير الويب" web standards.

لا تقتصر فوائد استخدام أداة التحقق من صحة كود "اتش.تي.ام.ال" عليك وعلى عمليات مراجعة الكود مستقبلاً فحسب، بل تشمل أيضاً أي شخص آخر يطّلع على الكود الخاص بك، مثل زملائك في الفريق و"المساهمين في المشاريع مفتوحة المصدر" open-source contributors.

تتوفر العديد من أدوات التحقق من صحة كود "اتش.تي.ام.ال" التي يمكنك استخدامها، وتُعد خدمة التحقق من الترميز Markup Validation Service المقدمة من w3.org هي الأكثر قبولاً واعتماداً على نطاق واسع.

عند زيارة الموقع validator.w3.org، يمكنك النقر على زر Validate by Direct Input ولصق كود "اتش.تي.ام.ال" الخاص بك.

عند النقر على زر "التحقق" Check، ستظهر قائمة بالنتائج تتضمن الأخطاء التي تحتاج إلى إصلاح.

أداة أخرى للتحقق من صحة "اتش.تي.ام.ال" يمكنك استخدامها هي jsonformatter.org.

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

ب. كيفية استخدام أداة الفحص DOM Inspector وأدوات المطورين DevTools لتصحيح الأخطاء Debug وبناء مشاريعك

عند العمل على بناء مشاريعك، ستواجه كثيراً "مشكلاتٍ" issues لا تعمل فيها البرامج كما هو متوقع.

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

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

من الأدوات المهمة التي يمكن استخدامها: أداة فحص DOM inspector و"أدوات المطور" developer tools.

تتيح لك أداة DOM inspector فحص "بنية اتش.تي.ام.ال" HTML structure للصفحة التي تتواجد فيها.

يرمز الاختصار DOM إلى "نموذج كائن المستند" Document Object Model. وهو عبارة عن بنية شجرية تُمثّل العناصر الموجودة في الصفحة. وسوف تتعرف على المزيد حول DOM في وحدات تعليمية لاحقة.

تتيح لك "أدوات المطور" developer tools فحص أكواد "اتش.تي.ام.ال" HTML و"سي.اس.اس" CSS و"جافاسكريبت" JavaScript الخاصة بالصفحة التي تتواجد فيها.

لنلقِ نظرةً على مثال "اتش.تي.ام.ال" HTML يحتوي على خطأٍ بسيطٍ في "عنصر الرابط" anchor element :

<a href="https://www.freecodecamp.org/larn/">freeCodeCamp curriculum</a>
            

عند النقر على الرابط، سيؤدي ذلك إلى صفحة "404". وصفحة "404" هي "صفحة خطأ" error page تظهر عندما يحاول المستخدم الوصول إلى صفحة ويب غير موجودة على "الخادم" the server.

الهدف هو أن يؤدي الرابط إلى freeCodeCamp curriculum .

لمعرفة ماهية المشكلة المحتملة، يمكنك استخدام "أدوات المطور" the developer tools .

لفتح "أدوات المطور" the developer tools في متصفحك، يمكنك النقر بزر الماوس الأيمن على الصفحة واختيار "فحص" Inspect .

يمكنك أيضاً استخدام الاختصار Control Shift I على لوحة مفاتيح الكمبيوتر الشخصي PC ، أو Command Option I على جهاز Mac .

عند فتح "أدوات المطورين" developer tools في متصفح Google Chrome ، ستظهر لك مجموعة من علامات "التبويب" tabs . تحمل علامة التبويب الأولى اسم Elements "العناصر"، وهي تعرض لك بنية "اتش.تي.ام.ال" الخاصة بالصفحة التي تتصفحها حالياً.

تُسمى علامة التبويب الثانية Console "وحدة التحكم". تعرض لك علامة التبويب هذه أي أخطاء قد تحدث في الصفحة.

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

يُشير هذا إلى أن المشكلة تكمن في الرابط URL الموجود داخل عنصر الرابط the anchor element ، فعند فحص قيمة السمة href ، ستلاحظ وجود "خطأ إملائي" a typo .

تُظهر رسالة "وحدة التحكم" Console حالياً المسار larn/ مصحوباً بخطأ "404"، في حين أن المسار الصحيح يجب أن يكون learn/ . وبمجرد تصحيح الرابط، سيعمل الأمر كما هو متوقع.

ستتعرف أكثر على كيفية استخدام "أدوات المطورين" the developer tools خلال رحلة الحصول على الشهادة، ولكن هذا مجرد مثال موجز يوضح كيف يمكن لهذه الأدوات مساعدتك في "تصحيح أخطاء الكود البرمجي" debug your code .