HTML Block and Inline Elements
العناصر من النوع Block والعناصر من النوع Inline في لغة HTML
سوف تتعلم في هذا الدرس نوعي العناصر في لغة HTML من حيث طريقة العرض، وهما العناصر من النوع Block التي تُصف (تظهر على المتصفح) أسفل بعضها، والعناصر من النوع Inline التي تُصف (تظهر على المتصفح) بجوار بعضها.
التاريخ
03 يناير 2021
الدروس
48
المستوى
مبتدئ
اللغة
عربي
المشاهدات
4917
المواضيع
12
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 2HTML 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>