http://www.dzbatna.com/images/icons/iconrote.gif [HTML] ط§ظ„ظپط±ظ‚ ط¨ظٹظ† Block ظˆ inline ظپظٹ ط§ظ„ط¹ظ†ط§طµط±
رأيت الكثير يتساءل منذ فترة، عن معنى [عناصر Block Level] و [عناصر inline] والفرق بينهما، وقد تم شرح طريقة هذه النقطة ضمن أحد المقالات في المجتمع، لكنّي أحببت شرح طريقةه في مقال منفرد حتى ينتبه إليه الجميع كونه من المفاهيم الأساسية في لغة HTML/XHTML .
قبل ذلك، أود أن أشير إلى مقالة الأخ عبدالله المهيري بخصوص معنى كلمة عنصر (element) والفرق بينها وبين كلمة وسم (Tag) من هنا :
http://www.serdal.com/archives/2014/06/12/tag-element-attribute
ينقسم العنصر في لغة HTML/XHTML إلى نوعين هما:
عناصر Block Level
العنصر من هذا النوع هو العنصر الذي يظهر في سطر جديد دائماً عند عرضه في المتصفح، حتى لو كان وسط الكلام..
لم تفهم.. خذ هذا المثال:
رمز Code:
Bla Bla Bla,I love Almashroo
عند تطبيق هذا الكود code (عرضه في المتصفح) سيظهر بهذا الشكل:
Bla Bla Bla,
I love Almashroo
كما رأيتم، فبالرغم من أن الكلام كله كان في سطر واحد، إلا أن الجملة joomla الثانية (I love Almashroo) ظهرت في سطر جديد عند تطبيقها، وذلك لأن العنصر هو من الـ Block Level حيث يبدأ فقرة جديدة بوجوده.
وتوجد عدة وسوم (Tags) مشابهة له مثلووجماعته
الملاحظة هنا، هي أن عنصر Block Level يمكن أن يحتوي على عنصر Block Level آخر أو يحتوي على عنصر inline أو على نصوص وغيرها.
عناصر inline
العنصر من هذا النوع عند تضمينه في وسط الكلام، لن ينشئ سطراً جديداً بمحتواه، بل سيظهر في نفس الجملة joomla..
مثال:
رمز Code:
Bla Bla Bla, I love Almashroo
وعند تطبيقها ستظهر:
Bla Bla Bla, I love Almashroo
كما رأينا، فالتأثير ظهر في نفس السطر ولم ينتقل لسطر جديد أو فقرة جديدة، هذا لأن عناصر الـinline يظهر تأثيرها في نفس المكان كما ذكرت.
وتوجد عدة وسوم (Tags) مشابهة له مثل و
الملاحظة هنا، هي أن عناصر inline يمكن أن تحتوي على عناصر inline وعلى نصوص، لكن لا يمكنها أن تحتوي على عناصر Block Level، فكما ترون أن Block Level هنا هي الأكبر فلن تكون داخل الـinline .
حاولت التفصيل قدر المستطاع لأوضّح الفكرة، لكن مازلت أشك أنها غير واضحة بشرح طريقةي هذا !
فأخبروني، هل فهمتموه؟
----------------------------------
الكاتب: المبدع العربي
المصدر:
[HTML] الفرق بين Block و inline في العناصر
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
