جميع عناصر لغة Html لها طريقة عرض افتراضية ..وهذه الطريقة تعتمد على نوع
العنصر وطريقة العرض الافتراضية هذه إما أن تكون block or inline
block elements
عناصر لغة Html التى تظهر بطريقة البلوك تبدأ من سطر جديد وتترك بعدها سطر جديد بمعنى لا يستطيع أى عنصر آخر ان يكون معها فى نفس السطر مثل العناصر التالية:-
<p> - <h1> -<h6> - <div>
ففى المثال التالي : قمنا باستخدام مجموعة عناصر بلوك :
<h1>office</h1>
<h2>word</h2>
<p>application used in work manipulation</p>
<h2>excel</h2>
<p>application used in electronic sheets</p>
وكما نلاحظ هذا هو الناتج:
نلاحظ ان كل عنصر من عناصر البلوك ظهر فى سطر منفصل بمفرده ..ولم يتداخل أى
عنصر مع عنصر أخر فى نفس السطر فالعناوين ظهرت فى سطر بمفردها والفقرات ظهرت
فى أسطر بمفردها
inline elements
وهى عناصر لغة Html ولا تظهر فى سطر جديد وانما تظهر متجاورة مع بعضها فى نفس
السطر مثل العناصر التالية
<a> - <img> - <span>
مثال:
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
نلاحظ أننا قمنا بعمل ثلاثة روابط تشعبية ونلاحظ النتيجة أن هذه الروابط تظهر
فى سطر واحد وليس فى ثلاثة أسطر وذلك لأنها inline elements
مثال آخر : قمنا بإضافة ثلاثة صور أخرى فنلاحظ أن الصور والارتباطات
التشعبية ظهرت فى نفس السطر
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<img src="lion.jpg" alt="lion" title="lion" width="100px"
height="100px">
<img src="lion.jpg" alt="lion" title="lion" width="100px"
height="100px">
<img src="lion.jpg" alt="lion" title="lion" width="100px"
height="100px">
ناتج المثال:
المشاركات
ليست هناك تعليقات:
إرسال تعليق