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

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

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

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

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

سمات العلامة

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

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

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

عادة، الصورلا يتم تخزينها في نفس المجلد مثلها ملف html. للقيام بذلك ، يتم إنشاء مجلد في نفس الدليل الصور(أو img هنا الطعم واللون). وقد تم بالفعل وضع جميع الصور الضرورية فيه. في حالة التخزين المنفصل ، ستحتاج إلى وصف عنوان مختلف لسمة 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 والخلفية قديمًا ، لذا سيتعين عليك استخدام DOCTYPE انتقالي لجعل كود HTML الخاص بك صالحًا. لتعيين لون الخلفية في HTML ، فإنه يستخدم أكواد خاصة يمكنك العثور عليها في محرر رسومات أو باستخدام خدمات خاصة عبر الإنترنت. يتم تكرار صورة الخلفية داخل المنطقة المخصصة لها وتقع أعلى لون الخلفية. لتحديد صورة خلفية ، من الأفضل استخدام عنوان URL الكامل الخاص بها. هذا كل شيء بالنسبة لي. شكرًا لكم على اهتمامكم. حظ سعيد!

الساعة 22:37

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

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

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

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

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

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

لذلك ، لضبط صورة الخلفية عبر وحدة html فقط اكتب هذا الرمز: ...

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

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

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

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

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

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

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

يتم تعيينه إما في ملف منفصل باستخدام أنماط css ، أو في عنصر

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

مع خالص التقدير ، رومان تشويشوف

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

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

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

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

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

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

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

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

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

الخلفية: url (Images / Picture.jpg ")

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

لذلك توصلنا إلى كيفية جعل الصورة الخلفية بتنسيق html بملء الشاشة. هناك طريقة أخرى للكتابة في ملف index.htm. على الرغم من أن هذه الطريقة قديمة ، إلا أنه من الضروري للمبتدئين معرفتها وفهمها. في علامة (head) (style) div (background-size: cover؛) (/ style) (/ head) ، يعني هذا الإدخال أننا نختار قالبًا خاصًا للخلفية ، والذي سيتم وضعه على كامل عرض نافذة او شباك. نظرنا في طريقتين لجعل خلفية الموقع صورة html بحيث تمتد الصورة إلى العرض الكامل للشاشة في أي من المتصفحات الحديثة.

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

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

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

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

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

لنرسم جدول 2x3 ونجعله خلفية الصورة المحفوظة في مجلد "Images": (table background = "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) (/ جدول) . لذلك سيتم رسم طاولتنا في خلفية الصورة.

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

عبر موقع المستعرض

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