الانتقال إلى المحتوى الرئيسي

كيفية تعيين صورة خلفية في هتمل: تعليمات خطوة بخطوة

  • الدكتور عبد السّلام بنو الأحمر بن الحارث
  • البرمجيات

يمكن لصورة الخلفية على صفحة الويب أن تحسن بشكل كبير الإدراك البصري للمحتوى وتجعل الموقع أكثر جاذبية للزوار. في هذه المقالة ، ونحن سوف اقول لكم كيفية تعيين صورة الخلفية في هتمل باستخدام خطوات بسيطة.

الخطوة 1: ابدأ بإنشاء ملف هتمل لصفحة الويب الخاصة بك. يمكن القيام بذلك باستخدام أي محرر نصوص مثل المفكرة أو النص السامي. يجب أن يكون الملف الخاص بك .أتش تي أم أل التمديد.

الخطوة 2: قم بإنشاء نمط داخل ملف هتمل لتعيين صورة الخلفية. للقيام بذلك ، يمكنك استخدام العلامة. على سبيل المثال ، يمكنك تعيين صورة الخلفية على النحو التالي:

الجسم {

الخلفية-صورة: رابط ("صورة.جبغ");

}

الخطوة 3: حدد المسار إلى صورة الخلفية الخاصة بك في خاصية "صورة الخلفية" ، لتحل محل " صورة.جبغ " إلى المسار إلى ملف الصورة. على سبيل المثال ، إذا كانت صورتك في نفس المجلد مثل ملف هتمل الخاص بك ، يمكنك ببساطة تحديد اسم الملف.

الخطوة 4: احفظ ملف هتمل وافتحه في متصفح الويب. الآن يجب أن ترى صورة الخلفية التي قمت بتعيينها!

يعد تعيين صورة خلفية في هتمل طريقة سهلة لإضافة اهتمام مرئي إلى صفحة الويب الخاصة بك. باتباع هذا الدليل التفصيلي ، يمكنك بسهولة تعيين صورة خلفية على موقع الويب الخاص بك.

  1. الخطوة 1. إنشاء مستند هتمل
  2. تحديد نوع المستند ولغة المستند
  3. هيكل المستند باستخدام العلامات ، و
  4. الخطوة 2. تحضير الصورة
  5. اختيار وإعداد صورة الخلفية
  6. الخطوة 3. كس التصميم
  7. سؤال وجواب

الخطوة 1. إنشاء مستند هتمل

الخطوة الأولى عند تثبيت صورة خلفية في هتمل هي إنشاء مستند هتمل.

أتش تي أم أل (لغة ترميز النص التشعبي) هي لغة الترميز القياسية لإنشاء صفحات الويب. يتم استخدامه لتحديد هيكل ومحتوى الصفحة.

لإنشاء مستند هتمل ، تحتاج إلى:

  1. افتح محرر نصوص أو بيئة تطوير متكاملة.
  2. إنشاء ملف جديد وحفظه مع".أتش تي أم أل " التمديد. على سبيل المثال ، " الفهرس.أتش تي أم أل".
  3. افتح الملف الذي تم إنشاؤه في المحرر.

مثال على البنية الأساسية لمستند هتمل:

عنوان الصفحة

وصف الهيكل:

  • - يعلن نوع المستند كما هتمل5.
  • - العنصر الجذر أتش تي أم أل.
  • - يحتوي على معلومات التعريف عن الصفحة ، مثل العنوان.
  • عنوان الصفحة-يحدد عنوان الصفحة ، والذي يتم عرضه في الجزء العلوي من نافذة المتصفح أو في علامة التبويب الصفحة.
  • - يحتوي على المحتوى الرئيسي للصفحة المعروضة في نافذة المتصفح.

بعد إنشاء مستند هتمل وحفظه ، يمكنك المتابعة إلى الخطوة التالية - إضافة صورة خلفية.

تحديد نوع المستند ولغة المستند

دوكتيب هو عنصر مطلوب في بداية كل وثيقة هتمل. وهو يحدد إصدار هتمل الذي يستخدمه المستند بحيث يمكن لمتصفح الويب عرض محتوى الصفحة بشكل صحيح. يبدو عنصر دوكتيب كما يلي:

يشير هذا السطر إلى أن المستند هو مستند هتمل 5.

بعد ذلك ، يمكنك تحديد لغة المستند بحيث يمكن لمتصفح الويب تفسير النص على الصفحة بشكل صحيح. يتم استخدام سمة لانج لهذا الغرض. مثال على استخدام سمة لانج:

اللغةالرمز
هل الإنجليزيةأون
الروسيةرو
الفرنسيةالأب

لتحديد لغة المستند ، أضف سمة لانج إلى العلامة :

هنا" رو " يشير إلى اللغة الروسية.

هيكل المستند باستخدام العلامات ، و

في هتمل ، يمكن تنظيم بنية المستند باستخدام العلامات التالية:

  1. تهدف العلامة إلى وضع عنوان الصفحة أو قسمها.
  2. يتم استخدام العلامة لوضع المحتوى الرئيسي للصفحة.
  3. تهدف العلامة إلى وضع تذييل الصفحة أو قسمها.

تسمح لك هذه العلامات بتقسيم محتوى الصفحة إلى كتل منطقية وجعل الترميز أكثر تنظيما.

مثال على استخدام هذه العلامات:

الوسمالوصف
معلومات عنا
مثال:
مثال:

معلومات الاتصال: الهاتف والبريد الإلكتروني والعنوان.

Facebook

تويتر

Instagramr Instagram

الخطوة 2. تحضير الصورة

  1. قبل تثبيت صورة خلفية على صفحة الويب الخاصة بك ، تحتاج إلى القيام ببعض الأعمال التحضيرية مع الصورة نفسها. سيؤدي ذلك إلى تحقيق أفضل تأثير مرئي وتحسين حجمه لتحميل أسرع.
  2. 1. حجم الصورة:
  3. من المهم تحديد الحجم المطلوب لصورة الخلفية. سيسمح لك ذلك بتعيين الأبعاد الصحيحة للحاوية التي سيتم وضع الصورة فيها. يرجى ملاحظة أن حجم الحاوية يجب أن يكون كافيا لاستيعاب الصورة بالكامل دون تشويه.

2. تنسيق الصورة:

حدد التنسيق المناسب لصورة الخلفية الخاصة بك. الأشكال الأكثر شيوعا هي جبيغ و ينغ. وعادة ما يستخدم تنسيق جبيغ للصور أو الصور مع عدد كبير من الألوان ، في حين يفضل تنسيق ينغ للصور مع الشفافية أو الرسومات مع عدد أقل من الألوان.3. جودة الصورة:
اضبط مستوى ضغط الصورة لتحقيق المزيج الأمثل من الجودة وحجم الملف. إذا كان حجم ملف الصورة كبيرا جدا ، فقد يستغرق التحميل على صفحة الويب وقتا طويلا. ومع ذلك ، يمكن أن يؤدي الضغط المفرط إلى فقدان جودة الصورة المرئية.4. معاينة:
قبل استخدام صورة كخلفية ، يوصى بمشاهدتها على مختلف الأجهزة ودقة الشاشة. سيساعد هذا في التأكد من أن الصورة تبدو جيدة وغير مشوهة على جميع الأجهزة التي يمكنها عرض صفحة الويب الخاصة بك.بعد الانتهاء من كل هذه الخطوات ، ستكون جاهزا للانتقال إلى الخطوة التالية — تثبيت صورة خلفية على صفحة الويب الخاصة بك.
اختيار وإعداد صورة الخلفيةقبل تثبيت صورة خلفية على صفحة ويب ، تحتاج إلى تحديد الصورة المناسبة وإعدادها.

اختيار الصورة:

يجب أن تكون الصورة جذابة بصريا وأن تتطابق مع محتوى الصفحة.

يجب أن تكون دقة الصورة عالية بما يكفي لجعلها تبدو واضحة على الأجهزة والشاشات المختلفة.

تنسيق الصورة المفضل لصورة الخلفية هو جبغ أو ينغ.

  1. إيلاء الاهتمام لحجم ملف الصورة. سيستغرق تحميل الملفات الكبيرة وقتا أطول، مما قد يؤثر سلبا على أداء الصفحة.
  2. إذا كان حجم الصورة لا يتطابق مع الأبعاد المطلوبة ، فيجب اقتصاصها أو تغييرها باستخدام محرر رسومات.
  3. تأكد من حفظ الصورة المعدة بالتنسيق بأفضل جودة وحجم ملف محسن.
  4. العنوان

حقوق النشر

تأكد من أن لديك الحق في استخدام الصورة المحددة كخلفية على صفحة الويب الخاصة بك. تحقق من شروط الترخيص أو احصل على إذن من مالك حقوق الطبع والنشر.نسبة التباين

تأكد من أن صورة الخلفية لا تجعل من الصعب قراءة النص على صفحة الويب. حدد صورة بالتباين المناسب بحيث يكون النص الموجود على الخلفية مرئيا بوضوح.

تحميل

ضع في اعتبارك حجم ملف الصورة عند تحديده. سيستغرق تحميل الملفات الكبيرة وقتا أطول ، مما قد يؤثر سلبا على تجربة المستخدم.

الخطوة 3. كس التصميم

بعد إضافة صورة خلفية إلى صفحة هتمل الخاصة بك ، يمكنك البدء في التصميم باستخدام كس.

يمكنك استخدام كس لتغيير الحجم والموضع والشفافية والسمات الأخرى لصورة الخلفية. يتم استخدام خصائص وقيم مختلفة لهذا الغرض.

فيما يلي بعض خصائص كس الأساسية التي يمكن استخدامها لتصميم صورة خلفية:

حجم الخلفية: يحدد حجم صورة الخلفية. على سبيل المثال ، يمكنك تعيين قيمة "الغلاف" بحيث تملأ الصورة منطقة الخلفية بأكملها ، أو تعيين قيم محددة للعرض والارتفاع. مثال:

حجم الخلفية: غطاء;