الألوان والخلفيات
أضف الألوان والخلفيات لإضفاء الحيوية على صفحتك
الألوان والخلفيات درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
الألوان والخلفيات
مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية إضافة الألوان والخلفيات إلى صفحة الويب الخاصة بكم لجعلها أكثر حيوية وجاذبية بصريًا.
لماذا نستخدم الألوان والخلفيات؟
يمكن للألوان والخلفيات أن:
- تجعل صفحة الويب أكثر جاذبية.
- تسلّط الضوء على المحتوى المهم.
- تحدّد طابع الصفحة أو نسقها.
لنتعلّم كيفية استخدامها بفاعلية!
تغيير لون النص
يمكنكم تغيير لون النص باستخدام الخاصية color. ويمكنكم استخدام:
- أسماء الألوان: مثال:
red،blue. - رموز Hex: مثال:
#ff0000،#0000ff. - قيم RGB: مثال:
rgb(255, 0, 0).
مثال:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
إضافة لون للخلفية
تُستخدم الخاصية background-color لتغيير لون خلفية عنصر.
مثال:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
خلفية الصفحة بالكامل
يمكنكم تغيير لون خلفية الصفحة بأكملها من خلال تطبيق الخاصية background-color على وسم <body>.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
إضافة صور للخلفية
يمكنكم تعيين صورة كخلفية باستخدام الخاصية background-image.
مثال:
في هذا المثال:
- تجعل
background-size: cover;الصورة تغطي الصفحة بأكملها. - تمنع
background-repeat: no-repeat;تكرار الصورة.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
دمج ألوان النص والخلفية
يمكنكم دمج ألوان النص والخلفية لإنشاء تصميمات جذابة بصريًا. احرصوا على أن يكون النص مقروءًا!
مثال:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
جرّب بنفسك
لننشئ صفحة ويب باستخدام الألوان والخلفيات. إليكم مثالًا:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية استخدام الألوان والخلفيات لجعل صفحات الويب أكثر حيوية وجاذبية بصريًا. في الدرس التالي، سنتعمّق في تنسيق النصوص لإضافة تأثيرات مثل الخط العريض والمائل وغيرها إلى نصوصكم. استعدّوا لتطوير مهاراتكم في التصميم!
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 16
- الدروس
- 35
الأسئلة الشائعة
هل درس «الألوان والخلفيات» مجاني؟
نعم — نص درس «الألوان والخلفيات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «الألوان والخلفيات»؟
أضف الألوان والخلفيات لإضفاء الحيوية على صفحتك تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الألوان والخلفيات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الأنماط المضمّنة
- أساسيات CSS
- الألوان والخلفيات
- تنسيق النصوص