3- عناصر لغة html و الفرق بين عناصر المستوى المضمن و عناصر مستوى الكتلة

1- الفرق بين عناصر المستوى المضمن و عناصر مستوى الكتلة

تقسم عناصر لغة html إلى صنفين و هما:

-عناصر المستوى المضمن Inline Level

-عناصر مستوى الكتلة Block Level

و الفرق بين الصنفين هو كالآتي:

-أولا: عناصر مستوى الكتلة يمكن أن يتضمن داخله كلا النوعين من العناصر (Block Level و Inline Level). و ذلك على عكس عناصر  المستوى المضمن  Inline Level و التي لا يمكن أن تتضمن داخلها إلا عناصر من نفس صنفها (Inline Level). ما عدى عنصر الرابط.

-ثانيا: عناصر مستوى الكتلة تعود إلى السطر في المتصفج على عكس عناصر المستوى المضمن التي تكمل في نفس الخط.

مثال ليتضح الحال:

<p>Hello <strong> World!</strong> </p>

<p>Hello <h1> World!</h1> </p>

في المثال الاول وضعنا كلمة World! داخل احد عناصر المستوى المضمن وهو strong فكانت النتيجة أن جملة Hello World! ظهرت على نفس الخط في المتصفح.

و في المثال الثاني وضعنا كلمة World! داخل احد عناصر امستوى الكتلة وهو h1 فكانت النتيجة أن كلمة World! عادت إلى السطر.

-ثالثا: عناصر مستوى الكتلة Block Level تشغل كل عرض العنصر الذي يحتويها و هي تدعم السمات width, height و text-align. وذلك على عكس  المستوى المضمن  Inline Level التي لا تدعم هذه السمات ما عدى عنصر <img> الذي يدعم سمتي width و height (الطول و العرض). و عادة ما تستعمل عناصر Inline Level داخل عناصر  Block Level.

2- قائمة لأهم عناصر لغة html صنف Block Level مع الشرح

-عنصر الفقرة <p> </p> : يستعمل لكتابة فقرة جديدة.

-عنصر النص المنسق مسبقا <pre> </pre> : شبيه بعنصر الفقرة لكنه يحافظ على الفراغات و الرجوع الى السطر.

-عنصر الاقتباس <blockquote> </blockquote> : يستعمل لكتابة فقرة مقتبسة من مصدر آخر مع ميزة cite لذكرة الصفحة المصدر

-عنصر الخط الأفقي <hr> : يقوم بإظهار خط أفقي في الصفحة و يستعمل عادة للفصل بين المواضيع المختلفة في الصفحة.

-عنصر التقسيم  <div> </div> : يستعمل لتقسيم محتوى الصفحة إلى أقسام, من أجل إعطاء كل قسم خاصيات CSS مميزة. من أهم عناصر لغة html و اكثرها استعمالا.

–<ul> </ul> : من أجل عمل قائمة غير مرتبة بالارقام أو الحروف.

–<ol> </ol> : إنشاء قائمة مرتبة مع ميزات مثل reversed, start و type.

–<address> </address> : داخل هذا العنصر نضع معلومات الاتصال مثل الايمال و العنوان

–<form> </form> . يسمى بعنصر الاستمارة و بداخله نضع حقول بيانات يملؤها المستخدم. يستعمل خاصة في المواقع الديناميكية.

-عناصر العناوين من <h1> </h1> إلى <h6> </h6> : الاختلاف بينها في حجم الكتابة حيث أن h1 هو الاكبر حجما و h6 هو الاصغر.

–<fieldset> </fieldset> : دورها تجميع الحقول ذات صلة داخل الاستمارة و وضعها في إطار.

3- قائمة أهم عناصر المستوى المضمن Inline Level مع الشرح

– <span> </span> : تستعمل لتجميع عناصر المستوى المضمن.

–<a href=””></a> : تستعمل لانشاء وصلات الروابط.

–<b> </b>: للكتابة بالخط العريض.

– <i> </i>: للكتابة بالخط المائل.

–<strong> </strong> : للتعريف بان النص الموجود داخل هذا العنصر مهم و عادة ما يكتب بالخط العريض.

– <em> </em> : لجعل النص مؤكد عليه و عادة ما يكتب بالخط المائل.

– <small></small> : لكتابة النص بحجم أصغر.

–<u> </u> : لعمل خط تحت الكتابة.

–<del> </del> : للتعريف بـأن النص تم حذفه و عادة يظهر مشطوبا.

–<s> </s> : للتعريف بان النص غير صحيح و عادة يقع شطبه.

–  : لكتابة النصوص فوق الخط, مثل القوة للاعداد, مثال 10².

–  : للكتابة تحت الخط, مثال H₂O.

–<abbr title=””></abbr> : لاظهار النص الكامل للاختصار عند تمرير الفارة فوق الاختصار.

–<code> </code> : لكتابة نص برمجي (كود).

–<q> </q> : لاظهار اقتباس و عادة ما يظهر بين ظفرين.

و لمن يريد المزيد من اكواد html في هذا الرابط قائمة فيها جميع اوسمة لغة html.

w3school