الألوان في لغة HTML 10 - Programmer Tech
html

الألوان في لغة HTML 10

الألوان في HTML

الألوان في لغة HTML

الألوان colors سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن استخدامها في الوسم body من اجل التحكم بالشكل العام للصفحة وخصوصاً فيما يتعلق بالألوان colors او اللون الافتراضي يكون اللون رمادي ماذا اذا كنت اريد تغيير الألوان في لغة HTML في الصفحة الخاصة بي من حيث الخطوط او الجسم بالكامل ماذا افعل؟ إليك الحل لغة html تمكنك التحكم بألوان الصفحة ونحن نعرف جميعاً بأن اكثر الاكواد تكتب داخل الوسم body لذلك يمكنك التحكم بتنسيق الألوان في لغة HTML داخل الوسم body مثال

<html>
    <head>
        <title> Programmer Tech </title>
    </head>
<body bgcolor = "#00ff00">
    HELLO WORLD
</body>
</html>

تم استخدام الخاصية bgcolor لتقوم بتعريف المتصفح اننا نريد استخدام لون معين لكن لم احدد اي لون و تم استخدامها في داخل الوسم body ومعنى هذا اننا نريد لون معين لكامل الصفحة من خلال كود اللون “00ff00” وايضا استخدمنا # لأن توجد متصفحات لا تتعرف على العدد السداسي عشري الذي كتبنا به كود اللون من خلال العدد فقط, وكتبنا الكود ضمن اشارتين تنصيص “”.

يمكن استخدام الألوان بواسطة استخدام قيم الألوان المختلفة. هناك عدة طرق لتمثيل الألوان في HTML:

  1. قيم الألوان الأساسية: يمكنك استخدام الألوان الأساسية عن طريق استخدام أسماء الألوان المعروفة مثل “red” (أحمر)، “green” (أخضر)، “blue” (أزرق)، وغيرها. وهناك ألوان أساسية أخرى مثل “yellow” (أصفر) و “black” (أسود) و “white” (أبيض).
  2. قيم الألوان بالكود الهيكساديسمال: يمكنك تمثيل الألوان باستخدام الكود الهيكساديسمال. يتكون الكود الهيكساديسمال من علامة الجمع “+” متبوعة بستة أحرف أو أرقام (0-9 وA-F) التي تمثل قيمة الألوان. على سبيل المثال، “#FF0000” يمثل اللون الأحمر الصافي، و “#00FF00” يمثل اللون الأخضر الصافي.
  3. قيم الألوان بنموذج RGB: يمكنك أيضًا تمثيل الألوان باستخدام نموذج RGB (Red, Green, Blue). يتألف هذا النموذج من قيمة الأحمر والأخضر والأزرق، ويتراوح كل منها من 0 إلى 255. على سبيل المثال، “rgb(255, 0, 0)” يمثل اللون الأحمر الصافي، و “rgb(0, 255, 0)” يمثل اللون الأخضر الصافي.
  4. قيم الألوان بنموذج RGBA: يمكنك استخدام نموذج RGBA لتمثيل الألوان، حيث تمثل القيمة “A” قيمة الشفافية (أو الألفا)، وتتراوح من 0 إلى 1. على سبيل المثال، “rgba(255, 0, 0, 0.5)” يمثل اللون الأحمر النصف شفاف.

هذه بعض الطرق الشائعة لتمثيل الألوان في لغة HTML. يمكنك استخدام أي منها حسب احتياجاتك وتفضيلاتك.

من خلال هذه الصور يمكنك التعرف على اكواد الالون بشكل اكثر دقه :

الألوان في لغة HTML 10

من خلال موقع w3schools يمكننا معرفه اكواد الألوان جميعها.

تستخدم لغة HTML لتصميم وتشكيل صفحات الويب، ويمكن استخدام الألوان لإضفاء الحيوية والتنوع على تصميم الصفحة. يمكن تحديد الألوان في HTML باستخدام أكواد الألوان.

تتمثل أكواد الألوان في HTML في ثلاثة أنواع:

  • أسماء الألوان: وهي مجموعة من الكلمات المعرفة مسبقاً في HTML لتحديد الألوان مثل red, green, blue, white, black وغيرها.
  • القيم الرقمية: والتي تأتي بصيغة RGB أو HEX، حيث يتم تحديد الألوان باستخدام مجموعة من الأرقام والحروف. وتعني RGB اختصار “Red, Green, Blue”، وتعني HEX اختصار “Hexadecimal”، وهي تعبير عن اللون باستخدام قيمة رقمية مكونة من 6 أرقام أو أحرف، حيث يتم تمثيل كل قناة لون بمدى من 0 إلى 255.
  • القيم الـ HSL: وهي تعني “Hue, Saturation, Lightness”، وتعبر عن اللون بالتحديد بقيمة اللون الأساسي ودرجة التشبع ودرجة الإضاءة.

فيما يلي بعض الأمثلة على كيفية تحديد الألوان في HTML باستخدام كل من الأسماء والقيم الرقمية والـ HSL:

تحديد الألوان باستخدام أسماء الألوان:

<p style="color:red;">هذا النص باللون الأحمر</p>
.

تحديد الألوان باستخدام القيم الرقمية:

<p style="color:#00FF00;">هذا النص باللون الأخضر</p>
.

تحديد الألوان باستخدام الـ HSL:

<p style="color:hsl(240, 100%, 50%);">هذا النص باللون الأزرق</p>
.

اعطاء صورة لكامل جسم الصفحة الألوان في لغة HTML

اليوم سنتعرف على كيفية اعطاء الصفحة صوره لتكون ورق حائط للصفحة بإستخدام خاصية background, وهذه الخاصية تحدد لنا ما اذا كنا نريد اعطاء صوره لخلفية الصفحة, ونحن نعرف ان الوسم body يكتب به اغلب الأكود وهو الوسم المتحكم في جسم الصفحة لذلك سوف اعطي هذه الخاصية الى الوسم body لتكون خلفية للصفحة كلها

<html> 
    <head> 
        <title> Programmer Tech </title> 
    </head>
<body bgcolor = "#000000" background="logo.png">
   HELLO WORLD 
</body> 
</html>

تم استخدام اللون الأسود الذي كوده 000000# ليكون خلفية للصفحة من خلال خاصية bgcolor لكن هذا اللون لن يظهر لأن بالتأكيد سيتم استحضار الصورة logo.png من خلال خاصية background ومن خلال هذا ستكون الصوره هي خلفية الصفحة وليس اللون الاسود الذي كتبناه, تم استحضار الصورة عن طريق مسار الصورة الذي مكانها في نفس الملف الذي اعمل به.

الألوان في لغة HTML 10

نلاحظ بأن المتصفح قد قام بتكرار الصوره, لتفادي ذلك نقوم بتعديل طول وعرض الصورة من خلال برنامج الفوتوشوب او برامج تعديل صور غيره.

الخصائص الذي تتحكم بالألوان و النصوص الألوان في لغة HTML

تحديد لون النص الأساسي للصفحة استخدمنا هنا الأصفر

"text="#ffff00
.

تحديد لون الوصلات التشعبية

"link="#ffff00
.

تحديد لون الوصلات التشعبية التي تمت زيارتها

vlink="#ffff00"
.

تحديد لون الوصلة التشعبية الفعالة عندما يتم النقر عليها

alink="#ffff00"
.

مثال

<html>
    <head>
        <title> Programmer Tech </title>
    </head>
<body background="logo.png" bgcolor = "#ff9900" text="#33ff66" alink="#6600ff" vlink="#99999">
    HELLO WORLD
</body>
</html>

تم استخدام اللون الأسود الذي كوده #ff9900 ليكون خلفية للصفحة من خلال خاصية bgcolor لكن هذا اللون لن يظهر لأن سيتم استحضار الصورة logo.png من خلال خاصية background ومن خلال هذا ستكون الصوره هي خلفية الصفحة وليس اللون الذي كتبناه, تم استحضار الصورة عن طريق مسار الصورة الذي مكانها في نفس الملف الذي اعمل به و لووننا النصوص في الصفحة باللون #33ff66 و لون الوصلات التشعبية التي تمت زيارتها باللون #99999 و الوصلات التشعبية الفعالة باللون #6600ff.

 

 

الألوان في لغة HTML 10

ما هي القيم المقبولة لشفافية الألوان في نموذج RGBA؟

في نموذج RGBA، قيمة الشفافية (أو الألفا) تتراوح بين 0 و 1. حيث:

  • 0 يعني شفافية كاملة، أي أن العنصر غير مرئي.
  • 1 يعني عدم وجود شفافية، أي أن العنصر مرئي بشكل كامل.

بالإضافة إلى ذلك، يمكن استخدام قيم فرعية بين 0 و 1 لتحقيق شفافية جزئية. على سبيل المثال، قيمة 0.5 تعني شفافية بنسبة 50٪، وهذا يعني أن العنصر سيظهر بوضوح إلى حد ما ولكنه ليس تمامًا غير مرئي.

لذا، يمكنك استخدام أي قيمة بين 0 و 1 لتعيين شفافية الألوان في نموذج RGBA، حسب ما يتناسب مع احتياجاتك وتصميمك.

ماذا يحدث إذا استخدمت قيمة سالبة للشفافية في نموذج RGBA؟

في نموذج RGBA، قيمة الشفافية (ألفا) يجب أن تكون بين 0 و 1. إذا استخدمت قيمة سالبة للشفافية، فستحدث نتائج غير محددة وغير متوقعة.

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

بشكل عام، يُنصح باستخدام قيمة الشفافية بين 0 و 1 وعدم استخدام قيم سالبة. إذا كنت بحاجة إلى تحقيق تأثيرات شفافية معينة، يمكنك تجربة تقديم أنماط خلفية مختلفة أو استخدام تقنيات أخرى مثل الصور PNG ذات القناة الألفا.

محمد تركي العلوش

من سورية بالتحديد من مدينة "منبج" ، ‏مبرمج ويب، محب للتقنية | ‎#أمن_المعلومات | ‎#الأمن_السيبراني | ‎#الشبكات | ‎#توعية_أمنية ، آمل أن أُقدم كل ما هو مفيد للجميع.
زر الذهاب إلى الأعلى