الخلفيات في HTML

الخلفية الجيدة تجعل الموقع يبدو مميزًا.

أمثلة

مزيج جيد من لون الخلفية ولون النص
مثال جيد على مزيج من لون الخلفية ولون النص، مما يجعل النص سهل القراءة في الصفحة.
مزيج سيء من لون الخلفية ولون النص
مثال سيء على مزيج من لون الخلفية ولون النص، مما يجعل النص صعب القراءة في الصفحة.

（يمكن العثور على أمثلة إضافية في أسفل الصفحة.。）

الخلفيات (Backgrounds)

<body> يحتوي على علامتين توجيهيتين لتحديد الخلفية. يمكن أن تكون الخلفية لونًا أو صورة.

لون الخلفية (Bgcolor)

اللون الخلفي للخلفية يتم تعيينه إلى لون معين. يمكن أن تكون القيمة قيمة ثنائية أو قيمة RGB أو اسم اللون.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

تم تعيين لون الخلفية للكود أعلاه إلى الأسود.

الخلفية (Background)

سيقوم الخاصية الخلفية بتعيين الخلفية إلى الصورة. يجب أن تكون قيمة الخاصية عنوان الصورة.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

يمكن أن يكون URL عنواناً مطلقاً، مثل السطر الأول من الكود. أو عنواناً مطلقاً، مثل السطر الثاني من الكود.

نصيحة:إذا كنت تخطط لاستخدام صورة خلفية، يجب أن تتذكر النقاط التالية:

  • هل تزيد صورة الخلفية من وقت تحميل الصفحة. نصيحة: لا يجب أن تزيد حجم ملف الصورة عن 10k.
  • هل تتماشى صورة الخلفية مع الصور الأخرى في الصفحة؟
  • هل تتماشى صورة الخلفية مع لون النص في الصفحة؟
  • هل تبدو الصورة المتكررة في الصفحة جيدة؟
  • هل تم إلهاء الانتباه للنص بوصف الصورة الخلفية؟

ملاحظات أساسية - نصائح مفيدة:

تم إزالة خصائص اللون الخلفي (bgcolor) والخلفية (background) والنص (text) في علامة <body> من المعايير الأحدث لـ HTML (HTML4 وXHTML). تم حذف هذه الخصائص من المعايير الموصى بها من قبل W3C.

يجب استخدام قواعد النمط (CSS) لتحديد ترتيب العناصر وتحديد خصائص العرض لـ HTML.

المزيد من الأمثلة

صورة خلفية قوية
مثال على الصفحة التي يجعل النص الصفحة سهل القراءة بسبب الصورة الخلفية والألوان النصية
صورة خلفية قوية 2
مثال آخر على الصفحة التي يجعل النص الصفحة سهل القراءة بسبب الصورة الخلفية والألوان النصية
صورة خلفية غير مستخدمة
مثال على الصفحة التي يجعل النص الصفحة صعب القراءة بسبب الصورة الخلفية والألوان النصية