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

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

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

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

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

سمات علامة img

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

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

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

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

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

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

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

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

ابحث عن رأس "html".يجب أن يكون في أعلى المستند.

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

الخلفية: التدرج الخطي (الاتجاه/الزاوية، اللون 1، اللون 2، اللون 3 وما إلى ذلك)؛

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

html (الارتفاع الأدنى: 100%؛) الجسم (الخلفية: -webkit- خطي متدرج (#93B874، #C9DCB9)؛ الخلفية: -o- خطي متدرج (#93B874، #C9DCB9)؛ الخلفية: -moz- خطي -التدرج (#93B874، #C9DCB9)؛ الخلفية: التدرج الخطي (#93B874، #C9DCB9)؛

• تنفذ المتصفحات المختلفة وظيفة التدرج بشكل مختلف، لذلك تحتاج إلى إضافة إصدارات متعددة من التعليمات البرمجية.

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

   html (الارتفاع الأدنى: 100%؛) النص (الخلفية: -webkit- التدرج الخطي (يسار، #93B874، #C9DCB9)؛ الخلفية: -o- تدرج خطي (يمين، #93B874، #C9DCB9)؛ الخلفية: -moz- التدرج الخطي (يمين، #93B874، #C9DCB9) الخلفية: تدرج خطي (يمين، #93B874، #C9DCB9)؛

   • إذا أردت، أعد ترتيب الكلمات "يسار" و"يمين" لتجربة اتجاهات تدرج مختلفة.

2. استخدم خصائص أخرى لتخصيص التدرج.يمكنك أن تفعل معها أكثر مما تعتقد.

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

     الخلفية : تدرج خطي (#93B874 10%, #C9DCB9 70%, #000000 90%);

   • أضف الشفافية إلى اللون. في هذه الحالة، سوف تتلاشى تدريجيا. للحصول على تأثير التلاشي، استخدمي نفس اللون. لتعيين اللون، تحتاج إلى وظيفة rgba(). ستحدد القيمة الأخيرة الشفافية: 0 لون معتم و1 لون شفاف.

     الخلفية: التدرج الخطي (إلى اليمين، rgba ( 147، 184، 116، 0 )، rgba ( 147، 184، 116، 1 ))؛

قم بمراجعة الكود.سيبدو رمز إنشاء تدرج لوني كخلفية لصفحة الويب كما يلي:

< html > < head > < style >html (الارتفاع الأدنى: 100%؛) النص (الخلفية: -webkit- التدرج الخطي (يسار، #93B874، #C9DCB9)؛ الخلفية: -o- تدرج خطي (يمين، #93B874، #C9DCB9)؛ الخلفية: -moz- التدرج الخطي (يمين، #93B874، #C9DCB9) الخلفية: تدرج خطي (يمين، #93B874، #C9DCB9)؛ < body >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هل من الممكن استخدام HTML لتعيين الخلفية؟

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

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

كيفية تعيين الخلفية باستخدام CSS؟

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

بعد اتخاذ قرار بشأن المحدد، تحتاج إلى كتابة اسم العقار نفسه. لتعيين لون الخلفية (أي لون خالص، وليس تدرجًا أو صورة)، استخدم خاصية لون الخلفية. بعد ذلك تحتاج إلى وضع نقطتين وكتابة اللون نفسه. يمكن القيام بذلك بطرق مختلفة. على سبيل المثال، استخدام الكلمات الرئيسية، والرمز السداسي، وتنسيقات rgb، وrgba، وhsl. أي طريقة سوف تفعل.

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

الجسم (لون الخلفية: #D4E6B3;)

يجب إدراج هذا الرمز في قسم الرأس. من المهم أن تكون الملفات في نفس المجلد.

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

بالنسبة للصورة سأستخدم أيقونة لغة html صغيرة:

لنقم بإنشاء كتلة فارغة بمعرف:

< div id = "bg" > < / div >

لنعطيها أبعادًا وخلفية واضحة:

#bg( العرض: 400 بكسل; الارتفاع: 250 بكسل; صورة الخلفية: url(html.png); )

#بج( العرض: 400 بكسل؛ الارتفاع: 250 بكسل؛ الخلفية - الصورة : url (html .png ) ;

من هذا الرمز يمكنك أن ترى أنني استخدمت خاصية جديدة - صورة الخلفية. إنه مخصص خصيصًا لإدراج صورة كخلفية لعنصر html. دعونا نرى ما حدث:

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

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

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

كرر – القيمة الافتراضية، يتم تكرار الصورة على كلا الجانبين؛

كرر-x - يتكرر فقط على المحور x؛

كرر ص - يتكرر فقط على طول المحور ص؛

عدم التكرار – عدم التكرار على الإطلاق؛

يمكنك كتابة كل قيمة ومعرفة ما سيحدث. سأكتبها هكذا:

تكرار الخلفية: تكرار x؛

الخلفية - كرر: كرر - x؛

كرر الآن أفقيًا فقط. إذا قمت بتعيين عدم التكرار، فستكون هناك صورة واحدة فقط.

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

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

موقف الخلفية

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

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

موضع الخلفية: أعلى اليمين؛

الخلفية - الموضع: أعلى اليمين؛

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

موضع الخلفية: 50% 50%؛

موضع الخلفية: 50% 50%؛

تذكر شيئًا واحدًا مهمًا حول تحديد الموضع - المعلمة الأولى هي دائمًا الموضع الأفقي، والثانية هي الموضع الرأسي. لذا، إذا رأيت قيمة 80% 20%، فيمكنك أن تستنتج على الفور أن صورة الخلفية سيتم إزاحتها كثيرًا إلى اليمين، لكنها لن تنخفض كثيرًا.

وأخيرًا، يمكنك تحديد الموضع بالبكسل. كل شيء هو نفسه، فقط بدلا من % سيكون هناك بكسل. في بعض الحالات، قد يكون هذا الموضع ضروريًا.

تدوين مختصر

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

الخلفية: #333 عنوان url(bg.jpg) بدون تكرار 50% 50%؛

خلفية: #333 عنوان url(bg.jpg) بدون تكرار 50% 50%;

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

التحكم في حجم الصورة الخلفية

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

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

لذا فإن صورتي الآن تشغل كل المساحة في الكتلة، لكنني سأعطيها حجم الخلفية:

حجم الخلفية: 80% 50%؛

حجم الخلفية: 80% 50%؛

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

كما يمكنك تخمين، يمكن أيضًا تحديد حجم الخلفية بالبكسل. هناك كلمتان رئيسيتان أخريان يمكن استخدامهما أيضًا:

الغلاف - سيتم تغيير حجم الصورة بحيث تملأ الكتلة بالكامل على جانب واحد على الأقل.

يحتوي على - يقيسها بحيث تتناسب الصورة تمامًا مع الكتلة بأقصى حجم لها.

وميزة هذه القيم هي أنها لا تغير نسب الصورة، وتتركها كما هي.

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

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

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

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

خلفية شفافة باستخدام CSS

ميزة أخرى يمكن تنفيذها باستخدام CSS هي الخلفية الشفافة. أي أنه من خلال هذه الخلفية سيكون من الممكن رؤية ما وراءها.

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

كما قلت سابقًا، هناك العديد من التنسيقات لتعيين الألوان في CSS. واحد منهم هو RGB، وهو تنسيق معروف إلى حد ما لأولئك الذين يعملون في محرري الرسوم. وهو مكتوب بهذه الطريقة: rgb(17, 255, 34);

القيمة الأولى بين قوسين هي تشبع اللون الأحمر، ثم الأخضر، ثم الأزرق. يمكن أن تكون القيمة رقمية من 0 إلى 255. وبناء على ذلك، لا يختلف تنسيق rgba، تتم إضافة معلمة واحدة فقط - قناة ألفا. يمكن أن تكون القيمة من 0 إلى 1، حيث يمثل 0 الشفافية الكاملة.

2 أصوات

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

سأتحدث أيضًا عن بعض الفروق الدقيقة التي ستجعل الخلفية سلسة وجميلة قدر الإمكان. حسنًا، هل نبدأ؟

اختيار صورة

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

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

على الرغم من أن لديك الفرصة لتجاوز النظام. للقيام بذلك، استخدم Photoshop والصور حتى عرض الشاشة (1280 × 720). على الرغم من أنه في هذه الحالة، عند التمرير لأسفل، ستحل الصورة محل صورة أخرى.

الخيار الأفضل إذا كنت لا ترغب في استخدام CSS هو استخدام مواد سلسة. ليس لديهم أي مفاصل مرئية. فهي تشبه ورق الحائط أو البلاط الحديث في التصميم. واحد يحل محل الآخر ولا توجد مفاصل مرئية.

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

HTML

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

لذلك، يمكنك العمل في المفكرة، وأنا أفضل برنامج NotePad++. إنه أكثر ملاءمة للعمل فيه: تم إكمال التعليمات البرمجية لك، ويتم تمييز العلامات. البرنامج مجاني ويبلغ حجمه حوالي 3 ميجا بايت. أوصي به بشدة، خاصة إذا كنت مبتدئًا.

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

يمكنك فقط فتح المفكرة ونسخ هذا الرمز. بين علامتي الاقتباس، ضع رابطًا للصورة التي تعجبك.

<أتش تي أم أل > <الرأس > <العنوان >صورة الخلفية</العنوان> </الرأس> <خلفية الجسم = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </ الجسم> </أتش تي أم أل>

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

انسخ عنوان URL هذا بالضبط.

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

تم ملء الصفحة بلون مختلف.

إذا كنت تريد معرفة المزيد عن لغة HTML، أقترح عليك تنزيلها دورة مجانية من إيفجيني بوبوف . ستتعلم منه المزيد من العلامات والقدرات اللغوية وتجربة بعض التقنيات الجديدة ومعرفة المزيد.

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

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

لا تتفق معي؟ يمكنني تقديم بديل. كتاب من تأليف إليزابيث وإريكا فريمان " تعلم HTML وXHTML وCSS " ليس من أكثر الكتب مبيعا مملة للغاية وتم إصداره منذ وقت ليس ببعيد، في عام 2016. المعلومات لم تصبح قديمة بعد.

CSS

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

يساعد CSS في حل هذه المشكلة. تحتاج إلى إنشاء ملف بامتداد css وإدخال الكود التالي:

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

بالنسبة لأولئك الذين يريدون معرفة أفضل

مع CSS يمكنك التمدد صورة الخلفية، تأكد من أنها لا تكرر نفسها، أضف صور GIF المتحركة وغير ذلك الكثير.

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

هل تريد أن تتعلم كيفية كتابة المواقع بشكل صحيح؟ أنصحك بتعلم لغات البرمجة. يمكنني أن أوصي بدورة أندريه بيرناتسكي “ HTML5 وCSS3 من الصفر إلى الاحتراف " أنا حقا أحب هذا المؤلف. لم أتبع هذه الدورة بالذات منذ عدة سنوات، وكان هناك شيء مماثل، ولكن أقل حداثة.

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

بالمناسبة، إلى جانب هذه الدورة، تحصل على 7 مكافآت: أساسيات html وcss بواسطة Andrei Bernatsky، والتخطيط للمبتدئين، وإنشاء صفحة مقصودة في المساء، وغير ذلك الكثير. قبل أن تلتزم بالتدريب الجاد، جرب الدورة المجانية " تدرب على HTML5 وCSS3 ».

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