كيفية إدراج لون خلفية في لغة الترميز HTML

How.com.vn العربية: PDF downloadتنزيل المقالHow.com.vn العربية: PDF downloadتنزيل المقال

إذا كنت ترغب في إدراج لون خلفية لصفحة الويب بلغة ترميز HTML، كل ما ليك هو إجراء تغيير سريع على عنصر "body" بداخل وسوم <style></style>. تختلف الخطوات قليلًا حسب رغبتك في إظهار الخلفية؛ تعرَّف على كيفية تثبيت خلفية لصفحة الويب التي تقوم بإنشائها بلون أو صورة أو تدرج لوني أو رسوم متحركة متعددة الألوان.

طريقة 1
طريقة 1 من 4:

وضع لون خلفية واحد

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 افتح ملف HTML بمحرر النصوص الذي تفضل استخدامه.
    بدءًا من إصدار HTML5، لم تعد خاصية <bgcolor> معتمدة. ينبغي التعامل مع لون الخلفية بالإضافة إلى جميع العناصر الأخرى المحددة لشكل صفحتك باستخدام لغة التنسيق CSS.[١]
  2. How.com.vn العربية: Step 2 أضف الوسوم <style></style> إلى ملفك.
    ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style> مسبقًا، انتقل إلى هذا الجزء من الملف.
    <!DOCTYPE html><html><head><style></style></head></html>
  3. Step 3 اكتب عنصر "body" داخل الوسوم <style></style>.
    أي شيء ستغيره في عنصر "body" في لغة التنسيق CSS سيؤثر على الصفحة بأكملها.
    <!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>
  4. Step 4 أضف خاصية "background-color" إلى عنصر "body".
    في نص هذا السياق، هناك تهجئة واحدة فقط لكلمة "لون" سوف تعمل بشكل صحيح، وهي: "color".
    <!DOCTYPE html><html><head><style>body {    background-color: }</style></head><body></body></html>
  5. Step 5 أضف لون الخلفية الذي ترغب به إلى خاصية "background-color".
    يمكنك كتابة اسم اللون (green, blue, red, إلخ.), واستخدام الرموز بالنظام الست عشري (hex) المحدد للون الذي ترغب به (على سبيل المثال، #000000 لإضافة اللون الأسود، أو #ff0000 للأحمر، إلخ) أو عن طريق كتابة قيمة اللون المرغوب (مثل rgb(255,255,0) لإضافة اللون الأصفر). فيما يلي مثال على استخدام شفرة سداسية عشرية ستجعل الخلفية بنفس لون شعار ويكي هاو:
    <!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}</style></head><body></body></html>
    • أبيض: #FFFFFF
    • وردي فاتح: #FFCCE6
    • بني محروق: #993300
    • نيلي - #4B0082
    • بنفسجي - #EE82EE
    • راجع w3schools.com HTML Color Picker للعثور على رموز ست عشرية لأي لون.
  6. Step 6 استخدم خاصية "background-color" لوضع ألوان للخلفية على عناصر أخرى.
    تمامًا كما فعلت لوضع لون على عنصر الجسم، يمكنك استخدام "background-color" لتحديد خلفيات العناصر الأخرى. قم فقط بإضافة تلك العناصر بداخل <style></style> مع خاصية background-color.[٢]
    <!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}h1 {    background-color: orange;}p {    background-color: rgb(255,0,0);}</style></head><body><h1>ستكون رأس هذه الصفحة بخلفية برتقالية</h1><p>ستكون خلفية هذه الفقرة باللون الأحمر</p></body></html>
طريقة 2
طريقة 2 من 4:

استخدام صورة كخلفية

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 افتح ملف HTML الذي تعمل عليه بمحرر نصوص.
    يفضل العديد من الأشخاص استخدام صورة في خلفية موقعهم على الويب. سوف يسمح لك ذلك بتعيين خلفيتك في شكل نقش أو محاكاة لملمس أو صورة، أو أي نوع آخر من الأشكال المصورة. بدءًا من إصدار HTML5، ينبغي عليك تعيين جميع أنواع الخلفيات باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة) داخل وسوم <style></style>.
  2. How.com.vn العربية: Step 2 أضف وسوم <style></style> إلى ملف HTML الذي تعمل عليه.
    ينبغي ترميز جميع المعلومات المحددة لشكل صفحتك (بما في ذلك لون الخلفية) ووضع الرموز بين هذه الوسوم. إذا كان لديك مجموعة من وسوم <style>، انتقل إلى هذا الجزء من الملف.
    <!DOCTYPE html><html><head><style></style></head></html>
  3. Step 3 اكتب عنصر "body" داخل الوسوم <style></style>.
    أي شيء ستغيره في عنصر "body" في لغة التنسيق CSS سيؤثر على الصفحة بأكملها.
    <!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>
  4. Step 4 أضف خاصية "background- image" إلى عنصر " body".
    عند إضافة هذه الخاصية، ستحتاج إلى اسم ملف الصورة التي ترغب باستخدامها. تأكد من تخزين ملف الصورة في نفس المجلد المخزن عليه ملف HTML (أو قم بإدخال مسار الملف بالكامل على خادم الويب الخاص بك).[٣]
    <!DOCTYPE html><html><head><style>body {    background-image: url("imagename.png");    background-color: #216fdb;}</style></head><body></body></html>
    • كما أنه من المفيد إضافة خاصية background-color، فقط في حالة عدم تحميل صورة الخلفية.
  5. How.com.vn العربية: Step 5 رتب طبقات الصور.
    يمكنك تجميع عدة صور فوق بعضها البعض. يمكن أن يكون ذلك مفيدًا إذا كنت تستخدم صورًا بخلفيات شفافة تكمل بعضها بعضًا عندما توضع في طبقات.
    <!DOCTYPE html><html><head><style>body {    background-image: url("image1.png"), url("image2.gif");    background-color: #216fdb;}</style></head><body></body></html>
    • ستظهر أول صورة تقوم بإدخالها في المقدمة. وتظهر الصورة الثانية خلف الصورة الأولى ... وهكذا.
طريقة 3
طريقة 3 من 4:

إنشاء خلفية بتدرج لوني

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 استخدم لغة التنسيق CSS لإنشاء خلفية بتدرج لوني.
    إذا كنت تبحث عن خلفية أكثر تحديدًا من اللون الواحد ولكن ليست مزدحمة كالرسوم المتحركة متعددة الألوان، جرِّب وضع لون متدرج في الخلفية. الألوان المتدرجة هي تلك الألوان التي تتدرج شيئًا فشيئًا لتتحول إلى ألوان أخرى. يمكنك استخدام لغة التنسيق CSS لإنشاء التدرج اللوني حسب رغبتك. قبل أن تجرب إنشاء تدرُّج لوني، تأكد من فهم أساسيات تصميم الصفحات باستخدام لغة التنسيق CSS.
  2. How.com.vn العربية: Step 2 اعرف كل ما يخصّ البنية الأساسية.
    عند إنشاء التدرج اللوني، سينبغي عليك معرفة معلومتين ستحتاج إليهما: نقطة البداية وزاويتها والألوان التي سيتم التدرج بينها. يمكنك اختيار ألوان مختلفة ينتقل بينها التدرج اللوني، كما يمكنك تحديد اتجاه أو زاوية التدرج.[٤]
    background: linear-gradient(direction/angle, color1, color2, color3, etc.);
  3. How.com.vn العربية: Step 3 أنشئ تدرجًا لونيًا يتجه عموديًا.
    إذا لم تحدد اتجاه التدرج فإنه سيتجه تلقائيًا من أعلى إلى أسفل. يختلف تنفيذ التدرج باختلاف المتصفحات وطريقة عمل التدرج عليها، لذلك سيكون عليك إدراج عدة إصدارات من الرموز البرمجية.
    <!DOCTYPE html><html><head><style>html {    min-height: 100%; /* يلزم ذلك لضمان امتداد التدرج في كامل الصفحة */}body {    background: -webkit-linear-gradient(#216fdb, #C9DCB9); /* Chrome 10+, Safari 5.1+ */    background: -o-linear-gradient(#216fdb, #C9DCB9); /* Opera 11.1+ */    background: -moz-linear-gradient(#216fdb, #C9DCB9); /* Firefox 3.6+ */    background: linear-gradient(#216fdb, #C9DCB9); /* البنية القياسية (يجب أن تكون في النهاية) */    background-color: #216fdb; /* قد يكون من المفيد تحديد لون للخلفية في حالة عدم تحميل التدرج اللوني */}</style></head><body></body></html>
  4. How.com.vn العربية: Step 4 قم بتحديد اتجاه التدرج.
    سيؤدي تحديد اتجاه التدرج إلى تغيير الطريقة التي يظهر بها تغيُّر اللون. لاحظ أن طريقة تعريف الاتجاه تختلف باختلاف المتصفح. غير أن جميع الطرق ستؤدي إلى نفس التدرج.[٥]
    <!DOCTYPE html><html><head><style>html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9); /* من اليسار إلى اليمين */    background: -o-linear-gradient(right, #216fdb, #C9DCB9); /* ينتهي من اليمين */    background: -moz-linear-gradient(right, #216fdb, #C9DCB9); /* ينتهي من اليمين */    background: linear-gradient(to right, #216fdb, #C9DCB9); /* يتحرك إلى اليمين */    background-color: #216fdb; /* قد يكون من المفيد تحديد لون للخلفية في حالة عدم تحميل التدرج اللوني */}</style></head><body></body></html>
  5. How.com.vn العربية: Step 5 استخدم خصائص أخرى لضبط التدرج اللوني.
    هناك الكثير من الطرق التي يمكنك بها التعامل مع التدرجات اللونية.
    • على سبيل المثال: لن يمكنك فقط إضافة أكثر من لونين، بل يمكنك أيضًا وضع نسبة مئوية لكل لون. سيتيح لك ذلك تحديد مقدار التباعد الذي تريد أن تكون عليه كل شريحة لونية.
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
    • أضف درجة الشفافية المرغوبة إلى ألوانك. سيؤدي ذلك إلى تلاشي اللون تدريجيًا. استخدم اللون نفسه لتنفيذ التدرج من ذلك اللون إلى الشفافية. ستحتاج إلى استخدام خاصية rgba() لتحديد اللون. حيث تحدد القيمة النهائية درجة الشفافية: تستخدم 0 للقيمة اللونية الكاملة و 1 للشفافية.
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
طريقة 4
طريقة 4 من 4:

ضبط خلفية متغيرة الألوان

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 انتقل إلى الجزء <style> من شفرة HTML.
    إذا لم يناسبك وضع خلفية بلون واحد، حاول تجربة هذه الخلفية المتحركة المتغيرة الألوان. بدءًا من إصدار HTML5، ينبغي عليك تعيين لون الخلفية باستخدام لغة التنسيق CSS (صفحات الطرز المتراصة). إذا لم يكن لديك خبرة سابقة في ضبط لون خلفية باستخدام لغة التنسيق CSS، راجع خطوة "وضع لون خلفية واحد" قبل تجربة هذه الطريقة.
  2. Step 2 أضف خاصية الرسوم المتحركة إلى العنصر "body".
    سيتوجب عليك إضافة خاصيتين مختلفين، حيث أن الترميز يختلف باختلاف المتصفح.[٦]
    <!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;    }</style></head><body></body></html>
    • -webkit-animation هي الخاصية المطلوبة للمتصفحات مفتوحة المصدر (جوجل كروم، أوبرا، سفاري). بينما animation هي الخاصية القياسية لجميع المتصفحات الأخرى.
    • colorchange هو ما سنطلق عليه اسم الرسوم المتحركة في هذا المثال.
    • 60s هي مدة الرسوم المتحركة/الحركة (60 ثانية). تأكَّد من ضبطه في كل من أداة الويب (webkit) والبنية القياسية.
    • infinite يجعل الرسوم المتحركة تتكرر إلى ما لا نهاية. إذا كنت تُفضل أن تدور الألوان مرة واحدة بداخل حلقة ثم تتوقف عند آخر لون، يمكنك إهمال هذا الجزء.
  3. How.com.vn العربية: Step 3 أضف الألوان التي ترغب بها إلى الرسوم المتحركة.
    ستستخدم الآن معيار keyframes@ لتعيين ألوان الخلفية التي ستبدأ منها الحركة، بالإضافة إلى المدة الزمنية التي سيظهر فيها كل لون على الصفحة. يرجى مراعاة أنك ستحتاج إلى مدخلات مختلفة حسب اختلاف المتصفح.[٧]
    <!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;}@-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}   </style></head><body></body></html>
    • لاحظ أن معياري (@-webkit-keyframes و @keyframes لهما نفس ألوان الخلفية والنسب المئوية، لذلك سيتوجب عليك توحيد الطريقة حتى تعمل بنفس الشكل على جميع المتصفحات.
    • إن النسب المئوية (0%، 25%، إلخ) هي من إجمالي مدة الرسوم المتحركة (60s). عند تحميل الصفحة، ستكون الخلفية باللون المحدد في 0% (#33FFF3). بمجرد تشغيل الرسوم المتحركة لمدة 25٪ من إجمالي 60 ثانية، سوف تتحول الخلفية إلى #78281F, وهكذا.
    • يمكنك تعديل الوقت والألوان حتى الوصول إلى النتيجة المرجوة.

المزيد حول هذا المقال

How.com.vn العربية: Jessica Andzouana
شارك في التأليف::
Jessica Andzouana
شارك Jessica Andzouana في تأليف المقال. يحرص الكتاب المشاركون ضمن فريق عمل ويكي هاو على العمل يدًا بيد مع المحررين لضمان أن المعلومات المذكورة في المقال دقيقة وشاملة لأقصى درجة ممكنة. تم عرض هذا المقال ٦٦٬٠٤١ مرة/مرات.
تصنيفات: برمجيات
تم عرض هذه الصفحة ٦٦٬٠٤١ مرة.

هل ساعدك هذا المقال؟