في داخل جزء البودي نحدد لبرنامج المتصفح كيف يقسم الصفحة .. وما هي العناصر التي يضعها في كل قسم ..
ويقوم المتصفح بوضع تلك العناصر من الشمال إلى اليمين .. ومن أعلى إلى أسفل ..
ويمكننا أن نستعمل في تقسيم الصفحة الوحدات التالية :
table .. division .. span .. paragraph .. layer

أولاً : الجداول Tables :
وهي تشبه جداول برنامج الإكسيل .. من أعمدة وصفوف
والصف يوضع في تاج إسمه tr وهو إختصار ل table row
وكل صف يتكون من خلايا cell .. وتوضع في تاج إسمه td وهو إختصار ل table data ..
ويمكنك إضافة تعليق caption تحت الجدول ..

ثانيا ً : divisions :
وهي توضع في تاج إسمه div .. ونلجأ إليها من أجل إعطاء مواصفات معينة لقسم من الصفحة ..

ثالثاً : span الشبر :
وهو جزء من السياق أصغر من ال division .. ونلجأ إليه أيضاً لإعطاء ستايل معين لعدة كلمات أو جمل ..
ولغوياً حضراتكم تعرفون وسيلة القياس بالشبر .. وهو المسافة بين أنامل الإبهام والإصبع الصغير ..

رابعاً : paragraph الفقرة :
وهي مثل الفقرة في برنامج وورد .. حيث يبدأ الكلام أو النص من أول السطر التالي ..
ويمكنك أيضا أن تعطيها إذا أردت text-indent إزاحة للداخل .. مثلما يفعل برنامج وورد ..

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

العناوين Headings :
تعتبر العناوين جزءأً مهماً في الصفحة .. .. ومن كلمة Heading أخذنا حرف الإتش وجعلناه التاج الذي يستعمل من أجل صنع عنوان..
وتوجد 6 مقاسات من العناوين .. أي عندنا من h1 إلى h6 .. .. وهي على هذا الشكل

..

..

..

..

..

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

هو أكبرها .. أما

يماثل في الحجم الكلام العادي اللي في الصفحة .. بينما

و

أصغر في الحجم من حجم الكلام العادي ..

أهمية

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

الخط الفاصل hr - horizontal ruler في الصفحة :
كثيراً ما نحب أن نضع خطاً فاصلاً ليفصل بين ما فوقه من محتويات وما تحته .. وهذا هو التاج

---

الذي يستعمل في هذه الحالة ..

إبتداء الكلام br - break من سطر جديد :
إذا أردنا أن نضع نقطة في نهاية الجملة ثم نبدأ من سطر جديد فإننا نستعمل التاج
لكي يفهم المتصفح ذلك .. وإلا فإنه سوف يرص الكلام في فقرة واحدة طويلة

إضافة مهمة :
المثاليين السابقين وهما

---

و
ليست من أنواع التاج الحاوية container tag والتي سبق أن ذكرنا أنها تكتب مرة عند بداية العنصر ومرة ثانية مع السلاش عند نهاية العنصر ..
والمشكلة أن لغة XHTML تريد أن ترى السلاش .. فإذا كتبتهم بهذه الطريقة في صفحة مكتوبة بلغة XHTML فإن المتصفح سوف يتجاهلهم ولا يعترف بوجودهم ..
إذاً ما الحل ؟.. الحل هو أن نضع السلاش داخل التاج وبجوار رأس السهم المتجه يميناً .. أي هكذا و
.. وبذلك نتأكد أن المتصفح سوف يقرأها ..
ملحوظة : نفس هذا الكلام ينطبق أيضاً على التاج الخاص بالصور img لأنه أيضاً ليس من أنواع التاج الحاوية ..

القوائم المرقومة .. والقوائم المنقوطة
ــــــــ


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

القوائم المرقومة هي التي توجد أرقام decimal numbers مسلسلة أمام أفراد القائمة ..
ويمكن أن نضع أشياء أخرى بدلا ً من الأرقام .. فيمكننا أن نضع حروف إنجليزية سواء كابيتال أو صغيرة upper-case letters & lower-case letters ..
ويمكننا أن نضع أرقام رومانية سواء صغيرة أو كبيرة lower-case Roman numerals & upper-case Roman numerals ..
الـ default هو الأرقام .. أما الإختيارات الأخرى فنصنعها عن طريق الستايل ..
يتضح لنا أن الإسم الأدق والأصح لهذا النوع من القوائم هو :
القائمة ذات الترتيب التسلسلي Ordered Lists ولذلك نصنع تاجها من الحرفين ol ..
وكل فرد من أفراد القائمة إسمه List Item ولذلك يكون تاجه هو li ..

القوائم المنقوطة هي التي توجد نقطة أمام كل فرد من أفرادها ..
ولكن أيضاً عندنا إختيارات أخرى نصنعها عن طريق الستايل .. .. فيمكننا أن نضع دوائر صغيرة circle .. ويمكننا أن نضع مربعات صغيرة square .. بل يمكننا أن نضع صور صغيرة من تصميمنا .. بل يمكننا أيضاً ألا نضع شيئاً أمام أفراد القائمة ..
ويتضح لنا أن الإسم الأصح لهذا النوع من القوائم هو :
القائمة التي بدون ترتيب Unordered Lists ولذلك نصنع تاجها من الحرفين ul ..
وكل فرد من أفراد القائمة إسمه List Item ولذلك يكون تاجه هو li ..

وهناك نوع ثالث من القوائم وهو الذي يحتوي على تعريفات .. أي أنك تذكر أمام كل فرد من أفراد القائمة التعريف الخاص به ..
وحيث أن إسم هذه القائمة هو Definition Lists فيكون تاجها هو dl ..
وكل فرد إسمه definition term فيكون تاجه dt ..
وتعريف كل فرد إسمه definition description فيكون تاجه هو dd ..

القوائم المركبة Nested Lists :
مثلما قلنا أنه بداخل أقسام المواقع هناك أقسام فرعية .. وبداخل أرشيف المدونة هناك داخل كل شهر صفحات كثيرة .. .. وهذه أمثلة لإحتياجنا للقوائم اللي داخل قوائم ..
لذلك يمكنك أن تضع تاج ol أو ul داخل القائمة الرئيسية لتصنع قائمة فرعية .. ولكن لا تنسى أن تضع التاج ذو السلاش عند نهاية القائمة الفرعية .. وكذلك تضعه مرة ثانية عند نهاية القائمة الرئيسية ..
مع العلم أن جميع هذه التاجات الستة أو السبعة التي ذكرناها هي من التاجات الحاوية أي يجب أن نضع التاج مع السلاش عند نهاية الكلام عن كل عنصر ..

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

الصور وتعامل المتصفحات معها
ــــ


المتصفحات لا تتعامل مع كل أنواع الصور .. .. هي تتعامل فقط مع الصور ذات الإمتداد jpg أو png أو gif
الصور ذات الإمتداد jpg أو jpeg تتميز بكثرة ووضوح ألوانها بالمقارنة بالآخرين .. .. أما الصور png فعادة تكون ألوانها قليلة وفي الغالب تستعمل للصور الصغيرة .. .. أما إمتداد gif فيعطي الصورة إمكانية أن يكون بها لون شفاف فتبدو في الصفحة كأنها طافية فوق الكلام .. وكذلك تصنع منها الصور المتحركة animation .. ..
وجدير بالذكر أن المتصفحات لا تضع بالصفحة صور أيقونات من نوع ico .. ولكن تلك الصور التي تسمى أيقونات داخل الصفحة هي في واقع الأمر من نوع png ..
ولكي يكون الحديث مكتملاً نقول إن المتصفحات أحياناً بتربط الصفحة بأيقونة حقيقية من نوع ico ولكن لا تضعها داخل الصفحة ولكن بتظهرها في خانة عنوان الصفحة في واجهة المتصفح ذاته ..

كيف نجعل المتصفح يضع صورة ما ؟
يتم وضع الصورة إما منفردة بذاتها أو داخل قسم من أقسام الصفحة أي td أو div أو layer ..
التاج الدال على الصورة يبدأ ب img للدلالة على أنه تاج لصورة .. ثم src ونكتب بعده موقع الصورة داخل علامتي تنصيص .. ثم نضيف ما نشاء من أتريبيوت كالعرض مثلا width والإرتفاع height ونكتب القيمة بالبيكسل .. وكذلك يمكن أن نكتب alt وهو الكلام الذي يظهر بديلاً عن الصورة في حالة عدم وجودها .. و title وهو الكلام الذي يظهر عند وضع المؤشر فوق الصورة ..




.