HTML

HTML Block and Inline Elements
العناصر من النوع Block والعناصر من النوع Inline في لغة HTML

سوف تتعلم في هذا الدرس نوعي العناصر في لغة HTML من حيث طريقة العرض، وهما العناصر من النوع Block التي تُصف (تظهر على المتصفح) أسفل بعضها، والعناصر من النوع Inline التي تُصف (تظهر على المتصفح) بجوار بعضها.

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

5408

المواضيع

12
الشروحات chevron_left HTML Block and Inline Elements chevron_left HTML

HTML Block and Inline Elements
العناصر من النوع Block والعناصر من النوع Inline في لغة HTML

</> HTML block elements
العناصر من النوع block في لغة HTML

لكل عنصر من عناصر HTML طريقة عرض افتراضية، فهناك عناصر تُعرض على شكل block أي يظهر كل عنصر على سطر منفصل في الصفحة، وهناك عناصر أخرى تُعرض على شكل inline أي تظهر العناصر بجانب بعضها البعض.

ما هو block elements ؟

  • العناصر من النوع block elements دائماً تكون منفردة وتبدأ في سطر جديد.
  • العناصر من النوع block elements تقوم بحجز سطر كامل حتى وإن كان عرضها أصغر من عرض الصفحة.


نذكر من أشهر العناصر من نوع block elements:
  • عنصر <div> المستخدم لعمل تقسيمات داخل صفحة الويب.
  • عنصر <p> المستخدم لعمل فقرات نصية.
  • عناصر headings العناوين الرئيسية والفرعية. 
This is block 1
This is block 2

Lorem Ipsum is simply dummy text 1

Lorem Ipsum is simply dummy text 2

HTML block elements

جميع العناصر من النوع block elements تظهر في سطر جديد.

<body>
  <div>This is block 1</div>
  <div>This is block 2</div>
  <p>Lorem Ipsum is simply dummy text 1</p>
  <p>Lorem Ipsum is simply dummy text 2</p>
</body>

</> HTML inline elements
العناصر من النوع inline في لغة HTML

تكون طريقة العرض الافتراضية للعناصر من نوع inline elements هي بجانب بعضها البعض.


ماهي Inline Elements؟

  • العناصر من النوع inline elements لا تبدأ في سطر جديد، بل تكون العناصر جانب بعضها البعض.
  • العناصر من النوع inline elements لا تحجز سطر كامل إلا إذا كان عرضها يساوي عرض الصفحة بالكامل.


نذكر من أشهر العناصر من نوع inline elements:
  • عنصر <span>.
  • عنصر <img>.
  • عنصر <a>.
This is block 1
This is block 2

Lorem Ipsum is simply dummy text 1

Lorem Ipsum is simply dummy text 2

This is inline 1 This is inline 2
HTML inline elements

العناصر من النوع inline elements تصفّ وتظهر بجانب بعضها البعض على نفس السطر.

<body>
  <div>This is block 1</div>
  <div>This is block 2</div>
  <p>Lorem Ipsum is simply dummy text 1</p>
  <p>Lorem Ipsum is simply dummy text 2</p>
  <span>This is inline 1</span>
  <span><b>This is inline 2</b></span>
</body>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات