كيفية ضبط صورة خلفية في لغة اتش تي ام ال

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
في هذا المقال:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
لغة إتش تي إم إل هي كل ما ستحتاج إليه إن كنت ترغب بإضافة صورة إلى صفحة ويب وستحتاج إلى الجمع بين لغة إتش تي إم إل وسي إس إس إن كنت ترغب بضبط الصورة كخلفية لصفحة الويب. إتش تي إم إل اختصار للمصطلح "لغة ترميز النص التشعبي" وهي عبارة عن رموز تُعلم المتصفح بالعناصر التي تظهر على صفحة ويب.^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]} سي إس إس من ناحية أخرى اختصار لمصطلح "صفحات الأنماط التسلسلية" وهي تُستخدم لتغيير مظهر وتخطيط صفحة الويب.^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]} ستحتاج إلى صورة خلفية ترغب باستخدامها في صفحة ويب من تصميمك.

جزء 1
إعداد ملفاتك

[list=steps_list_2]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
1

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

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

[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
2

ضع صورة الخلفية في مجلد إتش تي إم إل. ضع الصورة التي ترغب باستخدامها كصورة خلفية في مجلد إتش تي إم إل.

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

[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
3

أنشئ ملف إتش تي إم إل. افتح محرّر نصوص ثم أنشئ ملفًا جديدًا واحفظ الملف باسم index.html.

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

[/list]

جزء 2
كتابة ملف إتش تي إم إل

[list=steps_list_2]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
1

انسخ رموز إتش تي إم إل العادية والصقها. حدد وانسخ رموز إتش تي إم إل الموجودة أدناه ثم الصقها في ملف index.html الذي أنشأته.

اقتباس :: <!DOCTYPE html>
<html>
<head>
<title>(اكتب هنا عنوان الصفحة حسب اختيارك)</title>

<style>
body {
background-image: url(" ");
}

</style>

</head>

<body>

</body>
</html>

[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
2

أضِف رابط صورة خلفية. ابحث عن السطر background-image: url(" "); في ملف index.html. حرّك مؤشر الكتابة ليصبح بين الأقواس ثم اكتب اسم ملف صورة الخلفية واحرص على تضمين امتداد الملف.
يفترض أن يكون السطر بالشكل التالي بعد الانتهاء:
background-image: url("background.png");
عند كتابة اسم الملف بدون مسار أو رابط. سيبحث المتصفح في مجلد صفحة الويب عن الصورة المذكورة وستحتاج إلى كتابة مسار الملف بالكامل إن كان موجودًا في مجلد آخر.^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]}
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
3

احفظ ملف إتش تي إم إل.
[/list]

جزء 3
مراجعة ملف إتش تي إم إل

[list=steps_list_2]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
1

افتح الملف في متصفح الويب. انقر بزر الفأرة الأيمن على الملف ثم افتحه في متصفح الويب الذي تفضله.

تأكد من كتابة اسم الملف بصورة سليمة في نافذة محرّر النصوص الذي تفتح ملف index.html فيه إن لم تتمكن من رؤية الصورة بعد أن تفتح المتصفح.
إن رأيت رموز إتش تي إم إل عوضًا عن رؤية صورة الخلفية بعد فتح المتصفح، يعني ذلك أنك حفظت index.html كملف نصي وقد تحتاج إلى تحرير ملف إتش تي إم إل في محرّر نصوص مختلف.

[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
2

حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!" وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
[/list]

جزء 4
فهم رموز إتش تي إم إل

[list=steps_list_2]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
1

افهم وسوم إتش تي إم إل وسي إس إس. تتكون رموز إتش تي إم إل من وسوم افتتاحية وختامية بحيث يشكل الوسم <body> وسمًا افتتاحيًا ويشكل الوسم </body> وسمًا ختاميًا. يحتاج كل وسم افتتاحي إلى وسم ختامي لكي تُعرض الصفحة بشكل سليم.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
2

افهم الوسم DOCTYPE. يجب أن تبدأ كل صفحة إتش تي إم إل مكتوبة بشكل جيد بالوسم <!DOCTYPE html> وهو ما يُعلم المتصفح بأن الملف عبارة عن ملف إتش تي إم إل.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
3

حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!". وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
4

افهم وسوم إتش تي إم إل وسي إس إس. تتكون رموز إتش تي إم إل من وسوم افتتاحية وختامية بحيث يشكل الوسم <body> وسمًا افتتاحيًا ويشكل الوسم </body> وسمًا ختاميًا. يحتاج كل وسم افتتاحي إلى وسم ختامي حتى تُعرض الصفحة بشكل سليم.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
5

افهم وسم العنوان. الوسم <title> هو النص الذي يظهر في شريط العنوان بنافذة المتصفح وكذلك النص الذي يظهر في لسان تبويب المتصفح.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
6

افهم وسم التنسيق. يشير الوسم <style> إلى محتوى بلغة سي إس إس، حيث تكون كل الرموز الموجودة في الوسم <style> بلغة سي إس إس.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
7

افهم وسم جسم الصفحة. سيظهر أي نص بين وسوم <body> كنص مكتوب، إلا إن كانت رموزًا بلغة إتش تي إم إل أو سي إس إس.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
8

حرّر ملف إتش تي إم إل. حرّك مؤشر الكتابة بين الوسمين <body> </body> في نافذة محرّر النصوص ثم اكتب "مرحبًا!" وأعِد تحميل صفحة المتصفح لترى النص أعلى صورة الخلفية.
[/list]

جزء 5
فهم رموز سي إس إس

[list=steps_list_2]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
1

افهم رموز سي إس إس. تعمل رموز سي إس إس الموجودة في ملف index.html بين وسوم <style> على توجيه المتصفح إلى إضافة صورة خلفية باسم محدد للوسم <body> عند تقديم صفحة الويب.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
2

راجع رموز سي إس إس.

اقتباس :: body {
background-image: url("background.png");
}

[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
3

افهم أجزاء رموز سي إس إس. أنماط سي إس إس مكونة من جزئين؛ مُعامل الانتقاء والإعلان.^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]}
في المثال، body هو مُعامل الانتقاء و
background-image: url("background.png") هو الإعلان.
يمكن أن يكون مُعامل الانتقاء أي وسم إتش تي إم إل.
تُكتب الإعلانات بين أقواس معقوفة { } دائمًا.
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
4

افهم إعلانات سي إس إس. إعلان سي إس إس يتكون من جزئين هما الخاصية والقيمة بحيث تكون
background-image الموجودة بين القوسين المعقوفين هي الخاصية وتكون url("background.png") هي القيمة.^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]}
تصف الخاصية العنصر الذي يتم تنسيقه وتصف القيمة كيفية تنسيق العنصر.
يتم الفصل بين الخاصية والقيمة بفاصلة (:) دائمًا.
تنتهي إعلانات سي إس إس بفاصلة منقوطة (;) دائمًا.
[/list]
ـــــــــــــــــــــــــــــــ

المصادر

[list="references sources"]
[*] [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[/list]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كيفية ضبط صورة خلفية في لغة اتش تي ام ال

جزء 1 إعداد ملفاتك

جزء 2 كتابة ملف إتش تي إم إل

جزء 3 مراجعة ملف إتش تي إم إل

جزء 4 فهم رموز إتش تي إم إل

جزء 5 فهم رموز سي إس إس