http://www.boraqsoft.com/html-course...s/bsmallah.jpg وسوم الكُتَل Blocks Tags <div> <span>
إن وسوم HTML يمكن أن يتم جمعها معًا عن طريق وسوم الكتل
<div> أو
<span>
ولتوضيح ذلك ؛ يمكننا القول بأن وسوم أو عناصر HTML تنقسم إلى نوعين:
عناصر كتلية Block Level Elements
وهي العناصر أو الوسوم التي عادة تأخذ شكل فقرة جديدة في سطر جديد عند عرضها في المتصفح .
وأمثلتها وسوم:
<h1> <p> <ul> <table> .
http://www.boraqsoft.com/html-course/images/divider.png عناصر مضمنة Inline Elements
وهي على عكس العناصر الكتلية فهي لا تأخذ عادة شكل فقرة جديدة ولا تظهر في سطر جديد .
وأمثلتها وسوم:
<b> <td> <a> <img> .
http://www.boraqsoft.com/html-course/images/divider.png وسم <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>
النتيجة:
http://www.boraqsoft.com/html-course/images/10/01.jpg http://www.boraqsoft.com/html-course/images/divider.png وسم <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>
النتيجة:
http://www.boraqsoft.com/html-course/images/10/02.jpg http://www.boraqsoft.com/html-course/images/divider.png
ملحوظة: السمات Attributes المرتبطة بهذه الوسوم كما في الأمثلة السابقة سوف نتناولها في الدروس الخاصة بـ CSS إن شاء الله ، فلا تقلق من وجودها لأنها هنا لإعطاء أمثلة على وسمي
<div> و
<span> ليس أكثر .
