شرح درس التحكم في صفحات الويب
ما أهمية إعدادات اللون في صفحات الويب؟
عند الإطلاع على مواقع الويب المشهورة مثال موقع شركة Microsoft أو شركة Google نجد ان معظم صفحاتها مكتوبة
بنصوص ذات لون اسود او لون أدكن مع استخدام خلفيات بلون ابيض او لون فاتح. في بعض الحالات يمكن ان نجد صفحات
ويب ذات خلفيات ونصوص ملونة وذلك من اجل تمييزها عن بقية الصفحات الموجودة في الموقع نفسه.
كيف يتم إعداد الألوان في لغة HTML؟
اعدادات الألوان هي تحديد اللون المطلوب في صفحة الويب.
يعد نظام العد السادس عشر Hexadecimal احد الطرائق المستخدمة لتمثيل الألوان في لغة HTML
استخدامه في يتم استخدام ست ارقام او رموز لتمثيل الألوان الثالثه الأساسية Blue Green Red: RGB وتدرجاتها.
يخصص لكل لون رمزان. يمكن استخدام هذه الرموز ابتداء من اقل قيمة لونية وهي الصفر إلى اعلى قيمة لونية وهي F بحيث
يكون لدينا ستة عشر رقما تبدأ بالصفر وتستمر إلى 9 مرورا بالحرف A( الذي يمثل الرقم 10 ) وأخيرا تنتهي بالحرف F( الذي
يمثل الرقم 15 بنظام العد العشري (F,E,D,C,B,A,9,8,7,6,5,4,3,2,1,0)
اعداد لون الخلفية لصفحات الويب
لجعل خلفية صفحة الويب تأخذ لونا معينا بالاعتماد على الطريقة السابقة في تمثيل الألوان ، يمكن اجراء ذلك عبر كتابة خاصية اعداد اللون في داخل وسم البداية لجسم الصفحة body .مثال نستخدم الوسم الآتي وبداخله الرمز FFFF00 لجعل خلفية الصفحة باللون الأصفر :
<body style="background-color : #FFFF00">
كيف يتم ادراج الصور إلى صفحات الويب؟
صفحات الويب تكون اكثر فعالية في ايصال المعلومات والأخبار عند احتوائها على الصور فضلاً عن النصوص. الصور التي يتم
عرضها على صفحات الويب تكون مخزونة بشكل مستقل عن مستند HTML وليس كما يحصل مثال في ملف العرض التقديمي Point Power عندما يتم حفظ الصور داخل نفس الملف. يتم ادراج الصور إلى صفحة الويب عن طريق استخدام الوسم <img>الذي هو من النوع المنفرد( كما موضح في ادناه:
<img src = " Image1.jpg">
نلاحظ انه بواسطة الخاصية src تم كتابة اسم الصورة jpg.Image1 التي تكون موجودة في نفس المجلد الذي يحتوي مستند HTML ، كما يمكن وضع الصورة في مجلد فرعي مثال يكون اسمه مجلد_الصور ففي هذه الحالة يجب الإشارة إلى المسار الصحيح لمكان الصورة بالشكل الآتي :
<img src = " مجلد الصور /Image1.jpg">
بعد ادراج ملف الصورة إلى صفحة الويب، يمكن اجراء اعدادات الصورة التي هي عملية ضبط موقع الصورة وابعادها وغيرها من الاعدادات .
اعدادات موقع الصورة
يمكن اعداد الموقع الذي ستظهر فيه الصورة على جهة اليمين او على جهة اليسار عبر تطبيق خاصية float مع الوسم img وكما موضح في ادناه:
لإظهار الصورة على جهة اليمين
<right: float= style jpg.Image1= src img>
لإظهار الصورة على جهة اليسار
< left: float= style jpg.Image1= src img >
اعدادت حجم الصورة
يُعبرعن حجم الصور بوحدة البِكسل Pixel وهي اصغر نقطة في مكونات الصورة الرقمية المعروضة على الشاشة. يمكن ضبط عرض Width أوارتفاع Height الصور المدرجة في صفحات الويب عبر التحكم
بعدد البكسل بواسطة الوسم img كما موضح في أدناه.
كيف يمكن إعداد النصوص في صفحات الويب؟
إعدادات النصوص يمكن أن يشمل ضبط أنواع الخطوط وأحجامها وألوانها وغيرها من الإعدادات .
أولاً: إعدادات نوع الخط Face Fon
يمكن تحديد Arial او serif-sans أو Helvetica او غيرها كنوع للخط Face Font الذي سيظهر على صفحة الويب إذا تستخدم الخاصية family-font لتحقيق ذلك.
ثانياً :اعدادات حجم الخط Size Font
يمكن تحديد حجم خط الكتابة المعروضة على صفحة الويب بشكل نسبي بواسطة استخدام الخاصية size-font ، مثال تحديد نسبة 200 %اذا اردنا ظهور الكتابة بضعف الحجم الافتراضي المستخدم في
عرض النصوص.
ثالثاً : إعدادات لون الخط Font Face
تُستخدم الخاصية color لتغيير لون الكتابة من اللون الافتراضي وهو اللون الأسود إلي اي لون نرغب فيه بواسطة تحديد رمز اللون بالنظام السادس عشر كما تعلمنا سابقا.
رابعاً : المزيد من التحكمات في النصوص
أ- الخط العريض Face Bold :يمكن جعل كلمة او عبارة بخط عريض عبر استخدام الوسم <b>
ب- الخط المائل Italic :يمكن جعل كلمة او عبارة بخط مائل عبر استخدام الوسم <i>
ج- الخط البارز Highlighting :يمكن ابراز كلمة او عبارة معينة عبر استخدام الوسم <mark>
د- إدراج خط افقي: يمكن ادراج خط افقي في اي مكان في صفحة الويب من اجل اضافة المزيد من التنسيق للنصوص المعروضة عبر استخدام الوسم المنفرد <hr>