Mr. A7meD KaMeL

10- الالوان في HTML

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة العاشرة: الالوان في HTML

عند تنسيق عنصر ما من عناصر صفحة HTML، كتعيين لون خلفية العنصر، فهناك العديد من القيم المختلفة لاختيار اللون المطلوب، تلك القيم يتم تصنيفها كما يلي:

اولا: قيمة اسم اللون Color Name:

فهناك العديد من الالوان الثابته يمكن استخدامها، كاللون الاحمر مثلا .. فيرمز له بالاسم red، ويتم استخدام اسم اللون في التنسيق كما في الكود التالي:

<p style="background-color:red;> هنا محتوى الفقرة </p>

ومن تلك الالوان التي يمكن استخدامها مايلي:

اللون الاحمر red

اللون الاصفر yellow

اللون البرتقالي orange

اللون الازرق الفاتح cyan

اللون الازرق blue …. الخ.

ويمكنك عرض الجدول الكامل الذي يحتوي على أسماء الوان الويب باستخدام الرابط التالي:

اكواد واسماء الوان الويب القياسية


ثانيا: قيمة كود اللون Color Hex Code:

كل لون له Hex Code خاص به، مهما كان اللون ومهما كانت درجته، يكون له كود منفرد وخاص به.

ويبدأ كود Hex للون بعلامة # ويتبعها عدد 6 احرف، ويمكن استخدام كود اللون كما في الكود التالي:

<p style="background-color:#FF0000;> هنا محتوى الفقرة </p>

حيث أنه تم استخدام كود اللون الاحمر بدلا من استخدام اسمه.

ويمكنك عرض الجدول الكامل الذي يحتوي على اكواد الوان الويب باستخدام الرابط التالي:

اكواد واسماء الوان الويب القياسية


ثالثا: قيمة RGB للون:

وتشير الحروف RGB الى Red Green Blue، حيث يمكن استخدام الخلط بين درجات تلك الالوان الثلاثة لاستخراج اللون المطلوب.

ويتم استخدام كود قيمة RGB للون كما يلي:

rgb(red, green, blue)

حيث أن القيم يتم كتابتها كما يلي:

rgb(0, 255, 0)

حيث انه في هذا الكود تم وضع قيمة للون الاحمر 0 وقيمة اللون الاخضر 255 وقيمة اللون الازرق 0، فيكون الناتج هو اللون الأخضر.

ويمكن الخلط بين لونين وليكن اللون الاحمر والاخضر = ويكون ناتجه هو اللون الأصفر، فيتم كتابته كما يلي:

rgb(255, 255, 0)

 

وتُكتَب تلك الاقيم باستخدام الارقام مابين 0 و 255، حيث ان القيمة هي ماتُحدد درجة اللون، فيمكن كتابتة لون ما كما يلي:

rgb(128, 128, 128)

حيث ان ناتج تلك القيم هي درجة متوسطة من درجات اللون الرمادي.

 

ويتم استخدام تلك القيم في تنسيق عنصر ما في صفحة الويب كما بالكود التالي:

<p style="background-color:rgb(255,0,255);"> هنا محتوى العنصر </p>

ويمكنك استخدام أداة RGB Calculator الخاصة بانشاء تلك القيم، من خلال الرابط التالي:

RGB Color Calculator


نهاية المحاضرة

تاريخ الموضوع: أبريل 22, 2017 5:07 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً