بسم الله الرحمن الرحيم اعتذر عن التأخر في تقديم هذا الدرس ان شاءالله اليوم سنتعلم الخصائص التي سنتقوم باضافتها للوسم < BODY > لتخصيص الشكل العام للصفحة وايضاً الألوان.
طبعاً في الدرس الاول ذكرنا الوسوم التي تتكون منها الصفحة فعلياً وشرحنا وظائف كل وسم وطريقة التعامل معه لذا بعد كل تطبيقه للدرس الاول ستجد انك قمت بتصميم صفحة الكترونية وتستطيع حفظها ورفعها الى الانترنت على سبيل المثال بلوجر لتكون صفحة بسیطة بخلفیة رمادیة وخط صغیر نسبیاً لونھ أسود. وھذه ھي الإعدادات الإفتراضیة التي یعتمدھا المتصفح عندما لا نقوم نحن بتحدید إعدادات أخرى. (ربما تقول: أھذه صفحة إنترنت! أین الألوان والرسومات والخطوط الجمیلة والتنسیقات التي نراھا في صفحات الإنترنت؟ معك حق لكن مھلاً فما زلنا في البدایة).
طبعاً سنستخدم الصفحة التي صممناها وولكن قد تقول اين هي هذه الصفحة وكيف سأحفظها بتطبيقك للدرس الاول يمكنك نسخ جميع الاكواد والوسوم ونقلها الى اي محرر نصوص وطبعاً عند الضغط على حفظ سيقوم محرر النصوص باختيار صيغة HTML تلقائياً ويمكنك التعديل عليها متى شئت وهناك العديد من محررات النصوص اذكر لك اشهرها:
Sublime text 3
واحد من افضل محرر النصوص سهل الاستخدام وخفيف وصغير الحجم ومتواجد على معظم الانظمة ويوجد منه نسخة مجانية واخرى مدفوعة ولعل من اهم ميزاته التكملة التلقائية ويتيح لك تحرير النصوص البرمجية لكثير من لغات البرمجة من اهمها:
C, C , C#, CSS, D, Erlang, HTML,
Groovy, Haskell, HTML, Java,
LaTeX, Lisp, Lua, Markdown,
Matlab, OCaml, Perl, PHP, Python,
R, Ruby, SQL, TCL, Textile and XML
طبعاً لن أقوم بتكرار كتابة وسوم البدایة طالما أن عملنا یتركز في الجزء المخصص لمحتویات الصفحة نفسھا أي ضمن الوسمین < BODY > ... < BODY/ >.
طبعاً يمكنك ايضاً بعد حفظ صفحتك ان ترى النتيجة في المتصفح بعد ان تقوم بفتح ملف HTML عن طريق اختيار OPEN WITH (بعد الضغط بالزر الايمن) واختيار المتصفح.
نطلق كلمة خاصیة (Attribute) على التعابیر التي تضاف إلى الوسوم، من أجل تحدید الكیفیة أو الشكل الذي تعمل بھا ھذه الوسوم. وبعبارة أخرى فإن الوسم یقوم بإخبار المتصفح عن العمل الذي یجب القیام بھ أما الخاصیة فتحدد الكیفیة التي سیتم بھا أداء ھذا العمل.
مثال :
في البداية نقوم بالدخول الى اي محرر نصوص ولكي اسهل عليكم الشرح سندخل الى notebad الموجود افتراضياً في الويندوز:
وھو ھنا اللون الأخضر، (لاحظ أنھا مكتوبھ بین إشارتي " " )
من أین جاءت ھذه القیم، وكیف؟
تلاحظ أن القیم السابقة مكونة من ستة رموز، وھي مكتوبة بالصیغة التالیة:
ھناك ثلاثة ألوان أساسیة ھي الأحمر والأخضر والأزرق، ولكل منھا یوجد 256 درجة لونیة ویعبر عن ھذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج ھذه الألوان بدرجاتھا اللونیة المختلفة نحصل على الألوان الأخرى.
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبیض مكون من الدرجة 255 من ھذه الألوان. أما اللون الأصفر
فھو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وھكذا بنفس الطریقة یتم تكوین باقي الألوان
وبعملیة حسابیة بسیطة 256×256×256 ینتج لدینا أن عدد الألوان التي یمكن الحصول علیھا بمزج الألوان الثلاثة السابقة ھو 16777216 بالضبط.
حسناً الان قد تتسائل من اي جائت الرموز ffffff التي تعبر عن اللون الابيض,إنها مجرد ارقام مكتوبة بنظام العد السداسي العشري وهو نظام عد أساسه الرقم 16 ويعبر عنه بالارقام المعتادة من 0 الى 9 والرموز A,B,C,D,E,F فالرقم 255 بالنظام العشري يقابله FF بالنظام السداسي العشري
اذن فالرقم السداسي عشري FF على الیسار یمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط یمثل الدرجة 255 من اللون الأخضر. والرقم FF على الیمین یمثل الدرجة 255 من اللون الأزرق.
وعلى ھذا المنوال یعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: CC6699 أما اللون الأسود فرقمه ھو 000000.
وھذا جدول ببعض الألوان ورموزھا المكافئة بالنظام السداس عشري:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل ھذه الرموز،لذلك من الأفضل استخدامھا دائماً.
الان سنقوم بتغيير خلفية الصفحة الى صورة من اختيارك
مثال:
< HTML >
< HEAD >
< TITLE >
first page web
< /TITLE >
< /HEAD >
< BODY BGCOLOR =" #000000 " BACKGROUND= " http://www.m5zn.com/newuploads/2015/08/23/png//fb9dd47f74bef60.png " >
الصفحة الاولى
< /BODY >
< /HTML >
كما تلاحظن فإننا استخدمنا خاصية BACKGROUND لتغيير خلفية الصورة وقد وضعت رابط لصورة لكي اجعلها خلفية وبعد ذلك قم بحفظ الصفحة وشاهد النتيجة
ولنكمل مع باقي الخصائص في وسم < BODY >: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبیة (Links) التي تنقر علیھا لتنقلك إلى صفحات أو مواقع أخرى على الشبكة ھي دائماً ممیزة باللون الأزرق، وأن الوصلات التي قمت بزیارتھا فعلاً قد تحول لونھا إلى القرمزي. حسناً، ھذه ھي الألوان الإفتراضیة التي تعتمدھا المتصفحات. لكن قد لا یعجبك ذلك وترید تغییر ھذا النظام. أو ببساطة ربما ترید استخدام لون أو صورة غامقة لخلفیة الصفحة بما سیؤدي إلى اختفاء ھذه الوصلات أوحتى اختفاء نص الصفحة نفسھا. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
الى هنا ينتهي الدرس الثاني من هذه الدورة وعلى أمل ان التقي بكم مجدداً في الدرس القادم من هذه الدورة
والسلام عليكم ورحمة الله وبركاته.
دورة لغة HTML : الدرس الثاني الألوان
4/
5
Oleh
Ahmed alqaisi
تذكرو قول الله سبحانه وتعالى: وما يلفظ من قول الا لديه رقيب عتيد