شرح المفهوم
يقدم هذا الدرس الشكل الأساسي لمستند HTML ويوضح سبب أهمية البنية قبل التنسيق أو البرمجة النصية. ستقوم بإنشاء صفحة صغيرة تحتوي على عنوان، فقرة قصيرة، ومخطط مستند واضح، ثم تتحقق من أن الترميز سهل القراءة وذو معنى في المتصفح. الهدف هو فهم مسؤولية HTML: وصف المحتوى، لا الزخرفة. بحلول النهاية، يجب أن تكون مرتاحًا لقراءة صفحة بسيطة وكتابة واحدة من الصفر دون تخمين مكان العلامات.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع الترميز في أقسام دلالية ذات بنية واضحة.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- افتح الصفحة في المتصفح وحدد الجزء الذي يمثل عنوان المستند، العنوان الرئيسي، ونص الجسم.
- أضف عنصر محتوى آخر، مثل فقرة ثانية أو قائمة قصيرة، دون كسر البنية.
- تحقق من أن كل علامة فتح لها علامة إغلاق مطابقة حيثما يلزم.
- اشرح في جملة واحدة لماذا يتعلق HTML بالبنية والمعنى، وليس بالتصميم المرئي.
دليل خطوة بخطوة
- اقرأ المستند من الأعلى إلى الأسفل وحدد الغرض من `html` و`head` و`title` و`body` و`main`.
- شغّل الكود الأولي وتأكد من ظهور العنوان والفقرة في المتصفح.
- أضف تغييرًا صغيرًا في المحتوى، مثل تحديث نص العنوان أو إضافة فقرة ثانية.
- راجع الترميز للتأكد من المسافات البادئة والتداخل الواضح لتسهيل تتبع البنية.
- اختتم بفحص سريع: هل تحتوي الصفحة على عنوان ومحتوى مرئي وترتيب منطقي؟
تمارين تطبيقية
- أنشئ صفحة تعريف شخصية بسيطة تحتوي على عنوان واحد، فقرتين، وعنوان صفحة.
- استبدل النص النموذجي بمحتوى لصفحة هبوط دورة تدريبية أو قسم ترحيب في محفظة أعمال.
- ابنِ نفس الصفحة مرة أخرى من الذاكرة دون نسخ المثال.
تحديات برمجية
- أنشئ صفحة أكبر قليلاً تحتوي على `header` و`main` و`footer` مع الحفاظ على بنية منظمة.
- قارن بين نسخة فوضوية ونسخة ذات مسافات بادئة نظيفة لنفس HTML، ثم اشرح أيهما أسهل في الصيانة ولماذا.
مهام تمرين صغيرة
- اكتب جملة واحدة تصف ما تفعله علامة `title`.
- أضف عنصرًا جديدًا داخل `main` وأعد تحميل الصفحة.
- تحقق من المستند للتأكد من المسافات البادئة النظيفة والعلامات المتطابقة.
خطأ شائع
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.