شرح المفهوم
يدربك هذا الدرس على تصحيح أخطاء HTML من خلال البحث عن الأخطاء الهيكلية بدلاً من التخمين. ستفحص مثالاً صغيراً، تحدد الخطأ، تصلحه، ثم تتأكد من أن مخرجات المتصفح تتطابق مع الهيكل المقصود. العادة المفيدة هنا هي قراءة الترميز كشجرة: العنصر الأب أولاً، ثم العناصر الأبناء، وعلامات الإغلاق في مكانها الصحيح. بمجرد أن تصبح هذه العادة طبيعية، يصبح العثور على أخطاء HTML أسهل بكثير.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات هيكل واضح.
- أضف منطق المعالجة في القسم الأوسط.
- انتهِ بالمخرجات والتحقق السريع.
مرجع الأوامر
- راجع الترميز سطراً بسطر وحدد مكاناً واحداً حيث يمكن أن يسبب التداخل الخاطئ ارتباكاً.
- حمّل الصفحة بعد كل إصلاح بدلاً من تغيير كل شيء دفعة واحدة.
- تأكد من أن عناصر القائمة تظهر فقط داخل حاوية القائمة.
- دوّن ما الدليل الذي ساعدك في العثور على المشكلة الأسرع.
دليل خطوة بخطوة
- اقرأ المثال ببطء وحدد العنصر الأب الذي يحتوي على الكتلة بأكملها.
- تحقق مما إذا كان كل عنصر ابن موضوعاً داخل العنصر الأب الصحيح.
- قم بإصلاح واحد في كل مرة، ثم أعد تحميل الصفحة لتأكيد النتيجة.
- قارن النسخة المصححة بالهيكل المقصود ولاحظ ما تغير.
- انتهِ بالتحقق من المسافات البادئة لتسهيل فحص الهيكل الثابت لاحقاً.
تمارين تطبيقية
- أنشئ نسخة معطلة عمداً لقسم صغير، ثم أصلحها بنفسك.
- خذ مثالاً لعنوان وفقرة وقائمة وأدخل خطأً واحداً في التداخل للتدريب.
- ابنِ كتلة أسئلة متكررة (FAQ) قصيرة ثم راجعها بحثاً عن علامات مفقودة أو في غير مكانها.
تحديات برمجية
- صحّح مثالاً أطول يحتوي على أقسام متداخلة متعددة دون إعادة كتابة كل شيء من الصفر.
- اشرح كيف يمكن لمخرجات المتصفح أن تخفي أخطاء HTML حتى عندما تبدو الصفحة لا تزال تعمل.
مهام تمرين صغيرة
- اذكر الغرض من عنصر `section` الخارجي.
- تحقق من أن القائمة تحتوي على عناصر قائمة فقط.
- اكتب قائمة تحقق سريعة يمكنك إعادة استخدامها عند تصحيح أخطاء HTML.
خطأ شائع
Skipping input validation or mixing logic/output in one unstructured block.
تحدٍ مصغّر من الواقع
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.