المغربي الجديد
21-03-2011, 12:44 AM
الأوسمة والعناصر ـ وكيفية التحكم بعرضهم
جميع أوسمة html تتخذ لنفسها وتظهر إفتراضياَ على شكل واحدة من 3 طرق تالية :
Block: يفصل كل عنصر بشكل مستقل عموديا واحد تلو الآخر ويترك قبلة وبعده سطر أي أن الوسم الذى ينتمي لهذه المجموعة سيكون مابداخله عبارة عن كتله واحده في سطر مستقل ممتد العرض.
Inline: يتخذ له عرض حسب مايحتوي فقط ودون أن يظهر بسطر مستقل .
Not displayed: لاتظهر على المتصفح مثال على ذلك أوسمة <style>و </ meta>
وقبل أن نعرض الأمثلة تابع معي الصورة التاليه للتوضح عن الوسم وما هو مجال العناصر
http://up.arabsgate.com/u/5114/4012/56367.jpg
Block Elements
يمكن لهذا العناصر أن تحتوى بداخلها عناصر inline elements علاوة عن عناصر من نفس فئتها ، أوسمة تنتمى الى block elements
<div>
صناديق تقسم المحتوى
<h1> ... <h6>
جميع العناوين
<p>
الفقرات
<ul>, <ol>, <dl>
القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<li>, <dt>, <dd>
بنود القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<table>
الجدوال
<blockquote>
الإقتباس ولتنسيق الفقرات ويترك مسافات بين جانبي الفقرة
<pre>
يحتفظ بالمسافات والتنسيق الأصلي للأكواد كماوردت في برامج التحرير
<form>
النماذج
كيف يظهر على المتصفح ..
<p>أنا الأن أكتب فقرة</p><p>ولكن هذه فقرة جديدة</p>
Inline Elements
وهى لا يمكن أن تحتوى على عناصر من block elements فقط يمكن أن تحتوى بداخلها على عناصر من نفس فئتها ، أوسمة تنتمى الى inline elements
<span>
<a>
الوصلات
<strong>
السمك أو تقوية الخط
<em>
تأكيد النص أو تركيزة وعادة يظهر بشكل مائل
<img />
صورة
<input>
مدخلات ازرار أو حقل نص
<abbr>
إختصار CSS
كيف يظهر على المتصفح ..
<p>
ماهى الأنماط الإنسابية ؟
<span>تقنيه تساعدك</span>
<strong>على إدارة صفحات موقعك</strong>
</p>
وهنا نجد توضيح لكل من block و inline
http://up.arabsgate.com/u/5114/4012/56370.jpg
تغير طريقة العرض من Block الى Inline والعكس
ذكرت في بداية الموضوع أن الوسوم طبيعياَ في html لها 3 أشكال للظهور ـ ولكن في نفس الوقت أنت يمكنك أن تغير في هذه الطريقة حسب إحتياجات موقعك عن طريق أكواد css وبالتحديد بواسطة الأمر display وتتفرع منه عده خصائص وما يهمنا منها الأن:
http://up.arabsgate.com/u/5114/4012/56371.jpg
وستتعرف لاحقاً ان شاء الله كيف يتم إستخدمها مع الأوسمة وخاصة بكثرة مع القوائم
جميع أوسمة html تتخذ لنفسها وتظهر إفتراضياَ على شكل واحدة من 3 طرق تالية :
Block: يفصل كل عنصر بشكل مستقل عموديا واحد تلو الآخر ويترك قبلة وبعده سطر أي أن الوسم الذى ينتمي لهذه المجموعة سيكون مابداخله عبارة عن كتله واحده في سطر مستقل ممتد العرض.
Inline: يتخذ له عرض حسب مايحتوي فقط ودون أن يظهر بسطر مستقل .
Not displayed: لاتظهر على المتصفح مثال على ذلك أوسمة <style>و </ meta>
وقبل أن نعرض الأمثلة تابع معي الصورة التاليه للتوضح عن الوسم وما هو مجال العناصر
http://up.arabsgate.com/u/5114/4012/56367.jpg
Block Elements
يمكن لهذا العناصر أن تحتوى بداخلها عناصر inline elements علاوة عن عناصر من نفس فئتها ، أوسمة تنتمى الى block elements
<div>
صناديق تقسم المحتوى
<h1> ... <h6>
جميع العناوين
<p>
الفقرات
<ul>, <ol>, <dl>
القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<li>, <dt>, <dd>
بنود القوائم المسلسلة والغير مسلسلة والقوائم المعنونة
<table>
الجدوال
<blockquote>
الإقتباس ولتنسيق الفقرات ويترك مسافات بين جانبي الفقرة
<pre>
يحتفظ بالمسافات والتنسيق الأصلي للأكواد كماوردت في برامج التحرير
<form>
النماذج
كيف يظهر على المتصفح ..
<p>أنا الأن أكتب فقرة</p><p>ولكن هذه فقرة جديدة</p>
Inline Elements
وهى لا يمكن أن تحتوى على عناصر من block elements فقط يمكن أن تحتوى بداخلها على عناصر من نفس فئتها ، أوسمة تنتمى الى inline elements
<span>
<a>
الوصلات
<strong>
السمك أو تقوية الخط
<em>
تأكيد النص أو تركيزة وعادة يظهر بشكل مائل
<img />
صورة
<input>
مدخلات ازرار أو حقل نص
<abbr>
إختصار CSS
كيف يظهر على المتصفح ..
<p>
ماهى الأنماط الإنسابية ؟
<span>تقنيه تساعدك</span>
<strong>على إدارة صفحات موقعك</strong>
</p>
وهنا نجد توضيح لكل من block و inline
http://up.arabsgate.com/u/5114/4012/56370.jpg
تغير طريقة العرض من Block الى Inline والعكس
ذكرت في بداية الموضوع أن الوسوم طبيعياَ في html لها 3 أشكال للظهور ـ ولكن في نفس الوقت أنت يمكنك أن تغير في هذه الطريقة حسب إحتياجات موقعك عن طريق أكواد css وبالتحديد بواسطة الأمر display وتتفرع منه عده خصائص وما يهمنا منها الأن:
http://up.arabsgate.com/u/5114/4012/56371.jpg
وستتعرف لاحقاً ان شاء الله كيف يتم إستخدمها مع الأوسمة وخاصة بكثرة مع القوائم