في هذا الدرس ان شاء الله سنتعلم كيفية تنسيق الصفحة وسنتعلم كيف نغير لون خلفية الصفحة وكيفية وضع صورة كخلفية للصفحة وسنتعلم ايضا كيفية التحكم بهوامش الصفحة ... فلنبدء بسم الله .
اولاً : لون خلفية الصفحة
خلفية الصفحة هي كافة الوسوم والشفرات المكتوبة بين الوسمين <body> </body> والتي تظهر على المتصفح ولون الخلفية الافتراضي للصفحة هو اللون الابيض ولتغييره نستخدم الوسم bgcolor ضمن الوسم <body> بالشكل التالي :
<body bgcolor="#code ">
في الوسم السابق نقوم بوضع رمز اللون بعد علامة # بدلا من كلمة code مثلا اذا اردت تغيير لون الخلفية الى اللون الاحمر سيكون الوسم بالشكل التالي :
<body bgcolor="#ff0101">
حيث ان الرمز ff0101 هو رمز اللون الاحمر واليك القائمة التالية والتي توضح الرموز لاغلب الالوان :
اليك مثال تطبيقي :
سنقوم بعمل صفحة ذات خلفية زرقاء وسيكون الكود بالشكل التالي :
ونقوم بحفظ الصفحة بامتداد html او htm ونفتحها على المتصفح وستكون النتيجة بالشكل التالي :
ولضبط الصورة كخلفية للصفحة نستخدم الوسم background ضمن الوسم <body> بالطريقة التالية :
حيث نضع مسار الصورة اي مكانها على حاسوبك في المكان المخصص فمثلا اذا كانت الصورة في القرص c في مجلد photo واسم الصورة pic.jpg فان مسار الصورة سيكون بالشكل التالي :
وملاحظة : يجب عليك ادراج امتداد الصورة في نهاية اسمها واشهر الامتدادات هي (png , jpg ,gif ,bmp)
لنأخذ مثال تطبيقي
سوف نقوم بعمل صفحة ونضع الصورة التي في الاعلى كخلفية وسيكون الكود كالتالي :
نقوم بحفظ الصفحة وسيكون الناتج كالتالي
ملاحظة : اذا كانت الصورة في نفس المجلد الذي حفظت فيه الصفحة فيكفي ان تقوم بكتابة اسم الصورة مع امتدادها فقط في المكان الخاص مكان الصوره ولا داعي لكتابة المسار بالكامل .
ويمكنك استخدام صيغة البيكسل لتحديد عرض الهوامش بالشكل التالي :
او استخدام النسبة المئوية بالشكل التالي :
الوسم marginleft هو لتحديد الهوامش الجانبية اما لتحديد الجوانب العمودية التي برأس الصفحة واسفلها نستخدم الوسم margintop ضمن الوسم <body> بالشكل التالي :
الوسمين margintop و marginleft لا يعملان على متصفح فايرفوكس لذلك يمكن استخدام الوسم marginwidth بدلا من marginleft والوسم marginheight بدلا من margintop ويفضل ان تستخدم الصيغتين لكي تعمل الصفحة بشكل جيد .
انتهينا من الدرس هذا ونرجوا ان اكون قد وفقت في شرحه والى الدرس القادم ان شاء الله .
اي استفسارات انا مستعد اترك ردا في التعليقات ...
الانتقال الى فهرس الدروس ...
سنقوم بعمل صفحة ذات خلفية زرقاء وسيكون الكود بالشكل التالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body bgcolor="#6495ed">
موقع التقنية اليوم هو موقع اخباري وتعليمي في مجال التقنية
</body>
</html>
ونقوم بحفظ الصفحة بامتداد html او htm ونفتحها على المتصفح وستكون النتيجة بالشكل التالي :
ثانياً : وضع صورة كخلفية للصفحة
من السهل وضع صورة كخلفية للصفحة وسنستخدم في مثالنا الصورة التالية :
ولضبط الصورة كخلفية للصفحة نستخدم الوسم background ضمن الوسم <body> بالطريقة التالية :
<body background="مسار الصورة">
حيث نضع مسار الصورة اي مكانها على حاسوبك في المكان المخصص فمثلا اذا كانت الصورة في القرص c في مجلد photo واسم الصورة pic.jpg فان مسار الصورة سيكون بالشكل التالي :
c:\photo\pic.jpg
وملاحظة : يجب عليك ادراج امتداد الصورة في نهاية اسمها واشهر الامتدادات هي (png , jpg ,gif ,bmp)
لنأخذ مثال تطبيقي
سوف نقوم بعمل صفحة ونضع الصورة التي في الاعلى كخلفية وسيكون الكود كالتالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body background="3.jpg">
موقع التقنية اليوم هو موقع اخباري وتعليمي في مجال التقنية
</body>
</html>
نقوم بحفظ الصفحة وسيكون الناتج كالتالي
ملاحظة : اذا كانت الصورة في نفس المجلد الذي حفظت فيه الصفحة فيكفي ان تقوم بكتابة اسم الصورة مع امتدادها فقط في المكان الخاص مكان الصوره ولا داعي لكتابة المسار بالكامل .
ثالثاً: هوامش الصفحة
الهوامش هي الفراغات الجانبية والعلوية لصفحات الويب ,ولعمل مثل هذه الهوامش نستخدم الوسم marginleft ضمن الوسم <body> وذلك لعمل هوامش على اليمين او اليسار بالشكل التالي :
<body marginleft="حجم الهوامش بالبيكسل او بالنسبة المئوية">
ويمكنك استخدام صيغة البيكسل لتحديد عرض الهوامش بالشكل التالي :
<body marginleft="100">
او استخدام النسبة المئوية بالشكل التالي :
<body marginleft="10%">
الوسم marginleft هو لتحديد الهوامش الجانبية اما لتحديد الجوانب العمودية التي برأس الصفحة واسفلها نستخدم الوسم margintop ضمن الوسم <body> بالشكل التالي :
<body margintop ="حجم الهوامش بالبيكسل او بالنسبة المئوية">
الوسمين margintop و marginleft لا يعملان على متصفح فايرفوكس لذلك يمكن استخدام الوسم marginwidth بدلا من marginleft والوسم marginheight بدلا من margintop ويفضل ان تستخدم الصيغتين لكي تعمل الصفحة بشكل جيد .
انتهينا من الدرس هذا ونرجوا ان اكون قد وفقت في شرحه والى الدرس القادم ان شاء الله .
اي استفسارات انا مستعد اترك ردا في التعليقات ...
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع