الكورس

Advertisements

HTML Inline & Block Elements | In Arabic


سوف نتعلم فى هذا الفصل “HTML Inline & Block Elements” كل المعلومات والتفاصيل حول العناصر المضمنة والكتلة فى HTML، وكيفية إستخدامها بطريقة صحيحة وما الفرق بينهم؟


 

HTML Inline & Block Elements

 

كل عنصر فى لغة HTML له قيمة عرض افتراضية تعتمد على نوع العنصر، وهناك نوعين من العناصر هم:

  • Inline Elements.
  • Block Elements.

 

مثال للتوضيح

مثال بسيط على عنصر Inline والأخر Block:

This is Inline Element.

This is Block Element.

<!-- Inline Element -->
<span style="background-color: yellow;">This is Inline Element.</span>
<!-- Block Element -->
<p style="background-color: yellow;">This is Block Element.</p>

This is Inline Element.

This is Block Element.


 

Inline Elements

 

العناصر المُضمنة Inline Elements هي العناصر التي تشغل المساحة المحددة بالعلامات التي تحدد العنصر. لا يبدأ العنصر المضمن في سطر جديد بل يأخذ العرض بالقدر اللازم فقط.

 

مثال للتوضيح:
<p>Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, 
<span style="background-color: yellow;">This is Inline Element.</span> convallis at tellus.</p>

Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, This is Inline Element. convallis at tellus.


 

أمثلة على العناصر المضمنة Inline Elements

 

<a> <button> <strong> <script> <cite> <br>
<span> <b> <em> <samp> <kbd> <textarea>
<abbr> <code> <i> <output> <label> <time>
<acronym> <dfn> <img> <input> <small> <sub>
<bdo> <big> <select> <q> <sup> <tt>

 

عنصر الـ <span>

 

يتم استخدام عنصر الـ <span> إما:

  •  كحاوية لبعض النصوص.
  • لتصميم أجزاء من النص.

 

السبب الأكثر شيوعًا لإستخدام عناصر الـ <span> هو للسيطرة على ظهور محتوى هذه العناصر باستخدام لغة CSS. لا يحتوي عنصر الـ <span> على سمات attributes مطلوبة، ولكن سمات مثل style و class و id هم الأكثر إستخدامًا مع هذا العنصر.

 

مثال للتوضيح:
<p>The Best Website To Learn Programming In Arab World is 
<span style="background-color: yellow;">Albashmoparmeg</span> website.</p>

The Best Website To Learn Programming In Arab World is Albashmoparmeg website.


Advertisements

 

Block Elements

 

عناصر الكتلة Block Elements هى عناصر دائمًا تبدأ على سطر جديد، وتمتد من اليسار واليمين قدر الإمكان. كما أنها تنشأ هياكل أكبر من العناصر الـ Inline.

 

مثال للتوضيح:
<div style="background-color: yellow;">The Best Website To Learn Programming In Arab World is Albashmoparmeg</div>
The Best Website To Learn Programming In Arab World is Albashmoparmeg

تُسمى عناصر الكتلة بـ Block-level.


 

أمثلة على العناصر Block

 

<div> <fieldset> <ul> <table> <canvas> <header>
<section> <p> <ol> <dl> <address> من <h1> إلى <h6>
<aside> <figure> <form> <dt> <nav> <pre>
<article> <noscript> <footer> <dd> <hr> <video>
<blockquote> <li> <figcaption> <tfoot> <main> <dialog>

 

عنصر الـ <div>

 

يسمح لك عنصر الـ <div> بتجميع مجموعة من العناصر (block – inline) معًا في مربع أو قسم واحد. على سبيل المثال يمكنك إنشاء عنصر الـ <div> لإحتواء جميع عناصر الـ header من موقعك (الشعار والبحث والروابط). او يمكنك إنشاء عنصر الـ <div> لإحتواء الكلام الذى كَتبة الزوار عن موقعك والكثير من الأشياء الأخرى.

لا يحتوي عنصر الـ <div> على سمات attributes مطلوبة، ولكن سمات مثل style و class و id هم الأكثر إستخدامًا مع هذا العنصر.

 

مثال للتوضيح:
<div class="footer">
  <p>Copyright &copy; 2019 - 2021 <span style="font-weight: bold;">Albashmoparmeg</span>. All rights reserved</p>
</div>

Copyright © 2019 – 2021 Albashmoparmeg. All rights reserved


قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Inline & Block Elements” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.





الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements