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