رائد ابو فيصل
01-03-2010, 06:04 PM
عناصر النصوص text elements
--------------------------------------------------------------------------------
درس اليوم سيكون كبيرا بعض الشئ. حيث اننا سنحاول جاهدين تغطية كل مايخص النصوص فى الـ XHTML
ونبدأها بالـ Paragraph والـ Br (رمز انهاء السطر) والتشديد Emphases
الـ Paragraph او مايرمز اليه بالوسم p
المقصود منها هو قطعة نصية.
توضع هذه القطعة داخل الوسم <p>
وكما نعلم ان الوسم <p> هو من اوسمة الـ block يعنى يمكن ان يضم اوسمة اخرى داخله سواء كانت block او inline
ويستخدم بالشكل التالى
كود:
<p>السلام عليكم ورحمة الله, هذه هى اول قطعة اقم بكتابتها فى الـ XHTML</p>
<p>كما يمكننى ان اكتب قطعة اخرى بسطر منفصل</p>
كما يمكننا ان نستخدم العنصر <br />
لوضع اكثر من سطر داخل قطعة p واحدة بالشكل التالى
كود:
<p>السلام عليكم ورحمة الله وبركاته <br />
انا اسمى احمد, وانت؟</p>
التشديد او الـ emphases هو مايرمز اليه بالوسم <em>
وهو نوعا ما يجعل النص مائل. كالمثال التالى
كود:
<p>مرحبا عزيزى , هل انت <em>محمد</em>؟</p>
اذا وضعت الكود اعلاه داخل ملف (نصى) واعطيته الإمتداد .html وفتحته بمتصفحك
ستعرف ماهو تأثير وسم الـ <em> على النص.
اتمنى يكون كل شئ واضح وبسيط.
لننتقل للجزء الثانى من درس اليوم
وهو العناوين الرئيسية الـ Heading
وسم الـ p او القطع, اظن انه من الواضح انه يستخدم لعرض محتوى القطعة.
لكن ماذا عن العناوين الرئيسية للقطعة؟ او العناوين الفرعية للعناوين الرئيسية؟
هنا يأتى دور الوسم h1 الى الوسم h6 حيث ان الوسم h1 هو اكبر اوسمة العناوين الرئيسية من حيث حجم الخط, و h2 اصغر بقليل و h3 اصغر من h2 وهكذا, واصغرهم هو الـ h6
يمكننا تجربة المثال التالى كامثال
كود:
<h1>العنوان الرئيسى 1</h1>
<p>محتوى العنوان الرئيسى الأول</p>
<h2>العنوان الرئيسى 2</h2>
<p>محتوى العنوان الرئيسى الثانى</p>
<!-- الخ -->
<!-- هذا مجرد تعليق وليس له اى نوع من انواع التأثير على مايتم طباعته بالمتصفح -->
ملحوظتين صغيرتين قبل الإنتقال للجزء التالى من الدرس.
كن حريص دائما (ربما هذا خارج نطاق الحوار عن الـ XHTML)
ان تضع الأفكار او العناوين الرئيسية بأوسمة الـ heading
حيث ان هذا له تعامل خاص نوعا مع محركات البحث. حيث انها تعطه اهمية اكثر مما تعطه من اهمية الى نوع اخر من انواع النصوص حتى ولو كان شبيه بالـ heading
(المحوظة الثانية) وتذكر ان مسألة الحجم وشكل الخط ليست دائما بمشكلة, لأنه ببساطة يمكنك التحكم فى كل هذا عن طريق الـ css (سوف يتم شرح كل شئ فى مكانه وتوقيته بإذن الله)
رؤية المسافات بوسم pre
الوسم pre عمله هو جعل المتصفح يرى كل المسافات المستخدم داخله.
بمعنى.
لنفرض اننا نريد عرض النص التالى كما هو
كود:
السلام عليكم ورحمة الله وبركاته
كيف حالك عزيزى؟
اتمنى لك كل التوفيق.
اذا استعرضت النص التالى بالمتصفح سيعرض بهذا الشكل
كود:
السلام عليكم ورحمة الله وبركاته كيف حالك عزيزى؟ اتمنى لك كل التوفيق.
وهذا لأن المتصفح من الطبيعى ان لا يرى المسافات الفارغة. (او بمعنى اخر لا يعرضها)
لذلك, اذا اردنا اخبار المتصفح ان يعرضها كما هى, يجب وضع النص داخل الوسم pre بالشكل التالى
كود:
<pre>
السلام عليكم ورحمة الله وبركاته
كيف حالك عزيزى؟
اتمنى لك كل التوفيق.</pre>
هذا سيفى بالغرض ويمكنك تجربته بنفسك.
مازال هناك العديد من الأوسمة الخاصة بالنصوص لكن ماتم شرحه اليوم
هو اهمهم واكثرهم استخداما.
والبقية يمكنك ان تتعلمها مع الوقت او عبر الدروس.
كما انصحك ايضا بأن تقرأ مايخص استايل النصوص فى الـ CSS
•الدرس السابق اساسيات بناء صفحة XHTML (http://www.abc4web.net/vb/showthread.php?t=7103)
•الدرس التالى الروابط والصور links and images
من الدعم العربي التطويري
--------------------------------------------------------------------------------
درس اليوم سيكون كبيرا بعض الشئ. حيث اننا سنحاول جاهدين تغطية كل مايخص النصوص فى الـ XHTML
ونبدأها بالـ Paragraph والـ Br (رمز انهاء السطر) والتشديد Emphases
الـ Paragraph او مايرمز اليه بالوسم p
المقصود منها هو قطعة نصية.
توضع هذه القطعة داخل الوسم <p>
وكما نعلم ان الوسم <p> هو من اوسمة الـ block يعنى يمكن ان يضم اوسمة اخرى داخله سواء كانت block او inline
ويستخدم بالشكل التالى
كود:
<p>السلام عليكم ورحمة الله, هذه هى اول قطعة اقم بكتابتها فى الـ XHTML</p>
<p>كما يمكننى ان اكتب قطعة اخرى بسطر منفصل</p>
كما يمكننا ان نستخدم العنصر <br />
لوضع اكثر من سطر داخل قطعة p واحدة بالشكل التالى
كود:
<p>السلام عليكم ورحمة الله وبركاته <br />
انا اسمى احمد, وانت؟</p>
التشديد او الـ emphases هو مايرمز اليه بالوسم <em>
وهو نوعا ما يجعل النص مائل. كالمثال التالى
كود:
<p>مرحبا عزيزى , هل انت <em>محمد</em>؟</p>
اذا وضعت الكود اعلاه داخل ملف (نصى) واعطيته الإمتداد .html وفتحته بمتصفحك
ستعرف ماهو تأثير وسم الـ <em> على النص.
اتمنى يكون كل شئ واضح وبسيط.
لننتقل للجزء الثانى من درس اليوم
وهو العناوين الرئيسية الـ Heading
وسم الـ p او القطع, اظن انه من الواضح انه يستخدم لعرض محتوى القطعة.
لكن ماذا عن العناوين الرئيسية للقطعة؟ او العناوين الفرعية للعناوين الرئيسية؟
هنا يأتى دور الوسم h1 الى الوسم h6 حيث ان الوسم h1 هو اكبر اوسمة العناوين الرئيسية من حيث حجم الخط, و h2 اصغر بقليل و h3 اصغر من h2 وهكذا, واصغرهم هو الـ h6
يمكننا تجربة المثال التالى كامثال
كود:
<h1>العنوان الرئيسى 1</h1>
<p>محتوى العنوان الرئيسى الأول</p>
<h2>العنوان الرئيسى 2</h2>
<p>محتوى العنوان الرئيسى الثانى</p>
<!-- الخ -->
<!-- هذا مجرد تعليق وليس له اى نوع من انواع التأثير على مايتم طباعته بالمتصفح -->
ملحوظتين صغيرتين قبل الإنتقال للجزء التالى من الدرس.
كن حريص دائما (ربما هذا خارج نطاق الحوار عن الـ XHTML)
ان تضع الأفكار او العناوين الرئيسية بأوسمة الـ heading
حيث ان هذا له تعامل خاص نوعا مع محركات البحث. حيث انها تعطه اهمية اكثر مما تعطه من اهمية الى نوع اخر من انواع النصوص حتى ولو كان شبيه بالـ heading
(المحوظة الثانية) وتذكر ان مسألة الحجم وشكل الخط ليست دائما بمشكلة, لأنه ببساطة يمكنك التحكم فى كل هذا عن طريق الـ css (سوف يتم شرح كل شئ فى مكانه وتوقيته بإذن الله)
رؤية المسافات بوسم pre
الوسم pre عمله هو جعل المتصفح يرى كل المسافات المستخدم داخله.
بمعنى.
لنفرض اننا نريد عرض النص التالى كما هو
كود:
السلام عليكم ورحمة الله وبركاته
كيف حالك عزيزى؟
اتمنى لك كل التوفيق.
اذا استعرضت النص التالى بالمتصفح سيعرض بهذا الشكل
كود:
السلام عليكم ورحمة الله وبركاته كيف حالك عزيزى؟ اتمنى لك كل التوفيق.
وهذا لأن المتصفح من الطبيعى ان لا يرى المسافات الفارغة. (او بمعنى اخر لا يعرضها)
لذلك, اذا اردنا اخبار المتصفح ان يعرضها كما هى, يجب وضع النص داخل الوسم pre بالشكل التالى
كود:
<pre>
السلام عليكم ورحمة الله وبركاته
كيف حالك عزيزى؟
اتمنى لك كل التوفيق.</pre>
هذا سيفى بالغرض ويمكنك تجربته بنفسك.
مازال هناك العديد من الأوسمة الخاصة بالنصوص لكن ماتم شرحه اليوم
هو اهمهم واكثرهم استخداما.
والبقية يمكنك ان تتعلمها مع الوقت او عبر الدروس.
كما انصحك ايضا بأن تقرأ مايخص استايل النصوص فى الـ CSS
•الدرس السابق اساسيات بناء صفحة XHTML (http://www.abc4web.net/vb/showthread.php?t=7103)
•الدرس التالى الروابط والصور links and images
من الدعم العربي التطويري