أهداف التعلم

• أن يوضّح الطالب دور لغتي HTML وCSS في بناء صفحات الويب وتنسيقها.
• أن يميّز الطالب بين المحتوى (HTML) والتنسيق (CSS) في صفحة الويب.
• أن يطبّق الطالب أساسيات تنسيق النصوص والألوان والخلفيات.
• أن يشرح الطالب مفهوم تخطيط الصفحة (Layout) وأهميته.

شرح الدرس

الفرق بين HTML وCSS

HTML (HyperText Markup Language) هي اللغة التي تُستخدم لبناء هيكل صفحة الويب ومحتواها، مثل العناوين والفقرات والصور والروابط. أما CSS (Cascading Style Sheets) فهي اللغة المسؤولة عن تنسيق هذا المحتوى وتجميله: الألوان، الخطوط، الخلفيات، والمسافات بين العناصر. يمكن تشبيه HTML بهيكل المنزل (الجدران والغرف)، وCSS بالديكور والدهانات التي تجعله جميلًا ومريحًا.

طرق كتابة CSS في صفحة الويب

1. تنسيق مضمَّن (Inline): يُكتب مباشرة داخل عنصر HTML باستخدام الخاصية style، ويُستخدم لتنسيقات بسيطة وسريعة.
2. تنسيق داخل الصفحة (Internal): يُكتب داخل وسم <style> في رأس الصفحة (<head>)، ويُستخدم عندما نريد تنسيق صفحة واحدة فقط.
3. ملف تنسيق خارجي (External): ملف منفصل بامتداد .css يُربط بصفحة HTML عبر وسم <link>، وهو الأسلوب الأفضل لأنه يسمح بتنسيق عدة صفحات بملف واحد وتحديثها بسهولة.

تنسيق النصوص

تتيح CSS التحكم في شكل النصوص بخصائص متعددة، من أهمها:

• color: لتحديد لون النص.
• font-size: لتحديد حجم الخط.
• font-family: لتحديد نوع الخط المستخدم.
• font-weight: للتحكم في سُمك الخط (عادي أو عريض).
• text-align: لمحاذاة النص (يمين، يسار، توسيط).

تنسيق الألوان والخلفيات

• تُحدَّد الألوان في CSS إما باسم اللون مباشرة (مثل red أو blue)، أو باستخدام أكواد لونية مثل النظام السداسي عشري (Hex Code) مثل #ff0000.
• الخاصية background-color تُستخدم لتحديد لون خلفية عنصر أو صفحة كاملة.
• الخاصية background-image تسمح بوضع صورة كخلفية للصفحة أو لعنصر معين.
• يُفضَّل اختيار تباين جيد بين لون النص ولون الخلفية لضمان وضوح القراءة، كما درسنا في مبادئ تصميم الواجهات.

مفهوم تخطيط الصفحة (Layout)

تخطيط الصفحة (Layout) هو الطريقة التي تُرتَّب بها عناصر الصفحة المختلفة (القوائم، الصور، النصوص) في المساحة المتاحة على الشاشة، بحيث تظهر منظمة ومتناسقة. من أهم أدوات التخطيط في CSS:

• الهوامش والمسافات: خاصيتا margin (المسافة خارج العنصر) وpadding (المسافة داخل العنصر) للتحكم في المسافات بين العناصر.
• تقسيم الصفحة إلى أقسام: مثل رأس الصفحة (Header)، والقائمة الجانبية (Sidebar)، والمحتوى الرئيسي، وتذييل الصفحة (Footer).
• الترتيب المرن (Flexbox): أداة في CSS تساعد على ترتيب العناصر بجانب بعضها أو تحتها بسهولة ومرونة، وتتكيف تلقائيًّا مع حجم الشاشة.
• التصميم المتجاوب (Responsive Design): تنسيق الصفحة بحيث تتغير طريقة عرضها تلقائيًّا لتناسب الشاشات المختلفة، من شاشة الحاسوب الكبيرة إلى شاشة الهاتف الصغيرة.

مثال مبسط

لتنسيق عنوان رئيسي بلون أزرق وحجم كبير وخلفية رمادية فاتحة، يمكن كتابة قاعدة CSS التالية:

h1 {
  color: #0033cc;
  font-size: 32px;
  background-color: #f2f2f2;
  padding: 10px;
}

هذا الكود يوضح كيف تعمل CSS على تحديد الخصائص المختلفة لعنصر HTML واحد (وهو هنا العنوان h1) لجعله أكثر جاذبية ووضوحًا.

أسئلة للتدريب

1. وضّح الفرق بين وظيفة HTML ووظيفة CSS في صفحة الويب.
2. اذكر طرق كتابة CSS الثلاث، وأيها الأفضل عند تنسيق عدة صفحات؟ ولماذا؟
3. اذكر خاصيتين من خصائص CSS المستخدمة في تنسيق النصوص مع توضيح وظيفة كل منهما.
4. ما الفرق بين خاصيتي margin وpadding؟
5. ما المقصود بمفهوم التصميم المتجاوب (Responsive Design)؟ ولماذا يُعد ضروريًّا اليوم؟