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> : للتعريف بان النص غير صحيح و عادة يقع شطبه.
– <sup> </sup> : لكتابة النصوص فوق الخط, مثل القوة للاعداد, مثال 102.
– <sub> </sub> : للكتابة تحت الخط, مثال H2O.
–<abbr title=””></abbr> : لاظهار النص الكامل للاختصار عند تمرير الفارة فوق الاختصار.
–<code> </code> : لكتابة نص برمجي (كود).
–<q> </q> : لاظهار اقتباس و عادة ما يظهر بين ظفرين.
و لمن يريد المزيد من اكواد html في هذا الرابط قائمة فيها جميع اوسمة لغة html.
اشكر لكم هذه المعلومات القيمه والذي بذلــت جهود كبيره في نجهيزها…اتمنى لكم دوام الموفيه ولكل العاملين في هذا الموقع
العفو اخي الفاضل.سعيد لاعجابك بالدرس.
تسلم أخي الفاضل
العفو