الدرس الثاني: تصميم صفحات التنسيق النمطية (١)

يقوم الدرس على فصل هيكل صفحة الإنترنت بلغة HTML عن مظهرها وتنسيقها بلغة CSS، مما يسهل التعديل ويسرع التحميل. تتكون جملة CSS من محدد يختار العنصر، وخاصية مثل color، وقيمة مثل yellow، مع ربط الملفات عبر الوسم link. مثال: p { color: green; } يلون جميع الفقرات باللون الأخضر.

الفكرة الأساسية

تعتمد صفحات الإنترنت على لغة HTML لبناء الهيكل والمحتوى، بينما تُستخدم لغة CSS الخاصة بصفحات التنسيق النمطية لتحديد مظهر العناصر وشكلها وألوانها، وتأتي لغة JavaScript لإضافة التفاعل. يفصل هذا التقسيم بين المحتوى والعرض لتسهيل تعديل التصميم في ملف واحد ينعكس على كامل الموقع بدلاً من تعديل كل صفحة على حدة.

الشرح

تتألف قاعدة CSS من محدد يشير إلى العنصر المراد تنسيقه، وكتلة تعريف تضم الخاصية والقيمة. تنقسم الملفات إلى ثلاثة أنواع: مضمنة داخل العنصر باستخدام خاصية style، وداخلية ضمن قسم head، وخارجية في ملف مستقل بامتداد css يُربط بالصفحة عبر الوسم link داخل قسم head. للمحددات أنواع ثلاثة: محدد النوع يطبق التنسيق على جميع عناصر الوسم المماثلة مثل p، ومحدد المعرف id يسبقه رمز # لاستهداف عنصر فريد يحمل نفس المعرف، ومحدد الفئة class يسبقه رمز. لاستهداف مجموعة من العناصر تشترك في نفس الفئة. أما تنسيق النصوص فيشمل خصائص مثل color لتحديد اللون بأسمائه أو قيم RGB بين 0 و255 أو رموز Hex، إضافة إلى حجم ونمط وعرض الخط وزخرفة النص.

مثال محلول خطوة بخطوة

المطلوب تغيير لون جميع الفقرات في صفحة الإنترنت لتصبح باللون الأخضر باستخدام ملف تنسيق خارجي. الخطوة الأولى: أنشئ ملفاً جديداً وسمه myCSSfile.css من قسم المستكشف في محرر النصوص. الخطوة الثانية: اكتب داخل الملف قاعدة التنسيق باستهداف نوع الفقرة p وخصائصها، فتكتب p { color: green; }. الخطوة الثالثة: اربط ملف CSS بملف HTML عبر إضافة السطر التالي داخل قسم head في صفحة HTML: link rel="stylesheet" type="text/css" href="myCSSfile.css". الخطوة الرابعة: احفظ الملفين، وعند فتح صفحة HTML في المتصفح ستظهر جميع الفقرات باللون الأخضر بناءً على التنسيق الوارد في الملف الخارجي.

أخطاء شائعة

نسيان وضع الفاصلة المنقوطة بين خصائص التنسيق داخل كتلة التعريف. خلط الأماكن بكتابة وسم الارتباط link خارج قسم head في ملف HTML. استخدام رمز الفئة. بدلاً من رمز المعرف # عند محاولة استهداف عنصر يحمل خاصية id. عدم مطابقة اسم الملف المطلوب ربطه في خاصية href مع اسم ملف CSS الفعلي في المجلد.

سؤالان للتدريب مع الإجابة

السؤال الأول: كيف تكتب جملة تنسيق نمطية تجعل حجم الخط للعناوين الكبرى h1 مساوياً لـ 20 بكسل؟ الإجابة: h1 { font-size: 20px; } السؤال الثاني: ما الفرق بين محدد المعرف id ومحدد الفئة class في الاستخدام؟ الإجابة: محدد المعرف id يسبقه رمز # ويستخدم لاختيار عنصر فريد ومحدد داخل الصفحة يحمل خاصية id معينة، بينما محدد الفئة class يسبقه رمز. ويستخدم لتجميع وتطبيق التنسيق على مجموعة متعددة من العناصر تشترك في نفس الفئة.