الألوان في لغة HTML
الألوان colors سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن استخدامها في الوسم body من اجل التحكم بالشكل العام للصفحة وخصوصاً فيما يتعلق بالألوان colors او اللون الافتراضي يكون اللون رمادي ماذا اذا كنت اريد تغيير الألوان في لغة HTML في الصفحة الخاصة بي من حيث الخطوط او الجسم بالكامل ماذا افعل؟ إليك الحل لغة html تمكنك التحكم بألوان الصفحة ونحن نعرف جميعاً بأن اكثر الاكواد تكتب داخل الوسم body لذلك يمكنك التحكم بتنسيق الألوان في لغة HTML داخل الوسم body مثال
<html>
<head>
<title> Nusur Tech </title>
</head>
<body bgcolor = "#00ff00">
HELLO WORLD
</body>
</html>
تم استخدام الخاصية bgcolor لتقوم بتعريف المتصفح اننا نريد استخدام لون معين لكن لم احدد اي لون و تم استخدامها في داخل الوسم body ومعنى هذا اننا نريد لون معين لكامل الصفحة من خلال كود اللون "00ff00" وايضا استخدمنا # لأن توجد متصفحات لا تتعرف على العدد السداسي عشري الذي كتبنا به كود اللون من خلال العدد فقط, وكتبنا الكود ضمن اشارتين تنصيص "".
من خلال موقع 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> Nusur Tech </title>
</head>
<body bgcolor = "#000000" background="logo.png">
HELLO WORLD
</body>
</html>
تم استخدام اللون الأسود الذي كوده 000000# ليكون خلفية للصفحة من خلال خاصية bgcolor لكن هذا اللون لن يظهر لأن بالتأكيد سيتم استحضار الصورة logo.png من خلال خاصية background ومن خلال هذا ستكون الصوره هي خلفية الصفحة وليس اللون الاسود الذي كتبناه, تم استحضار الصورة عن طريق مسار الصورة الذي مكانها في نفس الملف الذي اعمل به.
سوف نلاحظ بأن المتصفح قد قام بتكرار الصوره, لتفادي ذلك نقوم بتعديل طول وعرض الصورة من خلال برنامج الفوتوشوب او برامج تعديل صور غيره.
الخصائص الذي تتحكم بالألوان و النصوص الألوان في لغة HTML
تحديد لون النص الأساسي للصفحة استخدمنا هنا الأصفر
"text="#ffff00 .
تحديد لون الوصلات التشعبية
"link="#ffff00 .
تحديد لون الوصلات التشعبية التي تمت زيارتها
vlink="#ffff00" .
تحديد لون الوصلة التشعبية الفعالة عندما يتم النقر عليها
alink="#ffff00" .
مثال
<html>
<head>
<title> Nusur 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.