لدرس الثاني
.HTML أھلاً وسھلاً بك إلى الدرس الثاني من كتاب تعلم
سوف نقوم في ھذا الدرس بالتعرف على الخصائص التي یمكن إضافتھا إلى الوسم
من أجل التحكم بالشكل العام للصفحة، وخصوصا فیما یتعلق بالألوان. <BODY>
طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتھا في الدرس الأول. صفحة بسیطة
بخلفیة رمادیة وخط صغیر نسبیاً لونھ أسود. وھذه ھي الإعدادات الإفتراضیة التي
یعتمدھا المتصفح عندما لا نقوم نحن بتحدید إعدادات أخرى. (ربما تقول: أھذه صفحة
إنترنت! أین الألوان والرسومات والخطوط الجمیلة والتنسیقات التي نراھا في صفحات
الإنترنت؟ معك حق لكن مھلاً فما زلنا في البدایة).
سوف نستمر باستخدام صفحتنا ھذه لتوضیح أمثلة ھذا الدرس أیضاً، لكن لن أقوم
بتكرار كتابة وسوم البدایة طالما أن عملنا یتركز في الجزء المخصصلمحتویات
.</BODY> ... <BODY> الصفحة نفسھا أي ضمن الوسمین
لنبدأ العمل یا عزیزي المتدرب !!!!!!!
www.dinaro.com/vb3
23
على التعابیر التي تضاف إلى الوسوم، من أجل (Attribute) نطلق كلمة خاصیة
تحدید الكیفیة أو الشكل الذي تعمل بھا ھذه الوسوم. وبعبارة أخرى فإن الوسم یقوم
بإخبار المتصفح عن العمل الذي یجب القیام بھ أما الخاصیة فتحدد الكیفیة التي سیتم بھا
أداء ھذا العمل.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
24
وھي تقوم ، <BODY> إلى الوسم BGCOLOR لقد قمت بإضافة الخاصیة
00 فھي القیمة التي تمثل اللون المختار FF بتحدید لون الخلفیة للصفحة. أما 00
وھو ھنا اللون الأخضر، (لاحظ أنھا مكتوبھ بین إشارتي " " )
فمن أین جاءت ھذه القیم، وكیف؟
القلیل عن الألوان...
تلاحظ أن القیم السابقة مكونة من ستة رموز، وھي مكتوبة بالصیغة التالیة:
www.dinaro.com/vb3
25
ھناك ثلاثة ألوان أساسیة ھي الأحمر والأخضر والأزرق، ولكل منھا یوجد 256 درجة
لونیة ویعبر عن ھذه الدرجات بالأرقام من 000 وحتى 255 . ومن خلال مزج ھذه
الألوان بدرجاتھا اللونیة المختلفة نحصل على الألوان الأخرى.
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر
والأزرق. واللون الأبیضمكون من الدرجة 255 من ھذه الألوان. أما اللون الأصفر
فھو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000
من اللون الأزرق... وھكذا بنفس الطریقة یتم تكوین باقي الألوان
256 ینتج لدینا أن عدد الألوان التي یمكن ×256× وبعملیة حسابیة بسیطة 256
الحصول علیھا بمزج الألوان الثلاثة السابقة ھو 16777216 بالضبط.
والتي عبرت عن اللون الأبیضبھا. إنھا FFFFFF حسنا، لكن من أي جاءت الرموز
ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسھ الرقم 16 ویعبر
فالرقم 255 .( A,B,C,D,E,F عنھ باستخدام الأرقام العادیة من 0 إلى 9 والرموز
بالنظام السداس عشري. FF بالنظام العشري العادي یكافئھ الرقم
على الیسار یمثل الدرجة 255 للون الأحمر. والرقم FF إذن فالرقم السداس عشري
على الیمین یمثل FF في الوسط یمثل الدرجة 255 من اللون الأخضر. والرقم FF
الدرجة 255 من اللون الأزرق.
CC وعلى ھذا المنوال یعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699
. أما اللون الأسود فرقمھ ھو 000000
وھذا جدول ببعضالألوان ورموزھا المكافئة بالنظام السداس عشري.
www.dinaro.com/vb3
26
www.dinaro.com/vb3
27
www.dinaro.com/vb3
28
بیان بألوان الخلفیات :
www.dinaro.com/vb3
29
www.dinaro.com/vb3
30
ملاحظة مھمة:
بعضالمتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل ھذه الرموز،
لذلك من الأفضل استخدامھا دائماً.
وبالنسبة لبعض الألوان الأساسیة والدارجة، من الممكن استخدام أسماء ھذه الألوان
مباشرة بدلاً من الأرقام السداس عشریة. وھذا جدول یوضح ھذه الألوان ومسمیاتھا:
ونعود إلى الوسوم و خصائصھا ...
مثال :
www.dinaro.com/vb3
31
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000"
BACKGROUND="maroc.jpg">
hello world !!
</BODY>
</HTML>
بتحدید صورة كخلفیة (ورق جدران) للصفحة BACKGROUND تقوم الخاصیة
وقد استخدمت الصورة التالیة:
www.dinaro.com/vb3
32
في صفحتي وكانت ھذه النتیجة : maroc.jpg والمسماة
www.dinaro.com/vb3
33
تلاحظ أن المتصفح قد قام بتكرار عرضالصورة بطریقة التجانب وأنھا أصبحت تغطي
كل الشاشة. بحیث حجبت أیضاً اللون الأبیض الذي حددناه كلون الخلفیة (من خلال
والحقیقة أن اللون یظھر فقط عندما لا نقوم باستخدام (BGCOLOR الخاصیة
صورة ما كخلفیة. ومع ذلك یفضل تحدیده إحتیاطاً خاصة وأن بعضالمتصفحات القدیمة
أي لیس بإمكانھا عرض ) Text-Based Browsers توصف بأنھا متصفحات نصیة
الصور). أو ربما ھناك بعضالمستخدمین الذین قاموا بإلغاء خیار عرضالصور تلقائیاً
من متصفحاتھم. إذن لنعطھم على الأقل فرصة مشاھدة بعضالألوان إن لم یستطیعوا
مشاھدة الصور.
إننا نستطیع استخدام الصور بأحجام مختلفة طولیاً أو عرضیاً كخلفیات للصفحة،
والمتصفح نفسھ ھو الذي یقوم تلقائیاً بعرضھا في وضع التجانب مما یعطي الانطباع
بأنھا صورة كبیرة.
ربما لاحظت خلال استخدامك :<BODY> ولنكمل مع باقي الخصائصفي وسم
التي تنقر علیھا لتنقلك إلى صفحات أو (Links) للإنترنت أن معظم الوصلات التشعبیة
مواقع أخرى على الشبكة ھي دائماً ممیزة باللون الأزرق، وأن الوصلات التي قمت
بزیارتھا فعلاً قد تحول لونھا إلى القرمزي. حسناً، ھذه ھي الألوان الإفتراضیة التي
تعتمدھا المتصفحات. لكن قد لا یعجبك ذلك وترید تغییر ھذا النظام. أو ببساطة ربما ترید
استخدام لون أو صورة غامقة لخلفیة الصفحة بما سیؤدي إلى اختفاء ھذه الوصلات أو
حتى اختفاء نص الصفحة نفسھا. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
www.dinaro.com/vb3
34
والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة
بالألوان بنفس تلك الألوان التي تمثلھا. وألفت نظرك إلى أنھ لا أھمیة للترتیب في كتابة
ھذه الخصائصداخل العبارة.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BACKGROUND="dinaro.jpg"
BGCOLOR="#ff9900"
TEXT="#33ff66"
LINK="#6600ff"
VLINK="#ff0000"
ALINK="#999999">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
35
كخلفیة للصفحة؟ dinaro.jpg حاول أن تحللھا! ھل استنتجت أنني قد حددت الصورة
وأنني اخترت اللون البرتقالي للخلفیة (في حالة عدم عرضالصورة السابقة كخلفیة)؟
وان النصسیظھر باللون الأخضر ؟ أما الوصلات التشعبیة فلونھا أزرق، والوصلات
التي تمت زیارتھا ستظھر باللون الأحمر. أما تلك الوصلة الفعالة فستظھر باللون
الرمادي في لحظة النقر علیھا بالفأرة.
إذا كانت ھذه ھي استنتاجاتك... فمبروك، لقد نجحت. وكل ما أتمناه أن تكون قد قضیت
وقتاً ملوناً وزاھیاً مع ھذا الدرس.
ألیس ھذا
ممتعا
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHH
.HTML أھلاً وسھلاً بك إلى الدرس الثاني من كتاب تعلم
سوف نقوم في ھذا الدرس بالتعرف على الخصائص التي یمكن إضافتھا إلى الوسم
من أجل التحكم بالشكل العام للصفحة، وخصوصا فیما یتعلق بالألوان. <BODY>
طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتھا في الدرس الأول. صفحة بسیطة
بخلفیة رمادیة وخط صغیر نسبیاً لونھ أسود. وھذه ھي الإعدادات الإفتراضیة التي
یعتمدھا المتصفح عندما لا نقوم نحن بتحدید إعدادات أخرى. (ربما تقول: أھذه صفحة
إنترنت! أین الألوان والرسومات والخطوط الجمیلة والتنسیقات التي نراھا في صفحات
الإنترنت؟ معك حق لكن مھلاً فما زلنا في البدایة).
سوف نستمر باستخدام صفحتنا ھذه لتوضیح أمثلة ھذا الدرس أیضاً، لكن لن أقوم
بتكرار كتابة وسوم البدایة طالما أن عملنا یتركز في الجزء المخصصلمحتویات
.</BODY> ... <BODY> الصفحة نفسھا أي ضمن الوسمین
لنبدأ العمل یا عزیزي المتدرب !!!!!!!
www.dinaro.com/vb3
23
على التعابیر التي تضاف إلى الوسوم، من أجل (Attribute) نطلق كلمة خاصیة
تحدید الكیفیة أو الشكل الذي تعمل بھا ھذه الوسوم. وبعبارة أخرى فإن الوسم یقوم
بإخبار المتصفح عن العمل الذي یجب القیام بھ أما الخاصیة فتحدد الكیفیة التي سیتم بھا
أداء ھذا العمل.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
24
وھي تقوم ، <BODY> إلى الوسم BGCOLOR لقد قمت بإضافة الخاصیة
00 فھي القیمة التي تمثل اللون المختار FF بتحدید لون الخلفیة للصفحة. أما 00
وھو ھنا اللون الأخضر، (لاحظ أنھا مكتوبھ بین إشارتي " " )
فمن أین جاءت ھذه القیم، وكیف؟
القلیل عن الألوان...
تلاحظ أن القیم السابقة مكونة من ستة رموز، وھي مكتوبة بالصیغة التالیة:
www.dinaro.com/vb3
25
ھناك ثلاثة ألوان أساسیة ھي الأحمر والأخضر والأزرق، ولكل منھا یوجد 256 درجة
لونیة ویعبر عن ھذه الدرجات بالأرقام من 000 وحتى 255 . ومن خلال مزج ھذه
الألوان بدرجاتھا اللونیة المختلفة نحصل على الألوان الأخرى.
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر
والأزرق. واللون الأبیضمكون من الدرجة 255 من ھذه الألوان. أما اللون الأصفر
فھو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000
من اللون الأزرق... وھكذا بنفس الطریقة یتم تكوین باقي الألوان
256 ینتج لدینا أن عدد الألوان التي یمكن ×256× وبعملیة حسابیة بسیطة 256
الحصول علیھا بمزج الألوان الثلاثة السابقة ھو 16777216 بالضبط.
والتي عبرت عن اللون الأبیضبھا. إنھا FFFFFF حسنا، لكن من أي جاءت الرموز
ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسھ الرقم 16 ویعبر
فالرقم 255 .( A,B,C,D,E,F عنھ باستخدام الأرقام العادیة من 0 إلى 9 والرموز
بالنظام السداس عشري. FF بالنظام العشري العادي یكافئھ الرقم
على الیسار یمثل الدرجة 255 للون الأحمر. والرقم FF إذن فالرقم السداس عشري
على الیمین یمثل FF في الوسط یمثل الدرجة 255 من اللون الأخضر. والرقم FF
الدرجة 255 من اللون الأزرق.
CC وعلى ھذا المنوال یعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699
. أما اللون الأسود فرقمھ ھو 000000
وھذا جدول ببعضالألوان ورموزھا المكافئة بالنظام السداس عشري.
www.dinaro.com/vb3
26
www.dinaro.com/vb3
27
www.dinaro.com/vb3
28
بیان بألوان الخلفیات :
www.dinaro.com/vb3
29
www.dinaro.com/vb3
30
ملاحظة مھمة:
بعضالمتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل ھذه الرموز،
لذلك من الأفضل استخدامھا دائماً.
وبالنسبة لبعض الألوان الأساسیة والدارجة، من الممكن استخدام أسماء ھذه الألوان
مباشرة بدلاً من الأرقام السداس عشریة. وھذا جدول یوضح ھذه الألوان ومسمیاتھا:
ونعود إلى الوسوم و خصائصھا ...
مثال :
www.dinaro.com/vb3
31
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000"
BACKGROUND="maroc.jpg">
hello world !!
</BODY>
</HTML>
بتحدید صورة كخلفیة (ورق جدران) للصفحة BACKGROUND تقوم الخاصیة
وقد استخدمت الصورة التالیة:
www.dinaro.com/vb3
32
في صفحتي وكانت ھذه النتیجة : maroc.jpg والمسماة
www.dinaro.com/vb3
33
تلاحظ أن المتصفح قد قام بتكرار عرضالصورة بطریقة التجانب وأنھا أصبحت تغطي
كل الشاشة. بحیث حجبت أیضاً اللون الأبیض الذي حددناه كلون الخلفیة (من خلال
والحقیقة أن اللون یظھر فقط عندما لا نقوم باستخدام (BGCOLOR الخاصیة
صورة ما كخلفیة. ومع ذلك یفضل تحدیده إحتیاطاً خاصة وأن بعضالمتصفحات القدیمة
أي لیس بإمكانھا عرض ) Text-Based Browsers توصف بأنھا متصفحات نصیة
الصور). أو ربما ھناك بعضالمستخدمین الذین قاموا بإلغاء خیار عرضالصور تلقائیاً
من متصفحاتھم. إذن لنعطھم على الأقل فرصة مشاھدة بعضالألوان إن لم یستطیعوا
مشاھدة الصور.
إننا نستطیع استخدام الصور بأحجام مختلفة طولیاً أو عرضیاً كخلفیات للصفحة،
والمتصفح نفسھ ھو الذي یقوم تلقائیاً بعرضھا في وضع التجانب مما یعطي الانطباع
بأنھا صورة كبیرة.
ربما لاحظت خلال استخدامك :<BODY> ولنكمل مع باقي الخصائصفي وسم
التي تنقر علیھا لتنقلك إلى صفحات أو (Links) للإنترنت أن معظم الوصلات التشعبیة
مواقع أخرى على الشبكة ھي دائماً ممیزة باللون الأزرق، وأن الوصلات التي قمت
بزیارتھا فعلاً قد تحول لونھا إلى القرمزي. حسناً، ھذه ھي الألوان الإفتراضیة التي
تعتمدھا المتصفحات. لكن قد لا یعجبك ذلك وترید تغییر ھذا النظام. أو ببساطة ربما ترید
استخدام لون أو صورة غامقة لخلفیة الصفحة بما سیؤدي إلى اختفاء ھذه الوصلات أو
حتى اختفاء نص الصفحة نفسھا. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
www.dinaro.com/vb3
34
والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة
بالألوان بنفس تلك الألوان التي تمثلھا. وألفت نظرك إلى أنھ لا أھمیة للترتیب في كتابة
ھذه الخصائصداخل العبارة.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BACKGROUND="dinaro.jpg"
BGCOLOR="#ff9900"
TEXT="#33ff66"
LINK="#6600ff"
VLINK="#ff0000"
ALINK="#999999">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
35
كخلفیة للصفحة؟ dinaro.jpg حاول أن تحللھا! ھل استنتجت أنني قد حددت الصورة
وأنني اخترت اللون البرتقالي للخلفیة (في حالة عدم عرضالصورة السابقة كخلفیة)؟
وان النصسیظھر باللون الأخضر ؟ أما الوصلات التشعبیة فلونھا أزرق، والوصلات
التي تمت زیارتھا ستظھر باللون الأحمر. أما تلك الوصلة الفعالة فستظھر باللون
الرمادي في لحظة النقر علیھا بالفأرة.
إذا كانت ھذه ھي استنتاجاتك... فمبروك، لقد نجحت. وكل ما أتمناه أن تكون قد قضیت
وقتاً ملوناً وزاھیاً مع ھذا الدرس.
ألیس ھذا
ممتعا
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHH
