شرح المفهوم
اختبار HTML يعني التحقق من أكثر من مجرد ظهور الصفحة على الشاشة. تريد أيضًا التحقق من البنية، ترتيب النص، التسميات، المعالم، والروابط. في هذا الدرس، ستتدرب على استخدام قائمة تحقق بسيطة لفحص الترميز واكتشاف المشكلات مبكرًا. التركيز هو على بناء عادة التحقق من HTML بقصد، بدلاً من افتراض صحته لمجرد أنه يظهر.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات بنية واضحة.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- تحقق من أن كل قسم له عنوان واضح أو تسمية يمكن الوصول إليها.
- تأكد أن الروابط تستخدم نصًا ذا معنى بدلاً من صياغة غامضة مثل “انقر هنا”.
- افحص ترتيب القراءة وتأكد أنه لا يزال منطقيًا بدون CSS.
- دوّن مشكلة واحدة وجدتها وكيف قمت بتصحيحها.
دليل خطوة بخطوة
- أنشئ الترميز المثالي وحمّله في المتصفح.
- راجع HTML باستخدام قائمة تحقق قصيرة: العناوين، الروابط، القوائم، التسميات، والتداخل.
- حدد حالة طبيعية واحدة وحالة حدية واحدة، مثل نص مفقود أو قسم غير مُسمّى.
- أصلح المشكلة وأعد تشغيل نفس الفحوصات.
- اكتب جملة واحدة تصف سبب أهمية اختبار HTML حتى في الصفحات البسيطة.
تمارين تطبيقية
- ابنِ كتلة اتصال واختبر ما إذا كانت بنيتها واضحة بدون تنسيق.
- راجع قائمة تنقل قصيرة وحسّن أي نص رابط ضعيف.
- أنشئ قائمة تحقق لاختبار صفحة مقال أساسية واستخدمها على الترميز الخاص بك.
تحديات برمجية
- اختبر نسختين من نفس الصفحة واشرح أيهما أكثر سهولة في الوصول.
- ابحث عن ثلاث مشكلات هيكلية في صفحة تدريب وأصلحها دون تغيير المحتوى المرئي كثيرًا.
مهام تمرين صغيرة
- تأكد أن كل عنوان يقدم المحتوى الذي يليه.
- تحقق من أن القوائم مرمّزة كقوائم، وليست مجرد أسطر نصية.
- أصلح مشكلة 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.