الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (وسوم الكُتَل Blocks) م#10

وسوم الكُتَل Blocks Tags
<div> <span>

إن وسوم HTML يمكن أن يتم جمعها معًا عن طريق وسوم الكتل <div> أو <span>
ولتوضيح ذلك ؛ يمكننا القول بأن وسوم أو عناصر HTML تنقسم إلى نوعين:

عناصر كتلية Block Level Elements
وهي العناصر أو الوسوم التي عادة تأخذ شكل فقرة جديدة في سطر جديد عند عرضها في المتصفح .
وأمثلتها وسوم: <h1> <p> <ul> <table> .

عناصر مضمنة Inline Elements
وهي على عكس العناصر الكتلية فهي لا تأخذ عادة شكل فقرة جديدة ولا تظهر في سطر جديد .
وأمثلتها وسوم: <b> <td> <a> <img> .

وسم <div>
وهو اختصار كلمة "Division" وتعني "تقسيم" .
وهو وسم كتلي Block Level Elements .
ويمكن استخدامه في لغة HTML ليحتوي بداخله عناصر ووسوم مختلفة من فئة العناصر الكتلية Block Level Elements وجمعها معا وإعطائها نفس التنسيق "Style" .
لكن الاستخدام الشائع جدًا لهذا الوسم هو استخدامه مع CSS - سنتناوله لاحقا - ، وذلك لإعطاء أكثر من كتلة "Block" تنسيقًا موحدًا بسمات "Attributes" موحدة لها جميعًا .
وتوجد وظيفة أخرى هامة لهذا الوسم ؛ وهي متعلقة بالمخطط العام للصفحة "Layout" ، فبدلا من الطريقة القديمة لتخطيط وتقسيم الصفحة عن طريق الجداول ؛ فإن استخدام الوسم <div> للقيام بذلك هي الطريقة الصحيحة ، فاستخدام الجداول لابد أن يقتصر فقط على إنشاء جداول بيانات داخل الصفحة وليس عمل التخطيط العام لها .
مثال:

كود:

<div style="color:blue;font-style:italic">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

النتيجة:


وسم <span>
وهو وسم مضمن Inline Elements .
ويمكن استخدامه ليحتوي بداخله على جزء من نص معين "text" وإعطائه أكثر من تنسيق في نفس الوقت وتجميع هذه التنسيقات كلها داخل هذا الوسم .
كما يمكن استخدامه مع CSS أيضًا لإعطاء أجزاء من النص تنسيقًا موحدًا بسمات "Attributes" موحدة لها جميعًا .
ولكنه على عكس وسم <div> فإنه ليست له وظيفة مستقلة أخرى يقوم بها مثل تخطيط الصفحة كما في وسم <div> .
مثال:

كود:

<p>I'm wearing a <span style="color:blue;font-weight:bold">blue</span> T-shirt, and my friend is wearing <span style="color:red;font-weight:bold">red</span> shirt.</p>

النتيجة:


ملحوظة: السمات Attributes المرتبطة بهذه الوسوم كما في الأمثلة السابقة سوف نتناولها في الدروس الخاصة بـ CSS إن شاء الله ، فلا تقلق من وجودها لأنها هنا لإعطاء أمثلة على وسمي <div> و <span> ليس أكثر .

الدرس السابق
http://www.nilemotors.net/Nile/417922-html-9-a.html