الوسم body هو أحد الوسوم الاساسية في صفحة الويب وهو الوسم الذي يقع جميع محتوى صفحة الويب بداخله مثل الصور والجداول والروابط وغيرها .
للوسم body خصائص عديدة من أهمها :
مثال :
أو عبر أحد المواقع التي تقدم خدمة الـ color picker مثل موقع colorpicker.com
مثال :
مثال 1 : اتجاه النص من اليمين إلى اليسار :
هذه هي تقريباً الخواص الأكثر استعمالاً مع الوسم body وتوجد هناك خواص أخرى منها ماهو متعلق بالروابط والوصلات التشعبية وسنتحدث عنها في وقت لاحق , ومنها ماهو متعلق بالحواشي (margins) وسنفهمها في دروس لغة CSS .
انظر للمثالين التاليين لتفهم أكثر الخواص التي ذكرناها :
المثال الأول : خلفية صفحة الويب :
قبل البدء قم بنسخ أي صورة ولصقها في نفس المجلد الذي ستنشئ فيه صفحة الويب , في هذا المثال اسم الصورة التي سأستخدمها هو myBackground.jpg وانت قم باستبدال الاسم باسم صورتك:
المثال الثاني : لون خلفية صفحة الويب :
للوسم body خصائص عديدة من أهمها :
اولاً : الخاصية background
هذه الخاصية تمكنك من استخدام صورة معينة لتجعلها خلفية لصفحة الويب وطريقة استعمالها كالتالي:
<body background="صورة الخلفية"> ........... </body>
مثال :
<body background="mypicture.jpg"> ........... </body>
حيث تكتب بين علامتي التنصيص " " مسار الصورة بالكامل اذا لم تكن موجودة في المجلد الذي فيه صفحة الويب .ثانياً : الخاصية bgcolor
وهي اختصار لـ "background color" وهي المسؤولة عن تغيير لون خلفية صفحة الويب , فلو مثلاً حدث خطأ اثناء تحميل خلفية الصفحة فسيبقى المستخدم قادراً على رؤية لون الخلفية الذي تحدده أنت بهذه الخاصية .مثال :
<body bgcolor="Blue">
........... </body>
بداخل علامتي التنصيص " " نكتب اسم اللون أو قيمته في النظام الست عشري (النظام الست عشري هو أحد أنظمة العد في علوم الحاسوب -- باللغة الانجليزية hexadecimal) مثلاً لو رغبنا في تغيير لون الخلفية إلى اللون الأبيض فسنكتب "White" أو "FFFFFF#" , ويمكنك بسهولة الحصول على قيمة اللون في النظام الست عشري عن طريق برنامج الفوتوشوب بواسطة الـ color picker كالصورة التالية :
أو عبر أحد المواقع التي تقدم خدمة الـ color picker مثل موقع colorpicker.com
ثالثاً : الخاصية text
وهذه الخاصية هي المسؤولة عن تغيير لون خط النص في صفحة الويب , وهذا يعني أن جميع عناصر النصوص مثل h1 و p و h5 وغيرها سوف يصبح لونها هو اللون الذي تحدده في الخاصية text .مثال :
<body text="Blue"> ........... </body>
رابعاً : الخاصية dir
وهي اختصار لكلمة "direction" وتعني "اتجاه" وهي تستخدم لتحديد اتجاه الصفحة واتجاه النصوص فيها يعني أن تجعل الكتابة من اليمين إلى اليسار مثل اللغة العربية , أو تجعلها من اليسار إلى اليمين مثل اللغة الانجليزية , وهذه الخاصية تأخذ قيمتين إما "rtl" وتعني "من اليمين إلى اليسار" , أو القيمة "ltr" وتعني "من اليسار إلى اليمين" .مثال 1 : اتجاه النص من اليمين إلى اليسار :
<body dir="rtl"> ........... </body>
مثال 2 : اتجاه النص من اليسار إلى اليمين :
<body dir="ltr"> ........... </body>
هذه هي تقريباً الخواص الأكثر استعمالاً مع الوسم body وتوجد هناك خواص أخرى منها ماهو متعلق بالروابط والوصلات التشعبية وسنتحدث عنها في وقت لاحق , ومنها ماهو متعلق بالحواشي (margins) وسنفهمها في دروس لغة CSS .
انظر للمثالين التاليين لتفهم أكثر الخواص التي ذكرناها :
المثال الأول : خلفية صفحة الويب :
قبل البدء قم بنسخ أي صورة ولصقها في نفس المجلد الذي ستنشئ فيه صفحة الويب , في هذا المثال اسم الصورة التي سأستخدمها هو myBackground.jpg وانت قم باستبدال الاسم باسم صورتك:
<html>
<body background="myBackground.jpg"
text="White">
<h1>السلام عليكم</h1>
<h4>مرحباً بكم في موقعي</h4>
</body>
</html>
سترى أن الصورة أصبحت مشابهة للآتي :
المثال الثاني : لون خلفية صفحة الويب :
<html>
<body bgcolor="#d7103f"
text="White">
<h1>السلام عليكم</h1>
<h4>مرحباً بكم في موقعي</h4>
</body>
</html>
كما ترى استخدمنا قيمة اللون في النظام الست عشري وأعطانا اللون الذي تراه في الصورة :
التعليقات في لغة HTML :
التعليقات في البرمجة ماهي إلا ملاحظات يقوم المبرمج بكتابتها ليشرح جزءاً غير مفهوم من الكود البرمجي أو لتكون مرجعاً له عند عودته للكود مرة أخرى , وطريقة كتابة التعليقات في لغة HTML هي كالتالي :
<!-- هنا يكتب التعليق -->
التعليقات يتم اهمالها من قبل متصفح الانترنت ولا يقوم بتفسيرها , فمثلاً في الكود السابق لو وضعنا محتويات الوسم h4 بين علامتي التعليق <-- --!> فلن يقوم المتصفح بتفسيرها ولن تظهر في الصفحة :
<html>
<body bgcolor="#d7103f"
text="White">
<h1>السلام عليكم</h1>
<!--
<h4>مرحباً بكم في موقعي</h4>
-->
</body>
</html>
الآن احفظ الصفحة وستلاحظ أن جملة "مرحباً بكم في موقعي" قد اختفت .