20/02/2024
تعلم أساسيات HTML

الدرس الحادى عشر – الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة

يمكن إضافة الألوان في HTML لأى عنصر ب6 طرق مختلفة هي: اسم اللون أو RGB. أو RGBA أو HSL. أو HSLA أو HEX


الطريقة الأولى – الألوان فى HTML باسم اللون

يمكن إضافة اللون باسمه حيث يوجد 140 لون يمكن اضافتهم بهذه الطريقة ، وأشهرها كما هو في المثال التالي

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

مثال اضافة خلفية باسم اللون: حيث فى هذا المثال سوف نستخدم اسم اللون لإضافة خلفية للعنصر P الخاص بالفقرة باستخدام السمة style كما تعلمنا سابقا

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

بينما يظهر كالتالى فى المتصفح

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


مثال تغيير لون الخط باسم اللون: فى هذا المثال سوف نستخدم اسم اللون لتغيير لون الخط للعنصر P الخاص بالفقرة باستخدام السمة style كما تعلمنا سابقا

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

بينما تظهر كالتالى فى المتصفح

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


مثال اضافة اطار باسم اللون: فى هذا المثال سوف نستخدم اسم اللون لاضافة اطار للعنصر P الخاص بالفقرة باستخدام السمة style كما تعلمنا سابقا

<p style="border:2px solid Violet;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

بينما تظهر فى المتصفح كالتالى

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


الطريقة الثانية – الألوان فى HTML بـ RGB

بدلا من اسم اللون يتم اضافة ثلاثة أرقام تمثل الثلاثة ألوان الرئيسية: (الأحمر ، والأخضر ، والأزرق) حيث يكون اللون النهائى هو نتيجة المزج بينهم ، بحيث كل رقم منهم يكون بين 0 و 255 ، حيث تكتب كالتالى rgb(red,green,blue) .
بمعنى لو أردنا اللون الأحمر يكون الكود rgb(255,0,0)
كما يكون اللون الأخضر rgb(0,255,0)
بينما اللون الأزرق rgb(0,0,255)
وكذلك أيضا يكون اللون البنفسجى rgb(106,90,205)
وهكذا
كلما زاد الرقم كان اللون أفتح ولكن كلما قل الرقم كان اللون داكن
فيكون اللون الأسود rgb(0,0,0)
بينما يكون اللون الأبيض rgb(255,255,255)
فإذا استخدمنا rgb(200,200,200) فسيكون لون رمادى فاتح ، بينما rgb(100,100,100) لون رمادى داكن
وهكذا


الطريقة الثالثة – الألوان فى HTML بـ RGBA

تكتب بالصيغة rgba(red,green,blue,alpha) ، وهى مثل الطريقة السابقة تماما ولكن القيمة الرابعة المضافة alpha تمثل نسبة الشفافية : حيث 0.0 يكون شفاف بالكامل. بينما 1.0 يكون غير شفاف بالكامل.
فمثلا اذا استخدمنا rgba(255,99,71,0.5) تكون النتيجة لون احمر فاتح نصف شفاف


الطريقة الرابعة – الألوان فى HTML بـ HSL

يكتب اللون بالصيغة hsl(hue,saturation,lightness)

  • حيث hue تمثل درجة اللون: وتكون من 0 إلى 360
    0 – أحمر
    120 – أخضر
    240 – أزرق
  • بينما saturation تمثل درجة تشبع اللون: وتكون نسبة مئوية
    0% – رمادى، بينما 100% – اللون كامل
  • و lightness تمثل درجة اضاءة اللون (فاتح أو داكن): وتكون أيضا نسبة مئوية
    0% – أسود، بينما 100% – أبيض

الطريقة الخامسة – HSLA

تكتب بالصيغة hsla(hue,saturation,lightness,alpha) ، وهى مثل الطريقة السابقة تماما ولكن القيمة الرابعة المضافة alpha تمثل نسبة الشفافية: حيث 0.0 يكون شفاف بالكامل. بينما 1.0 يكون غير شفاف بالكامل.
فمثلا اذا استخدمنا hsla(0,100%,50%,0.5) فتكون النتيجة لون احمر فاتح نصف شفاف


الطريقة السادسة – الألوان فى HTML بـ HEX

وتكتب بالصيغة #RRGGBB حيث: RR (أحمر) بينما GG (أخضر) و bb (أزرق)
حيث كل لون يمثله رقمين بالنظام السادس عشرى من 00 إلى FF

ملحوظة: النظام السادس عشرى عبارة عن طريقة للعد ، فبدلا من العد بالطريقة العشرية التقليدية كما هو موضح أدناه:

0 – 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9

بينما في النظام السادس عشري يكون العد كالتالى :

0 – 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – a – b – c – d – e – f

كما في الأمثلة:
#ff0000 (أحمر)
#00ff00 (أخضر)
#0000ff (أزرق)
#000000 (أسود)
#ffffff (أبيض)
#6a5acd (بنفسجى)
#ee82ee (أحمر فاتح)
#a0a0a0 (رمادى)
#dcdcdc (رمادى فاتح)



روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →