الألوان
الألوان لها
إستخدامات عديدة في HTML سنتعرف علي تلك الإستخدامات قبل أن نعرف الألوان
التي تدعمها المتصفحات وقيم الألوان
1)
تستخدم
الألوان في تحديد خلفية المستند أو الموقع .
إنسخ الكود
التالي :-
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:black">
</body>
</html>
ستظهر هكذا:-
شرح
الكود
أولاً قمنا
بتعريف المستند كـ HTML5 ثم
قمنا عملنا أساس الصفحة <html>
ثم كتبنا بداخله
الجزء الغير ظاهري وهو يحتوي علي معلومات عن الصفحة أو المستند <head>
ولم نكتب فيه أي
معلومة عن الصفحة ويمكن حذفه (ولو حذفته لا تنسي حذف وسم النهاية</head
وادخلنا ايضاً
بداخله الجزء المرئ الذي يحتوي علي العناصر المرئي وهو> <body
ولكن هذه المرة
أضفنا خلفية الصفحة والخلفية سمة ولذلك أضفنها في وسم البداية لجزئ الظاهري في
الصفحة وذلك لأن الخلفية عنصر ظاهر وهذه السمة هي style
وكما قولنا هي
المسئولة عن الأشكال والخطوط وهكذا .وأضفنا بداخلها background-color وهي
تعني لون الخلفية ثم أعطينا قيمة لها وهو black لون أسود .ولا
تنسي وضع علامات تنصيص ""علي
backround-color:black بحيث يكون بين علامتين التنصيص ولكن ولا تنسي علامة = بعد style
|
تكملة
الوسم
|
سمة
لون الخلفية
|
سمة
الشكلية
|
وسم
البداية
|
|
>
|
"background-color:black"
|
Style=
|
<body
|
يعني ممكن نختصر
القاعدة
<*
style="background-color:**"></*>
بحيث النجمة
الواحدة هي عنصر نص أو جزء الظاهري من
الصفحة body
ونجمتين هي لون
خلفية العنصر أو الجزء الظاهري مثلاً blue
ولاتنسي تلك
القاعدة للسمات property:value""
Property
الخاصية وvalue القيمة
2)
تستخدم
الألوان في تحديد خلفية عناصر أخر مثل البروجراف والعناوين هيدينجز
إنسخ الكود
التالي :-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="background-color:blue">I Am
blue</h1>
</body>
</html>
ستظهر هكذا:-
شرح
الكود
أولاً قمنا
بتعريف المستند كـ HTML5 ثم
قمنا عملنا أساس الصفحة <html>
ثم كتبنا بداخله
الجزء الغير ظاهري وهو يحتوي علي معلومات عن الصفحة أو المستند <head>
ولم نكتب فيه أي
معلومة عن الصفحة ويمكن حذفه (ولو حذفته لا تنسي حذف وسم النهاية</head
وادخلنا ايضاً
بداخله الجزء المرئ الذي يحتوي علي العناصر المرئي وهو> <body
ثم أدخلنا بداخله
عنصر عنوان هيدينج h1واضفنا له سمةstyle
وكما قولنا هي
المسئولة عن الأشكال والخطوط وهكذا .وأضفنا بداخلها background-color وهي
تعني لون الخلفية ثم أعطينا قيمة لها وهو blue لون أزرق .ولا
تنسي وضع علامات تنصيص ""علي
backround-color:blue بحيث يكون بين علامتين التنصيص
ولا تنسي علامة =
بعد style
|
وسم
النهاية
|
النص
|
تكملة
الوسم
|
سمة
لون الخلفية
|
سمة
الشكلية
|
وسم
البداية
|
|
</h1>
|
هنا
النص
|
>
|
"background-color:black"
|
Style=
|
<h1
|
يعني ممكن نختصر
القاعدة
<*
style="background-color:**"></*>
بحيث النجمة
الواحدة هي عنصر نص أو جزء الظاهري من
الصفحة body
ونجمتين هي لون
خلفية العنصر أو الجزء الظاهري مثلاً red أحمر
ولاتنسي تلك
القاعدة للسمات property:value""
Property
الخاصية وvalue القيمة
3)
تستخدم
الألوان في تحديد لون خط عناصر النصوص مثل البروجراف والعناوين هيدينجز
إنسخ الكود
التالي :-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red">I Am red</h1>
</body>
</html>
ستظهر هكذا:-
شرح
الكود
أولاً قمنا
بتعريف المستند كـ HTML5 ثم
قمنا عملنا أساس الصفحة <html>
ثم كتبنا بداخله
الجزء الغير ظاهري وهو يحتوي علي معلومات عن الصفحة أو المستند <head>
ولم نكتب فيه أي
معلومة عن الصفحة ويمكن حذفه (ولو حذفته لا تنسي حذف وسم النهاية</head
وادخلنا ايضاً
بداخله الجزء المرئ الذي يحتوي علي العناصر المرئي وهو> <body
ثم أدخلنا بداخله
عنصر عنوان هيدينج h1واضفنا له سمةstyle
وكما قولنا هي
المسئولة عن الأشكال والخطوط وهكذا .وأضفنا بداخلها color وهي تعني لون الخط
ثم أعطينا قيمة لها وهو red لون
أحمر .ولا تنسي وضع علامات تنصيص ""علي
backround-color:blue بحيث يكون بين علامتين التنصيص
ولا تنسي علامة =
بعد style
|
وسم
النهاية
|
النص
|
تكملة
الوسم
|
سمة
لون الخلفية
|
سمة
الشكلية
|
وسم
البداية
|
|
</h1>
|
هنا
النص
|
>
|
"color:red"
|
Style=
|
<h1
|
يعني ممكن نختصر
القاعدة
<*
style="color:**"></*>
بحيث النجمة
الواحدة هي عنصر نص
ونجمتين هي لون خط
العنصر red أحمر
ولاتنسي تلك
القاعدة للسمات property:value""
Property
الخاصية وvalue القيمة
4)
تستخدم
الألوان في تحديد لون خط عناصر النصوص مثل البروجراف والعناوين هيدينجز
إنسخ الكود التالي
:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="border:2px solid red">I Am red</h1>
</body>
</html>
ستظهر هكذا:-
شرح
الكود
أولاً قمنا
بتعريف المستند كـ HTML5 ثم
قمنا عملنا أساس الصفحة <html>
ثم كتبنا بداخله
الجزء الغير ظاهري وهو يحتوي علي معلومات عن الصفحة أو المستند <head>
ولم نكتب فيه أي
معلومة عن الصفحة ويمكن حذفه (ولو حذفته لا تنسي حذف وسم النهاية</head
وادخلنا ايضاً
بداخله الجزء المرئ الذي يحتوي علي العناصر المرئي وهو> <body
ثم أدخلنا بداخله
عنصر عنوان هيدينج h1واضفنا له سمةstyle
وكما قولنا هي
المسئولة عن الأشكال والخطوط وهكذا .وأضفنا بداخلها border وهي
تعني لون حدود ثم أعطينا قيمة لها وهو 2px أي يعني 2 بيكسيل وهي وحدة قياس أي أن حجم
الحدود التي تحد النص هي 2 بيكسيل ثم كتبنا solid وهي تعني لون
ثابت وكتبنا بعدها اللون وهو red أحمر
.ولا تنسي وضع علامات تنصيص ""علي
border:2px
solid red بحيث يكون بين علامتين التنصيص
ولا تنسي علامة =
بعد style
|
وسم
النهاية
|
النص
|
تكملة
الوسم
|
سمة
لون الخلفية
|
سمة
الشكلية
|
وسم
البداية
|
|
</h1>
|
هنا
النص
|
>
|
"border:2px solid red"
|
Style=
|
<h1
|
يعني ممكن نختصر
القاعدة
<*
style="border:**px solid ***"></*>
بحيث النجمة
الواحدة هي عنصر نص
ونجمتين هي حجم
الحدود
وثلاث نجوم هي
لون الحدود
ولاتنسي تلك
القاعدة للسمات property:value""
Property
الخاصية وvalue القيمة
نأتي لقيم
الألوان التي تدعمها المتصفحات بالأسامي وعددهم 144
عندنينا في للألوان 5 محددات للألوان.قبل أن نتعرف كيف كتابتهم في كود يجب أن نعرف ما هم
1-
RGB(red, green, blue)
وهو محدد متكون
من ثلاث الوان أحمر وهو red
اخضر وهو green
ازرق وهو blue
الحد الأقصي
للقيمة كل 255
والحد الأدني 0
واللون الناتج
يكون بجمع بين الثلاث الوان بالمقادير
حيث يتم دمج تلك
الألوان بذلك المقدار الذي تحدده
وصفر يعني لا
تدمج اللون
مثال
RGB(125,30,255)
هيطلعلك لون
بنفسجي
2-
RGBA(red,
green, blue, transparent)
وهي مثل السابق
مع إضافة transparent وهي الشفافية ويكون حدها الأقصي 100% والأدني 0%
ولو أصبحت 100%
لن تصبح شفافة وتصبح مثل RGB
Hex(#rrggbb)-3
rrوهو
مقدار اللون الأحمر
Ggوهو
مقدار اللون الأخضر
bbوهو
مقدار اللون الأزرق
4-
HSL(hue,
saturation, lightness)
Hue
وهي
درجة اللون وتنحصر قيمتها من صفر إلي 360
0أحمر 120 أخضر
240 أزرق
Saturation
وهي نسبة تشبع اللون وتنحصر قيمتها بين 0% إلي 100%
Lightness
هي إشراق اللون حيث كلما يقل يغمق اللون حتي يصبح أسود
وكلما زاد يزداد وتحصر قيمته بين 0% و 100%
كتابة اللون بأي
قيمة من القيم السابقة :-
1-استبدل اللون
في الإمثلة التي في أول الدرس بقيمة مثال:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="border:2px solid RGB(255,55,0) ;
color:RGBA(255,25,26,50%)">examlpe</h1>
<h1 style="background-color:HSL(120,50%,50%)">example</h1>
<h1 style="background-color:#489000">example</h1>
</body>
</html>
طبعاً
هتظهر كدا
ملاحظة عند الفصل بين سمة وسمة بيكون الفاصل ; ويكون السمات كلها بين علامتين تنصيص وال hex
لا تكتب قبله hex اكتب #وباقي الأرقام والحروف واحنا بدل ما نعقدكم عملنلكم برنامج رابطه تحت يعطيك قيمة اللون بال hex rgb
rgba
لا تكتب قبله hex اكتب #وباقي الأرقام والحروف واحنا بدل ما نعقدكم عملنلكم برنامج رابطه تحت يعطيك قيمة اللون بال hex rgb
rgba
إضغط هنا لرؤية كل الألوان التي تدعمها html بالأسامي
وعددها 144 لون
طبعاً هتسألني سؤال:-هو أنا كيف أعمل اللون اللي عايزه بدون تجربة الألوان أو هتقولي أنا هحفظ كل ده .
وعددها 144 لون
طبعاً هتسألني سؤال:-هو أنا كيف أعمل اللون اللي عايزه بدون تجربة الألوان أو هتقولي أنا هحفظ كل ده .
لذلك
قدم مدونتنا حل لتلك المشكلة حيث تم برمجة برنامج خفيف فيه تحدد اللون اللي إنت
عايزه وهيحوله لrgb rgba hex
وبعد كدا ممكن تستخدمه في html
وبعد كدا ممكن تستخدمه في html
ليست هناك تعليقات:
إرسال تعليق