HTML

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

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

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

3733

المواضيع

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>
مصطلحات الدرس
Block
Block

حاجز أو كتلة

Inline
Inline

ضمني أو مضمن

Elements
Elements

عناصر

Margin Bottom
Margin Bottom

هامش سفلي

Margin Top
Margin Top

هامش علوي

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.