☰ Year plan · Communication Technology (Arabic)

CSS: مظهر صفحة الويب

Week 9 · Unit 2, Lesson 2 Web Page Format (CSS) · 3 lessons
1

لماذا نفصل المظهر عن المحتوى؟

ICT Prep 2 Term 1, Unit 2, Lesson 2: pp. 59–66
الهدفأشرح لماذا يُفصل HTML عن CSS وأذكر فوائد CSS.
كلمات جديدة
لغة HTML · اللغة التي تصف محتوى الصفحة مثل العناوين والفقرات والصورأوراق الأنماط CSS · قواعد منفصلة تقول كيف تبدو الصفحة: الألوان والأحجام والخطوط والمسافاتالمتصفح · البرنامج الذي يقرأ الصفحة ويعرضها على الشاشةالوسم · كلمة بين قوسين زاويين مثل التي تحدّد العنوان
الشرح

تذكّر HTML من السنوات السابقة: فهي تصف محتوى الصفحة، مثل عنوان وفقرة وصورة، ويعرضها المتصفح. أما CSS فمجموعة قواعد منفصلة تحدّد مظهر الصفحة: الألوان والأحجام والخطوط والمسافات. تخيّل وصفة طبخ. قائمة المكوّنات والخطوات هي المحتوى. وطريقة تقديم الطبق وتزيينه هي المظهر. وإذا خلطتهما فإن تغيير المظهر يعني إعادة كتابة الوصفة. وقديمًا كان التنسيق يُكتب داخل HTML بوسوم تحدّد الخط. وكان ذلك بطيئًا في تغييره بالمواقع الكبيرة، فابتكرت جهة تضع معايير الويب لغة CSS لتفصل المظهر عن المحتوى. وهذا يأتي بفوائد كثيرة يبيّنها الجدول.

الفائدةالسبب
توفير الوقتتكتب المظهر مرة واحدة
تحميل أسرعيحتفظ المتصفح بنسخة واحدة من القواعد
سهولة التغييرتعدّل مرة واحدة فتتبعها كل الصفحات
أجمل وأسهل قراءةتصاميم أكثر عناية
فصل المحتوى عن التصميميمكن تغيير كل منهما وحده
صفحات تتكيّف مع الشاشاتCSS يساعد التخطيط على الملاءمة للهواتف والشاشات الكبيرة
أمثلة محلولة
بطاقة الوصفة = المحتوى (HTML)التزيين = المظهر (CSS)
يخبز عمر كعكة من بطاقة وصفة. تذكر البطاقة المكوّنات والخطوات: وهذا يشبه HTML. وتزيّن أخته الكعكة بالكريمة والكرز: وهذا يشبه CSS. ويمكنهما تغيير التزيين دون تغيير البطاقة.
موقع فيه مئة صفحة. يريد صاحبه أن يتحول لون كل العناوين من الأسود إلى الأزرق. بالتنسيق القديم داخل الصفحة يجب تغيير مئة صفحة. وبقاعدة CSS واحدة يُغيَّر سطر واحد وتتبعه كل الصفحات.
نشاط الفصل

ارسم بطاقة وصفة على جانب وطبقًا مزيّنًا على الجانب الآخر. واكتب تحتهما أيهما HTML وأيهما CSS. ثم اختر فائدتين من فوائد CSS في الجدول واشرح كل واحدة بجملة لأحد أفراد أسرتك.

تدرّب
1
ماذا تصف HTML؟
2
ماذا تصف CSS؟
3
لماذا تسهّل CSS التغييرات؟
4
اذكر فائدتين لـ CSS.