شرح المفهوم
يركز هذا الدرس على كتابة HTML يبقى موثوقًا به عند تفاعل المستخدمين الحقيقيين، والتقنيات المساعدة، وزملاء الفريق المستقبليين معه. ستتدرب على اختيار العناصر التي توصل المعنى بوضوح، وتتجنب البنية الهشة، وتدعم إمكانية الوصول بشكل افتراضي. الفكرة الرئيسية هي أن HTML الموثوق به ليس مجرد HTML صالح؛ بل هو ترميز لا يزال منطقيًا عندما تفشل الأنماط، أو تتغير المحتويات، أو يتنقل شخص ما باستخدام لوحة مفاتيح أو قارئ شاشة.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات بنية واضحة.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- استخدم التسميات والعناوين ونص الأزرار التي تظل واضحة بدون أنماط بصرية.
- تحقق من أن كل عنصر تفاعلي له غرض واضح واسم يمكن الوصول إليه.
- راجع بنية المستند كمحتوى عادي، وليس كنموذج مرئي.
- ابحث عن خيارات الترميز الهشة مثل العناصر العامة القابلة للنقر أو العلاقات المفقودة.
دليل خطوة بخطوة
- اكتب الترميز الأساسي لقسم تفاعلي صغير مثل نموذج أو لوحة إعدادات.
- تأكد من أن التسميات (labels) متصلة بشكل صحيح بالمدخلات (inputs) وعناصر التحكم (controls).
- اقرأ الصفحة من الأعلى إلى الأسفل وتحقق مما إذا كانت البنية لا تزال منطقية بدون CSS.
- استبدل أي نص غامض مثل "انقر هنا" بصياغة أكثر تحديدًا.
- اختتم بالتحقق من أن الترميز يظل مفهومًا، وقابلًا للتنقل، وسهل التوسيع.
تمارين تطبيقية
- أنشئ نموذج اتصال يستخدم التسميات (labels)، والحقول المطلوبة (required fields)، ونص زر واضح.
- حوّل كتلة وصفية بصريًا إلى ترميز لا يزال منطقيًا عند قراءته بصوت عالٍ.
- أنشئ منطقة إعدادات صغيرة باستخدام العناوين (headings)، وعناصر التحكم المجمعة (grouped controls)، والنص الوصفي.
تحديات برمجية
- حدد ثلاثة خيارات ترميز تحسن الموثوقية حتى لو تغير التصميم لاحقًا.
- أعد كتابة مثال ضعيف يعتمد كثيرًا على الأنماط إلى HTML دلالي قوي.
مهام تمرين صغيرة
- أضف سمة مطلوبة واحدة حيث تحسن الوضوح.
- غيّر تسمية عامة واحدة إلى تسمية أكثر تحديدًا.
- اكتب فحصًا سريعًا واحدًا لما إذا كانت الصفحة لا تزال تعمل بدون CSS.
خطأ شائع
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.