ملعب HTML وCSS – المحتوى والبنية والتنسيق
علوم الحاسوبالتطبيقات الرقمية17–18 سنة
جارٍ التحميل…
سجّل الدخول للتشغيلعدّل المحتوى وترميز HTML وورقة أنماط CSS في ألواح منفصلة، وشاهد الصفحة المعروضة وشجرة DOM تتحدثان أثناء الكتابة. بدّل أوراق الأنماط لترى المحتوى نفسه يُعرض بطريقة مختلفة تمامًا، وانقر أي عنصر لترى قواعد CSS المطبقة عليه وأولويتها ونموذج الصندوق. ويبلّغ المدقق عن الوسوم غير المغلقة والمتداخلة خطأً وعن خصائص CSS وقيمها غير الصالحة. ويتناول تبويبان آخران نموذجًا مع تحقق المتصفح وطلب GET/POST الذي يرسله، وأحداث النقر والإدخال التي تغيّر الصفحة.
الدرس: بناء صفحات الويب باستخدام HTML وCSS: العناصر والسمات والمحددات ونموذج الصندوق والنماذج والأحداث
ماذا تعرض
لصفحة الويب ثلاث طبقات. يرمّز HTML المحتوى بعناصر مثل h1 وp وul وtable، ويحوّل المتصفح هذا الترميز إلى شجرة DOM. وتختار قواعد CSS العناصر بالمحددات (الوسم و.class و#id) وتضبط خصائص مثل color وmargin وpadding؛ وعندما تتعارض القواعد يحسم الأمر الأهمية ثم الأولوية ثم ترتيب الكتابة، وبعض الخصائص تُورَث. وكل عنصر صندوق مكوّن من المحتوى والحشو والحد والهامش. وترسل النماذج أزواج name=value إلى الخادم بطريقة GET أو POST، وتغيّر معالجات الأحداث في JavaScript شجرة DOM بعد تحميل الصفحة.
طريقة الاستخدام
في «الصفحة والتنسيق» اختر «صفحة المثال» و«ورقة الأنماط»، ثم عدّل لوح «المحتوى» أو HTML أو CSS وراقب الصفحة وشجرة DOM. انقر عنصرًا في الصفحة أو صفًا في شجرة DOM لتفحص قواعده ونموذج الصندوق، وانقر رسالة لتنتقل إلى سطرها. في «النموذج» املأ الحقول وأرسلها لترى طلب HTTP. وفي «الأحداث» عدّل المعالجات في لوح «الأحداث (JS)» وانقر الأزرار.
المعاملات القابلة للتغيير
- التبويب الصفحة والتنسيق, النموذج, الأحداث
- صفحة المثال مقالة, بطاقات تعريفية, جدول
- ورقة الأنماط كلاسيكية, عصرية, داكنة, بلا CSS
- طريقة إرسال النموذج GET, POST
- إظهار شجرة DOM
- إظهار نموذج الصندوق
أسئلة للاستكشاف
- لماذا تبقى شجرة DOM كما هي تمامًا عند تبديل ورقة الأنماط؟
- أي القاعدتين تفوز، #lamp أم #lamp.on، وما أولوية كل منهما؟
- أين يضع نموذج GET بياناته، ولماذا يُعد ذلك اختيارًا سيئًا لكلمات المرور؟
