في HTML، يتم إدراج الصور باستخدام علامة img.
بطاقة شعار img- فارغ، يحتوي على سمات ولا يحتوي على علامة إغلاق.

يتم استخدام السمة لعرض صورة على الصفحة src. سركجاء من المصدر، وهو ما يعني المصدر. قيمة السمة src هي عنوان URLالصور.

السطر أعلاه يعني أن الصورة موجودة في نفس الدليل (المجلد) مثل ملف html نفسه الذي يرتبط بهذه الصورة. لنفترض أن لديك مجلدًا لغة البرمجة، الذي يحتوي على Index.htmlمع الكود أعلاه والصورة نفسها مع العنوان image.jpg.

في هذه الحالة، عند الافتتاح Index.htmlسوف ترى هذه الصورة في متصفحك إذا كانت لديك في مكان آخر (مجلد أعلى أو أقل)، فبدلاً من ذلك سترى إما حقلًا أبيض أو مستطيلًا صغيرًا به صليب أحمر (لا يمكن تحميل الصورة).

لا توجد الصور دائمًا في نفس الدليل (المجلد) الموجود فيه الملف نفسه، لذا سيتم وصف تحديد المسارات بشكل أكثر تحديدًا بعد قليل.

سمات علامة img

بالإضافة إلى src، تحتوي علامة img على سمات أخرى مسؤولة عن حجم الصورة المعروضة والتسمية التوضيحية الخاصة بها وما إلى ذلك.

src- عنوان الصورة
عرض- عرض الصورة
ارتفاع- ارتفاع الصورة
عنوان- التوقيع الذي يظهر عند المرور فوق الصورة
بديل- نص بديل. مطلوب لروبوت البحث وفهرسة الصور
حدود- سمك حدود الصورة. 0 - بدون حدود، 1 - حدود أنحف، إلخ.

عنوان الصورة المدرجة (أمثلة)

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

إذا كان الملف موجودًا في المجلد أعلاه، فهذا هو الحال

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

صورة الخلفية في HTML

مثل الصورة الخلفيةقد تكون الملفات ذات الامتدادات gif, jpg, jpegو بي إن جي. إذا كان حجم الصورة أصغر من نافذة المتصفح، فستستمر الصورة تلقائيًا في ملء الخلفية المتبقية. في جسماستخدم السمة خلفية، حيث نحدد المسار إلى الصورة

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

لتعيين الخلفية في HTML، استخدم DOCTYPE المتوسط

وسأبدأ بحقيقة ذلك HTML5ليس من الممكن تعيين . تقرر إضافة هذه الميزة إلى CSS. لذلك، إذا كنت تخطط لاستخدام ما يلي وتريد الحصول على رمز صالح (صحيح)، فأنت بحاجة إلى اختيار نوع المستند الانتقالي. للقيام بذلك، يجب أن تبدأ صفحة الويب الخاصة بك بالسطر التالي:

انتقالية//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

خلفية مستند HTML وعناصره

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

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

السمة bgcolor لإنشاء لون الخلفية

يسأل لون الخلفيةتستخدم الوثيقة أو عناصرها الخاصية bgcolor، على سبيل المثال:

في هذه الحالة، نقوم بتعيين لون الخلفية للصفحة ككل. وإليك مثال لكيفية تعيين لون الخلفية لجدول في علامة TABLE:

النص مع الخلفية

من الجدير بالذكر أنه يمكن تحديد لون الخلفية في الجدول لكلا الصفين في علامة TR ولخلاياهما في علامة TD.

كيفية معرفة رمز اللون؟

ربما لاحظت بالفعل أن اللون في HTML تم تعيينه على خاص شفرة، على سبيل المثال: #ec008c . من أجل معرفة رمز اللون الذي تحتاجه، يمكنك استخدام أحد برامج تحرير الرسومات. على سبيل المثال، في Photoshop يمكنك استخدام " أداة القطارة» (الماصة) للحصول على اللون من نقطة في الصورة. بعد ذلك، تحتاج إلى النقر فوق اللون الناتج على شريط الأدوات وفي النافذة التي تفتح " أداة انتقاء اللون» (اختيار اللون) انسخ رمز اللون.

يرجى ملاحظة أن هذا الرمز لن يحتوي على علامة الجنيه (#) في البداية، ويجب إضافة هذه العلامة يدويًا.

يمكنك أيضًا استخدام العديد من الخدمات عبر الإنترنت، على سبيل المثال:

• إلخ.

مبدأ التشغيل الخاص بهم أبسط - انقر فوق اللون المطلوب واحصل على الكود الخاص به.

سمة الخلفية لإنشاء صورة الخلفية

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

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

كما ترون، عند التكرار، يكون الانتقال بين الصور ملحوظًا. ولذلك، غالبا ما يتم استخدام صور خاصة حيث يتم أخذ هذه النقطة بعين الاعتبار.

وإليك مثال لكيفية تعيين صورة خلفية لجدول في علامة TABLE:

النص مع الخلفية

من الجدير بالذكر أنه لا يمكن تعيين صورة الخلفية إلا للجدول ككل و/أو خليته الفردية. هذا لن ينجح مع السلسلة.

المسار المطلق والنسبي لصورة الخلفية

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

في هذه الحالة، لن يكون لديك أي مشاكل ذات صلة. يمكنك قراءة المزيد عن هذا.

دعونا نلخص ذلك

لقد أصبح استخدام سمات bgcolor وbackground قديمًا، لذلك من أجل صلاحية كود HTML، سيتعين عليك استخدام DOCTYPE الانتقالي. لتعيين لون الخلفية في HTML، يتم استخدام رموز خاصة يمكنك العثور عليها في محرر الرسومات أو باستخدام خدمات خاصة عبر الإنترنت. يتم تكرار صورة الخلفية داخل المنطقة المخصصة لها وتقع أعلى لون الخلفية. لتحديد صورة خلفية، من الأفضل استخدام عنوان URL الكامل الخاص بها. هذا كل ما لدي. شكرًا لكم على اهتمامكم. حظ سعيد!

الساعة 22:37

تحرير الرسالة

يوم جيد لكل من يريد أن يتعلم ويتعلم شيئًا جديدًا! هل سبق لك أن اهتمت بالمظهر الذي كان المبدعون كسالى جدًا أثناء تطويره لتصميم خلفية الصفحات؟ وفعلت. يبدو سيئا. في كثير من الأحيان، بسبب عدم وجود الانقسامات المعتادة بين أنواع مختلفة من المعلومات، يتم خلطها ولا توجد رغبة في إلقاء نظرة على أي شيء آخر على مورد الويب هذا.

ولمنع حدوث مثل هذه الكارثة لي، قررت أن أكتب مقالًا حول موضوع: "كيفية عمل خلفية للصفحة في لغة HTML". بعد قراءة المنشور، ستتعرف على الأدوات التي يمكنك استخدامها لتعيين تصميم الخلفية، وكيفية جعل الخلفية ثابتة أو متغيرة، وغير ذلك الكثير مما سيساعد في جعل موقعك جذابًا. الآن لنبدأ!

الأدوات الأساسية لتحديد خلفية صفحات الويب

لتعيين صورة خلفية، قدم مطورو لغة الويب سمة الخلفية. وهي متوفرة في كل من و CSS.

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

لذلك، لتعيين صورة الخلفية من خلال وحدة HTML فقط اكتب الكود التالي: ...

وبدلاً من عبارة "عنوان الملف" أدخل المسار إلى الصورة.

ومع ذلك، يرجى ملاحظة! إذا كنت تريد رؤية لوحة قماشية أحادية اللون كخلفية، محددة بقيمة من لوحة الألوان، فسيتم ذلك باستخدام سمة bgcolor.

على سبيل المثال، ...

، لقد قمنا بتعيين خلفية سوداء لموقعنا.

يتم تحديد الألوان في CSS وHTML إما عن طريق كلمة إنجليزية (على سبيل المثال، أحمر) أو رمز خاص يتكون من علامة # وستة أحرف بعدها (على سبيل المثال، #FFDAB9).

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

الخلفية كخاصية في أوراق الأنماط المتتالية

يتم تعيينه إما في ملف منفصل بأنماط CSS، أو في عنصر

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

مع أطيب التحيات، رومان تشيشوف

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

علامات HTML الأساسية لإنشاء الخلفية

لذلك، دعونا ننتقل إلى السؤال، الخلفية في HTML على الشاشة بأكملها. لكي يبدو الموقع جميلًا، عليك أن تفهم تفصيلًا مهمًا إلى حد ما: يكفي فقط إنشاء خلفية متدرجة أو رسمها بلون خالص، ولكن إذا كنت بحاجة إلى إدراج صورة في الخلفية، فلن تمتد عبر كامل عرض الشاشة. في البداية، تحتاج إلى تحديد صورة أو إنشاء تصميم بنفسك باستخدام الامتداد الذي سيتم عرض صفحة موقعك فيه. فقط بعد أن تصبح صورة الخلفية جاهزة، قم بنقلها إلى مجلد يسمى "الصور". سنقوم فيه بتخزين جميع الصور والرسوم المتحركة وملفات الرسومات الأخرى التي نستخدمها. يجب أن يكون هذا المجلد في الدليل الجذر لجميع ملفات HTML الخاصة بك. الآن يمكنك الانتقال إلى الكود. هناك عدة خيارات لكتابة التعليمات البرمجية التي من شأنها تغيير الخلفية إلى صورة.

1. كتابة سمة العلامة.
2. من خلال أسلوب CSS في كود HTML.
3. كتابة نمط CSS في ملف منفصل.

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

1. الطريقة الأولى للكتابة هي من خلال سمة العلامة (النص) في ملف Index.htm. ويتم كتابته بالشكل التالي: (bodyback= "Folder_name/Image_name.extension")(/body). أي أنه إذا كانت لدينا صورة بالاسم "Picture" وامتداد JPG، وقمنا بتسمية المجلد "Images"، فسيبدو إدخال كود HTML بهذا الشكل: (body back="Images/Picture.jpg") … (/جسم) .
2. تؤثر طريقة التسجيل الثانية على نمط CSS، ولكنها مكتوبة في نفس الملف المسمى Index.htm. (نمط الجسم = "الخلفية: url ("../Images/Picture.jpg")").
3. وطريقة التسجيل الثالثة تتم في ملفين. في مستند يسمى Index.htm، يتم كتابة السطر التالي: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). وفي ملف النمط المسمى style.css نكتب بالفعل: body (الخلفية: url(Images/Picture.jpg")).

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

طرق تمديد صورة الخلفية إلى عرض النافذة

دعونا نتخيل شاشتنا في شكل نسبة مئوية. اتضح أن عرض الشاشة وطولها بالكامل سيكون 100% × 100%. نحن بحاجة إلى تمديد الصورة إلى هذا العرض. دعونا نضيف سطرًا إلى إدخال الصورة في ملف style.css، والذي سيؤدي إلى تمديد الصورة إلى كامل عرض وطول الشاشة. كيف تتم كتابة هذا بأسلوب CSS؟ انه سهل!

الخلفية: رابط (Images/Picture.jpg")

حجم الخلفية: 100%؛ /* هذا الإدخال مناسب لمعظم المتصفحات الحديثة */

لذلك اكتشفنا كيفية إنشاء صورة كخلفية بتنسيق HTML لملء الشاشة بأكملها. هناك أيضًا طريقة للكتابة في ملف Index.htm. على الرغم من أن هذه الطريقة قديمة، إلا أنه من الضروري للمبتدئين معرفتها وفهمها. في علامة (head)(style) div ( حجم الخلفية: الغلاف; ) (/style) (/head)، يعني هذا الإدخال أننا نخصص كتلة خاصة للخلفية، والتي سيتم وضعها عبر عرض الصفحة بالكامل نافذة او شباك. لقد بحثنا في طريقتين لجعل خلفية موقع الويب صورة HTML بحيث تمتد الصورة عبر عرض الشاشة بالكامل في أي متصفح حديث.

كيفية عمل خلفية ثابتة

إذا قررت استخدام صورة كخلفية لمورد الويب المستقبلي، فأنت بحاجة فقط إلى معرفة كيفية جعلها بلا حراك بحيث لا تمتد في الطول ولا تفسد المظهر الجمالي. من السهل كتابة هذه الإضافة الصغيرة بمساعدة. تحتاج إلى إضافة عبارة واحدة في ملف style.css بعد الخلفية: url(Images/Picture.jpg") ثابتة؛ أو بدلاً من ذلك أضف سطرًا منفصلاً بعد الفاصلة المنقوطة - الموضع: ثابت. وبالتالي، ستصبح صورة الخلفية الخاصة بك ثابتة. أثناء من خلال التمرير عبر المحتوى الموجود على الموقع، سترى أن سطور النص تتحرك، لكن الخلفية تظل في مكانها، لذلك تعلمت كيفية جعل الخلفية صورة بتنسيق html بعدة طرق.

العمل مع جدول في HTML

العديد من مطوري الويب عديمي الخبرة، عندما يواجهون الجداول والكتل، غالبًا لا يفهمون كيفية إنشاء صورة كخلفية للجدول في HTML. مثل جميع أنماط CSS، لغة برمجة الويب هذه بسيطة للغاية. والحل لمثل هذه المشكلة هو كتابة سطرين من التعليمات البرمجية. يجب أن تعلم بالفعل أن كتابة صفوف وأعمدة الجدول يشار إليها بالعلامات (tr) و (td) على التوالي. لجعل خلفية الجدول على شكل صورة، تحتاج إلى إضافة عبارة بسيطة إلى علامة (table) أو (tr) أو (td) تشير إلى رابط الصورة: الخلفية = عنوان URL للصورة. من أجل الوضوح، دعونا نعطي بضعة أمثلة.

الجداول التي تحتوي على صورة بدلاً من الخلفية: أمثلة HTML

لنرسم جدولًا بحجم 2×3 ونجعل خلفيته صورة محفوظة في مجلد "الصور": (خلفية الجدول = "Images/Picture.jpg") (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/ table). بهذه الطريقة سيتم رسم طاولتنا في خلفية الصورة.

الآن دعونا نرسم نفس اللوحة بأبعاد 2x3، ولكن أدخل صورة في الأعمدة المرقمة 1 و4 و5 و6. (table)(tr)(td الخلفية = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td الخلفية = "Images/Picture.jpg")4(/td) (td الخلفية = "Images/Picture.jpg") 5( /td) (td الخلفية = "Images/Picture.jpg")6(/td) (/tr) (/table). بعد المشاهدة، نرى أن الخلفية تظهر فقط في تلك الخلايا التي سجلنا فيها، وليس في الجدول بأكمله.

التوافق عبر المتصفحات للموقع

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