تنزيل المقال
تنزيل المقال
لغة إتش تي إم إل هي كل ما ستحتاج إليه إن كنت ترغب بإضافة صورة إلى صفحة ويب وستحتاج إلى الجمع بين لغة إتش تي إم إل وسي إس إس إن كنت ترغب بضبط الصورة كخلفية لصفحة الويب. إتش تي إم إل اختصار للمصطلح "لغة ترميز النص التشعبي" وهي عبارة عن رموز تُعلم المتصفح بالعناصر التي تظهر على صفحة ويب. [١] X مصدر بحثي سي إس إس من ناحية أخرى اختصار لمصطلح "صفحات الأنماط التسلسلية" وهي تُستخدم لتغيير مظهر وتخطيط صفحة الويب. [٢] X مصدر بحثي ستحتاج إلى صورة خلفية ترغب باستخدامها في صفحة ويب من تصميمك.
الخطوات
-
أنشئ مجلدًا لتضع ملف إتش تي إم إل وصورة الخلفية فيه. أنشئ مجلدًا على جهاز الكمبيوتر وأعِد تسميته حتى تتمكن من إيجاده بسهولة لاحقًا.
- يمكنك تسمية المجلد بأي اسم ترغب به، إلا أن الأفضل عند التعامل مع لغة إتش تي إم إل هو الاعتياد على تسمية الملفات والمجلدات بكلمة قصيرة واحدة.
-
ضع صورة الخلفية في مجلد إتش تي إم إل. ضع الصورة التي ترغب باستخدامها كصورة خلفية في مجلد إتش تي إم إل.
- لا مانع من استخدام صورة عالية الدقة في الخلفية، إلا أنك تخاطر بإمكانية عمليها على الأجهزة القديمة أو التي تمتلك اتصالًا بطيئًا بالإنترنت. في المقابل، تكون الصور البسيطة، كتلك المحتوية على أنماط خفيفة ومتكررة، خيارًا جيدًا أثناء اختيار صورة خلفية، حتى تتمكن من قراءة النصوص المكتوبة عليها في أقسام الصفحة.
- يمكنك تنزيل صورة خلفية مجانية إن لم تكن تمتلك صورة يمكن استخدامها. ضع الصورة التي قمت بتنزيلها في مجلد إتش تي إم إل الذي أنشأته.
-
أنشئ ملف إتش تي إم إل. افتح محرّر نصوص ثم أنشئ ملفًا جديدًا واحفظ الملف باسم index.html.
- يمكنك استخدام محرّر النصوص الذي تفضله، بما في ذلك محرّرات النصوص المقدمة من قبل نظام التشغيل ويندوز كالمفكرة أو تلك المقدمة من قبل نظام ماكنتوش مثل تكست إديت.
- إن كنت ترغب باستخدام محرّر نصوص مخصص للاستخدام مع لغة إتش تي إم إل، انقر هنا لتنزيل محرّر النصوص "أتوم"، وهو محرّر نصوص يعمل على أنظمة التشغيل ويندوز وماكنتوش ولينكس.
- إن كنت تستخدم برنامج "تكست إديت"، افتح قائمة التنسيق ثم انقر على خيار "إنشاء نص عادي" قبل البدء بكتابة ملف إتش تي إم إل. يضمن هذا الإعداد تحميل ملف إتش تي إم إل بشكل سليم في متصفّح الإنترنت.
- معالجات النصوص، مثل: مايكروسوفت وورد، ليست مناسبة لكتابة لغة إتش تي إم إل، لأنها تضيف رموزًا غير مرئية وتنسيقًا يمكن أن يعطل عمل ملف إتش تي إم إل وبالتالي لا يُعرض بشكل سليم على متصفّح الإنترنت.
-
انسخ رموز إتش تي إم إل العادية والصقها. حدد وانسخ رموز إتش تي إم إل الموجودة أدناه ثم الصقها في ملف index.html الذي أنشأته.
<!DOCTYPE html> < html > < head > < title > (اكتب هنا عنوان الصفحة حسب اختيارك) </ title > < style > body { background-image : url ( " " ); } </ style > </ head > < body > </ body > </ html >
-
أضِف رابط صورة خلفية. ابحث عن السطر background-image: url(" "); في ملف index.html. حرّك مؤشر الكتابة ليصبح بين الأقواس ثم اكتب اسم ملف صورة الخلفية واحرص على تضمين امتداد الملف.
- يفترض أن يكون السطر بالشكل التالي بعد الانتهاء:
background-image: url("background.png");
- عند كتابة اسم الملف بدون مسار أو رابط. سيبحث المتصفح في مجلد صفحة الويب عن الصورة المذكورة وستحتاج إلى كتابة مسار الملف بالكامل إن كان موجودًا في مجلد آخر. [٣]
X
مصدر بحثي
-
افتح الملف في متصفح الويب. انقر بزر الفأرة الأيمن على الملف ثم افتحه في متصفح الويب الذي تفضله.
- تأكد من كتابة اسم الملف بصورة سليمة في نافذة محرّر النصوص الذي تفتح ملف index.html فيه إن لم تتمكن من رؤية الصورة بعد أن تفتح المتصفح.
- إن رأيت رموز إتش تي إم إل عوضًا عن رؤية صورة الخلفية بعد فتح المتصفح، يعني ذلك أنك حفظت index.html كملف نصي وقد تحتاج إلى تحرير ملف إتش تي إم إل في محرّر نصوص مختلف.
-
حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!" وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
-
افهم وسوم إتش تي إم إل وسي إس إس. تتكون رموز إتش تي إم إل من وسوم افتتاحية وختامية بحيث يشكل الوسم <body> وسمًا افتتاحيًا ويشكل الوسم </body> وسمًا ختاميًا. يحتاج كل وسم افتتاحي إلى وسم ختامي لكي تُعرض الصفحة بشكل سليم.
-
افهم الوسم DOCTYPE. يجب أن تبدأ كل صفحة إتش تي إم إل مكتوبة بشكل جيد بالوسم <!DOCTYPE html> وهو ما يُعلم المتصفح بأن الملف عبارة عن ملف إتش تي إم إل.
-
حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!". وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
-
افهم وسوم إتش تي إم إل وسي إس إس. تتكون رموز إتش تي إم إل من وسوم افتتاحية وختامية بحيث يشكل الوسم <body> وسمًا افتتاحيًا ويشكل الوسم </body> وسمًا ختاميًا. يحتاج كل وسم افتتاحي إلى وسم ختامي حتى تُعرض الصفحة بشكل سليم.
-
افهم وسم العنوان. الوسم <title> هو النص الذي يظهر في شريط العنوان بنافذة المتصفح وكذلك النص الذي يظهر في لسان تبويب المتصفح.
-
افهم وسم التنسيق. يشير الوسم <style> إلى محتوى بلغة سي إس إس، حيث تكون كل الرموز الموجودة في الوسم <style> بلغة سي إس إس.
-
افهم وسم جسم الصفحة. سيظهر أي نص بين وسوم <body> كنص مكتوب، إلا إن كانت رموزًا بلغة إتش تي إم إل أو سي إس إس.
-
حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!" وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
-
افهم رموز سي إس إس. تعمل رموز سي إس إس الموجودة في ملف index.html بين وسوم <style> على توجيه المتصفح إلى إضافة صورة خلفية باسم محدد للوسم <body> عند تقديم صفحة الويب.
-
راجع رموز سي إس إس.
-
افهم أجزاء رموز سي إس إس. أنماط سي إس إس مكونة من جزئين؛ مُعامل الانتقاء والإعلان. [٤] X مصدر بحثي
- في المثال، body
هو مُعامل الانتقاء و
background-image: url("background.png") هو الإعلان.- يمكن أن يكون مُعامل الانتقاء أي وسم إتش تي إم إل.
- تُكتب الإعلانات بين أقواس معقوفة { } دائمًا.
-
افهم إعلانات سي إس إس. إعلان سي إس إس يتكون من جزئين هما الخاصية والقيمة بحيث تكون
background-image الموجودة بين القوسين المعقوفين هي الخاصية وتكون url("background.png") هي القيمة. [٥] X مصدر بحثي- تصف الخاصية العنصر الذي يتم تنسيقه وتصف القيمة كيفية تنسيق العنصر.
- يتم الفصل بين الخاصية والقيمة بفاصلة (:) دائمًا.
- تنتهي إعلانات سي إس إس بفاصلة منقوطة (;) دائمًا.
