1 نتيجة بحث عن 336699

الدرس الثاني في تعلم لغة HTML *** تلوين أو اضافة صورة كخلفية صفحة الويب ***

*** *** *** *** *** ***

في هذا الدرس سنقوم بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم

الكود:: <BODY>

من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان
طبعاً أنت لا زلت تتذكر الصفحة التي قمنا بكتابتها في الدرس الأول. صفحة بسيطة بخلفية رمادية وخط صغير نسبياً لونه أسود. وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى. (ربما تقول: أهذه صفحة إنترنت! أين الألوان والرسومات والخطوط الجميلة والتنسيقات التي نراها في صفحات الإنترنت؟ معك حق لكن مهلاً فما زلنا في البداية).
سوف نستمر باستخدام صفحتنا هذه لتوضيح أمثلة هذا الدرس أيضاً، لكن لن أقوم بتكرار كتابة وسوم البداية طالما أن عملنا يتركز في الجزء المخصص لمحتويات الصفحة نفسها أي ضمن الوسمين

الكود:: <BODY>...</BODY>

إذن لنبدأ العمل!

نطلق كلمة خاصية (Attribute) على التعبيرات التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل

تأمل الشيفرة التالية :

الكود:: <BODY BGCOLOR="FFFFFF">‎
...
<‎/BODY>

لقد قمت بإضافة الخاصية
BGCOLOR
إلى الوسم

الكود:: <BODY>

، وهي تقوم بتحديد لون الخلفية للصفحة. أما
#FFFFFF
فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، لاحظ أنها مكتوبه بين إشارتي " " ولو أردت تمثيل اللون الأسود لكتبت الرمز
#000000
أو الرمز
#6699CC
للون الأزرق الفاتح

وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري

	#ABCDEF		#FFFF00
	#FEDCBA		#336699
	#773466		#112233
	#FF1122		#666666
	#0033FF		#663333
	#AABBAA		#00FF00
	#800800		#FF6600
	#008008		#993366
	#020769		#123456
	#111111		#654321

ومن الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية.
وهذا جدول يوضح هذه الألوان ومسمياتها :

	Black		White
	Red		Green
	Marron		Purple
	Navy		Blue
	Teal		Lime
	Gray		Silver
	Olive		Aqua
	Fuchsia		Yellow

وهناك طريقتان لتلوين خلفية صفحة الويب هما :
الاولى باضافة لون
والثانية باضافة صورة
لاضافة لون نستخدم الآتي :

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BGCOLOR="هنا نضع اسم اللون او كوده كابتل او اصمول">
   mohamed ali ramadan
   </BODY>
   </HTML>

مثال ذلك
لو جعلنا الخلفية حمراء نكتب الآتي في منطقة بداية الــ
BODY
بوضع اسم اللون

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BGCOLOR="red">
   mohamed ali ramadan
   </BODY>
   </HTML>

أو بكتابة كود اللون الاحمر هكذا

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BGCOLOR="#FF1122">
   mohamed ali ramadan
   </BODY>
   </HTML>

او هكذا

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BGCOLOR="#ff1122">
   mohamed ali ramadan
   </BODY>
   </HTML>

أما لاضافة صورة نكتب الآتي في منطقة بداية الــ
BODY
هكذا

الكود:: <BODY BACKGROUND="هنا رابط الصورة">‎
...
<‎/BODY>

مثال ذلك
سنضع مثلا رابط صورة علم مصر كخلفية لصفحة الويب هكذا

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif">
   mohamed ali ramadan
   </BODY>
   </HTML>

تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية من خلال الخاصية
BGCOLOR
والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات القديمة توصف بأنها متصفحات نصية
Text-Based Browsers
أي ليس بإمكانها عرض الصور). أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن لم يستطيعوا مشاهدة الصور
إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة

والآن نكمل باقي الخصائص في وسم

الكود:: <BODY>

ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية الروابط
Links
التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص :

‎TEXT="#rrggbb"‎	تحديد لون النص الأساسي للصفحة
‎LINK="#rrggbb"‎	تحديد لون الوصلات التشعبية
‎VLINK="#rrggbb"‎	تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
‎ALINK="#rrggbb"‎	تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links

والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة هذه الخصائص داخل العبارة ونكتبها هكذا

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif"
BGCOLOR="#ffff00"‎
TEXT="#000066"‎
LINK="#00ff00"‎
VLINK="#ff0000"‎
ALINK="#999999">
   mohamed ali ramadan<BR>https://marmar.mam9.com
   </BODY>
   </HTML>

أو هكذا

الكود::    <HTML>
   <HEAD>
   <TITLE>
   marmar 7bebty
   </TITLE>
   </HEAD>
   <BODY BACKGROUND="https://i.servimg.com/u/f69/17/93/78/55/egypt10.gif" BGCOLOR="#ffff00"‎ TEXT="#000066"‎ LINK="#00ff00"‎ VLINK="#ff0000"‎ ALINK="#999999">
   mohamed ali ramadan<BR>https://marmar.mam9.com
   </BODY>
   </HTML>

الآن تعالى نحلل مايحتويه الكود السابق

1 - وضعنا رابط صورة علم مصر كخلفية لصفحة الويب
2 - اخترت اللون الأصفر لكي يكون لونا للخلفية في حالة عدم عرض الصورة السابقة كخلفية
3 - وضعنا اللون الازرق القاتم للنص
4 - وضعنا اللون الأخضر للوصلات التشعيبية الروابط التي لم يتم النقر عليها
5 - وضعنا اللون الأحمر للوصلات التي تمت زيارتها
6 - وضعنا اللون الرمادي لوصلة الفعالة في لحظة النقر عليها بالفأرة

*** *** *** *** *** ***

الى اللقاء مع الدرس الثالث في تعلم لغة
HTML
إن شاء الرحمن وإن كان في عمري بقية