HTML Block and Inline Elements

-

في Html كل elements لها قيم افتراضية للعرض display value على الشاشات ، يعتمد ذلك على نوع element . وفي HTML عندنا قيمتين هنا block and inline

تمام نفهم المقصود 

Block-level Elements

في A block-level element دائما يبدا بسطر جديد، وتعمل المتصفحات على إضافة مسافة margin بشكل افتراضي قبل وبعد هذا element ، وهذا element دائما بتم عرضها بكامل الشاشة (full width) بحيث يمتد الى اليسار و اليمين  قدر الإمكان.

من الأمثلة الشائعة على هذا النوع : 

<p> and <div>

وحكينا في الدروس السابقة عن <p>  الي تستخدم لتعريف وعرض المحتوي داخل فقرة.

اما بخصوص <div> هي جزء من الصفحة يمكن استخدامها لأغراض مختلفة. وتكون  كمان container   لاحتواء HTML elements. في <div> مثل أي HTML elements يمكن تطبيق Style عليها .في اخر الدرس طبقنا مثال على <div>

تمام نفهم الموضوع بمثال: 

طبق الكود التالي داخل صفحة HTML 


<!DOCTYPE html>
<html>
<body dir="rtl">
<p style="border: 1px solid rgb(165, 162, 162)">
مرحبا بكم
</p>
<div style="border: 1px solid rgb(165, 162, 162)"> 
    مرحبا بكم
</div>
</body>
</html>

النتيجة : 

لاحظ ان الوضع الافتراضي هي تمدد هذه element على طول الشاشة، حاول تكبر وتصغر الشاشة اكيد بتشوف النتيجة نفسها.

 block-level elements في HTML هي:

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

Inline Elements
في inline element لا يبدا بسطر جديد، والوضع الافتراضي يتم عرض element بقدر الحجم الي بحتاجو
من الأمثلة على inline element 
<span></span>
وتستخدم عادتا لإضافة علامه داخل نص او جزء من الصفحه. ومثل أي HTML element يمكن تطبيق Style عليها في اخر الدرس طبقنا مثال عليها.

طبق المثال التالي في صفحة HTML 


<!DOCTYPE html>
<html>
<body dir="rtl">
<p style="border: 1px solid rgb(165, 162, 162)">
مرحبا بكم
</p>
<div style="border: 1px solid rgb(165, 162, 162)"> 
    مرحبا بكم
</div>
<p> <span style="border: 1px solid black">مرحبا بكم </span> </p>
</body>
</html>
النتيجة بتكون : 


لاحظ حجم span فقط بقدر النص الموجود 

في المثال السابق اضفنا inline  داخل block-level element . لكن العكس لا يمكن 

التالي هي inline elements في 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>
مثال على Div

<!DOCTYPE html>
<html>
<body dir="rtl">
<div style="background-color:rgb(143, 140, 140);color:white;padding:10px;">
  <h2>حكم وامثال</h2>
  <p>ستظل تكرر نفس أخطاءك في الحياة إذا لم تتعلم منها.
 </p>
  <p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.
</p>
</div> 
</body>
</html>
مثال <span>
<!DOCTYPE html>
<html>
<body dir="rtl">
<div style="background-color:rgb(143, 140, 140);color:white;padding:10px;">
  <h2>حكم وامثال</h2>
  <p> ستظل تكرر نفس   <span style="color:rgb(255, 38, 0);font-weight:bold"> أخطاءك</span> في الحياة إذا لم تتعلم منها.
   
 </p>
  <p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.
</p>
</div> 
</body>
</html>