البلوكات والعناصر المضمنة HTML Block and Inline Elements

الدرس السابق الدرس التالي
 الكتلة البلوك (Block ) و العناصر المضمنة (Inline )
كل عنصر HTML له قيمة عرض افتراضية ، اعتمادًا على نوع العنصر.
هناك نوعان من قيم العرض: كتلة (Block ) ومضمنة(Inline).
عناصر الكتلة  Block-level Elements
يبدأ Block-level Elements دائمًا في سطر جديد.
يشغل Block-level Elements  دائمًا العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان).
يحتوي Block-level Elements على هامش علوي وسفلي ، بينما لا يحتوي العنصر المضمن على هذا الهامش.
عنصر <div> هو عنصر على مستوى الكتلة.

مثال
<!DOCTYPE html>
<html>
<body>
<div style = "border: 1px solid black"> مرحبًا بالعالم </div>
<p> عنصر DIV هو عنصر كتلة ، وسيبدأ دائمًا في سطر جديد وسيشغل العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان). </p>
</body>
</html>

فيما يلي عناصرBlock-level Elements  في HTML:
 
العناصر المضمنة Inline Elements
لا يبدأ العنصر المضمن في سطر جديد.
يأخذ العنصر المضمن عرضًا بقدر الضرورة فقط.
هذا عنصر <span>داخل فقرة.
مثال
<!DOCTYPE html>
<html>
<body>
<p> هذا عنصر مضمن يمتد <span style = "border: 1px solid black"> Hello World </span> داخل فقرة. </p>
<p> يعد عنصر SPAN عنصرًا مضمنًا ، ولن يبدأ في سطر جديد وسيستهلك فقط قدرًا كبيرًا من العرض حسب الضرورة. </p>
</body>
</html>

فيما يلي العناصر المضمنة في HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

ملاحظة : لا يمكن أن يحتوي العنصر المضمن مثل span على عنصر على مستوى الكتلة مثل div!

عنصر <div> 
غالبًا ما يُستخدم عنصر <div> كحاوية لعناصر HTML الأخرى.
لا يحتوي عنصر <div> على سمات مطلوبة ، لكن  style و class و id  شائعان.
عند استخدامه مع CSS ، يمكن استخدام عنصر <div> لتصميم  بلوكات  المحتوى: 
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
  <h2> لندن </ h2>
   <p> لندن هي عاصمة إنجلترا. إنها المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، مع منطقة حضرية يزيد عدد سكانها عن 13 مليون نسمة. </p>
   <p> بالوقوف على نهر التايمز ، كانت لندن مستوطنة رئيسية منذ ألفي عام ، ويعود تاريخها إلى تأسيسها من قبل الرومان ، الذين أطلقوا عليها اسم لوندينيوم.</p>
</div> 
</body>
</html>

العنصر <span>
العنصر <span> عبارة عن حاوية مضمنة تُستخدم لترميز جزء من نص أو جزء من مستند.
لا يحتوي العنصر <span> على سمات مطلوبة ، ولكن style و class و id شائعان.
عند استخدامه مع CSS ، يمكن استخدام العنصر <span> لتصميم أجزاء من النص:
مثال
<!DOCTYPE html>
<html>
<body>
<h1> عنصر الامتداد </h1>
<p> أمي لديها <span style = "color: blue؛ font-weight: bold"> عيون زرقاء </ span> وأبي <span style = "color: darkolivegreen؛ font-weight: bold"> أخضر داكن </span> عيون. </p>
</body>
</html>

ملخص الفصل
  • هناك نوعان من قيم العرض: block وinline
  • يبدأ عنصر  block دائمًا بسطر جديد ويستهلك العرض الكامل المتاح في المتصفح
  • لا يبدأ العنصر inline في سطر جديد ولا يشغل سوى الحيز الموجد فيه النص
  • عنصر <div> هو block-level ويستخدم غالبًا كحاوية لعناصر HTML الأخرى
  • العنصر <span> عبارة عن inline container تُستخدم لترميز جزء من نص أو جزء من مستند
الدرس السابق الدرس التالي
القسم: