تكنولوجيا المعلومات / الصف الثاني الإعدادي/ الوحدة الثانية / الدرس الثاني (تنسيق صفحات الويب)

 

تكنولوجيا المعلومات والاتصالات / الصف الثاني الاعدادى

        الوحدة الثانية / الدرس الثاني   (تنسيق صفحات الويب)

الدرس الثاني : تنسيق صفحات الويب

ما لغة CSS؟ وضح ذلك.

لنتعلم

في الأعوام السابقة درسنا لغة HTML ، فهي لغة تكويد تستخدم لإنشاء صفحات مواقع الإنترنت الثابتة التي يتم عرضها باستخدام برامج مستعرضات الإنترنت.

وقد صممت HTML لوصف محتوى صفحة الويب. ولتنسيق صفحة الويب تم إضافة وسوم مثل <font> وسمات الألوان إلى لغة HTML فأصبح تطوير مواقع الويب الكبيرة مرهق وشاق، حيث تضاف تنسيقات الخطوط والألوان إلى كل صفحة، وأصبح تنسيق كل صفحة ويب عملية طويلة ومكلفة.

ولحل هذه المشكلة، أنشأ اتحاد شبكة الويب العالمية (C3W) لغة CSS، حيث لم تعد هناك حاجة لإجراء التنسيقات من خلال اضافة وسوم داخل صفحة HTML!

لغة تنسيق صفحات الويب (Cascading Style Sheets (CSS

نستخدم لغة (CSS) لتنسيق مظهر صفحات الويب مثل لون الخط، حجم الخط لون صفحة الويب، حيث إنها توفر الكثير من الجهد، إذ يمكنها التحكم في تنسيق العديد من صفحات ويب في آن واحد

فوائد لغة: CSS

·       توفير الوقت : يمكنك وضع كود التنسيق المطلوب في ملف CSS مستقل وتضمينه نفسه في أي عدد من صفحات HTML تريد استخدامه فيها.

·       سرعة التحميل : حين تضع كود التنسيق في ملف CSS وتضمنه في صفحات الموقع فإن المتصفح يقوم بتحميل هذا الملف مرة واحدة فقط ويخزن لديه، بعدها عند الدخول لأي صفحة مرتبطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدلا من تحميل الملف في كل مرة.

·       سهولة التعديل: بمجرد التعديل على كود التنسيق الموضوع في ملف CSS فإن كل صفحات الويب المرتبطة به سيتم تعديل تنسيقاتها تلقائيا.

·       تحسين المظهر الجمالي: الصفحة أصبحت أكثر جاذبية ومنظمة بصريا.

·       تحسين سهولة القراءة : اختيار الخطوط والألوان المناسبة يسهل قراءة المحتوى.

 

·       فصل التصميم والتنسيق عن محتوى صفحة الويب : يمكن تغيير شكل وتنسيق صفحة الويب وجميع صفحات الويب الأخرى عن طريق تعديل ملف CSS منفصل بدون الحاجة في تغيير هيكل الـ HTML لكل صفحة، فعندما نريد تغيير الألوان أو الخطوط مرة أخرى، يتم تعديل ملف CSS

·       بناء صفحات متجاوبة ومناسبة : بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب (Responsive) مع مختلف أحجام الشاشات (كمبيوتر - موبيل - تابلت -....) التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبة لحجم الصفحة المفتوحة عليها.

البنية الأساسية لـ CSS

الصيغة العامة لكود CSS تكون كالآتي

Selector {Property: Value};

القيمة       الخاصية       المحدد

المحدد: يمثل عنصر HTML أو مجموعة العناصر التي ستطبق عليها التنسيقات مثل "body"

الخاصية: تحدد ما الذي تريد تغييره (مثلا : اللون، الحجم، المسافة...)

القيمة: تحدد كيف تريد تغيير الخاصية

كيفية إضافة CSS لكود HTML؟

هناك ثلاث طرق لإدراج تنسيقات CSS وهي كالأتي:

1- تنسيقات مضمنة Inline CSS : يستخدم لتطبيق التنسيقات مباشرة على عناصر الصفحة.

2- تنسيقات داخلية Internal CSS : يستخدم لتنسيق الصفحات الفردية.

3- تنسيقات خارجية External CSS: يفضل استخدامه في المواقع الويب الكبيرة لتوحيد تصميم

كيفية كتابة كود تنسيقات CSS الخارجية   External CSS

·       يتم كتابة أكواد CSS في ملف منفصل بامتداد "CSS."

·       يتم ربط ملف CSS بصفحة HTML باستخدام الوسم <link داخل منطقة ال head.

·       يتيح ملف CSS الخارجي تغيير مظهر جميع صفحات الويب الخاصة بالموقع عن طريق التغيير في ملف واحد فقط !

·       الملف الخارجي CSS لا ينبغي أن يحتوي على أي وسم HTML.

الوسم <link> يكتب داخل ملف ال HTML كما بالصيغة التالية:

<link href="fileName.css" rel="stylesheet">

حيث

الخاصية href: هي اسم ملف ال CSS ومسار الملف

الخاصية rel: تستخدم داخل وسم link> في ملفات HTML لتحديد نوع العلاقة بين ملف HTML وملف خارجي آخر - وغالباً يكون هذا الملف هو ملف CSS.

rel="stylesheet" تخبر المتصفح أن الملف المشار إليه في خاصية  href  هو ملف CSS يجب تحميله وتطبيقه على الصفحة

مثال : إنشاء ملف HTML يتم من داخله استدعاء ملف CSS اسمه mystyle مخزن معه في نفس المجلد.

   أولا