رائد ابو فيصل
21-02-2010, 08:38 PM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
صياغة اكواد الـ XHTML
.
صياغة الـ XHTML هى صياغة بسيطة جدا
تعتمد فيها على العناصر Elements و الأوسمة Tags و يمكنك اضافة مزيد من الخصائص ايضا بإستخدام الـ attributes
لنبدأ بتعريف الـ Elements, و الـ tags و الـ attributes
انظر للكود التالى
<a href="http://www.dd4bb.com">الدعم العربى</a>
هذا الجزء من الكود
كود:
<a href="http://www.dd4bb.com">
هو بداية الوسم (الـ Tag)
والذى يحدد بداية العنصر Element
والجزء الأخير بالكود </a>
هو غلق الـ tag والذى يحدد نهاية الـ Element
اما هذا الجزء
href
فهو احد خصائص (attributes) هذا العنصر و href هى الخاصية المستخدمة للروابط
ونعرف قيمة هذا الـ attribute بوضع علامة = بعده, ثم وضع قيمته داخل علامتى التنصيص.
والكود بالكامل هو عبارة عن عنصر Element
عندما نتحدث عن العناصر والأوسمة والخصائص. هناك قيود (قواعد) يجب اتباعها لكتابة اكواد XHTML صحيحة وخالية من الأخطاء. (ولا تقلق اذا وجدت اى اكواد غير مألوفة اليك ولم يتم شرحها, سوف نشرح كل شئ بإذن الله فى وقته)
1.الـ XHTML تتطلب ان يتم كتابة اسم اى وسم بحروف صغيرة Small وليست حروف كبيرة Capital يعنى الوسم <p></p> وسم صحيح, لكن الوسم <P></P> وسم خاطئ.
2.كل الأوسمة يجب ان يتم غلقها بمعنى اذا بدأت وسم <a> يجب ان يتم غلقه بـ </a> اذا بدأت وسم <div> يجب ان يتم غلقه بـ </div>
الخ. مع العلم انه يوجد اوسمة تسمى self close (او إغلاق ذاتى)
وهى اوسمة صغيرة تغلق نفسها بنفسها.
كامثال على ذلك وسم <img> يغلق بهذا الشكل
<img then_image_attributes_goes_here />
لاحظ بنهاية الوسم العلامة />
والتى تعنى نهاية الوسم ومن امثلة ذلك ايضا, وسم بداية سطر جديد وهو <br />
(عمل الوسم هو لنهاية السطر الحالى, ووضع مابعده بسطر جديد)
3.جميع خصائص الأوسمة يجب ان يكون لها قيمة, ويجب ان توضع هذه القيمة داخل علامات التنصيص.
كما رأينا بأول وسم <a> كان له الخاصية href
اذا كتبت هذا الوسم بالشكل التالى
كود:
<a href=http://www.dd4bb.com>
يصبح هذا الوسم خاطئ (الخاصية هنا هى href وقيمتها هى http: //www.dd4bb.com )
لأن قيمة الخاصية يجب ان توضع داخل علامات التنصيص فتكتب بالشكل التالى
كود:
<a href="http://www.dd4bb.com">
4.ترتيب وضع العناصر يجب ان يتم ترتيبه بشكل صحيح.
لتوضيح المقصود انظر الكود التالى
كود:
<p>ما رأيك فى منتدى <a href="http://www.dd4bb.com">الدعم العربى</a> ؟</p>
تم فتح الوسم <p> اولا, وبعده جاء وسم <a> لذلك يجب ان يغلق وسم <a> اولا وبعده يغلق الوسم <p>
يعنى ماجاء اولا, يغلق بالنهاية, وماجاء بعده يغلق قبله! وهكذا.
ماذا اذا استخدمنا الكود اعلاه بالشكل التالى؟
كود:
<p>ما رأيك فى منتدى <a href="http://www.dd4bb.com">الدعم العربى</p> ؟</a>
هذا الكود خطأ 100% لأن وسم <p> تم غلقه على وسم <a> قبل وضع نهاية وسم <a>
فأصبح وسم <a> غير مغلق بالرغم من وجود وسم إغلاقه بنهاية العنصر, لكنه تم وضعها بترتيب خطأ ولذلك لا يتم التعامل معها بشكل صحيح ويتم تجاهلها,
وبذلك نكون اخترقنا القاعدة الثانية, والتى تشترط غلق كل الأوسمة, واصبح الكود لدينا كود غير سليم.
بالنسبة لمسألة الترتيب, يمكننا ان نعرفها كا علاقة اسرية.
بمعنى العنصر الكبير يكون هو الأب Parent والعنصر الذى بداخله هو الإبن Child
يعنى الكود التالى
كود:
<p><em>الدعم</em> العربى</p>
الأب به او الـ Parent هو الوسم <p>
والأبن او الـ Child هو الوسم <em>
كامعلومة اضافية لقيود صياغة اكواد الـ XHTML قبل انهاء درس اليوم.
كل عناصر الـ XTHML تنقسم الى نوعين.
اما BLOCK او INLINE
النوع الأول BLOCK هو عبارة عن عنصر يحتوى بداخله على عناصر BLOCK او INLINE اخرى. (مثل div , p و table هذه مجرد امثلة وسيتم شرح كل شئ بوقته)
والنوع الثانى INLINE لا يمكن ان يحوى بداخله الا عناصر من نفس نوعه, نصوص فقط. من امثلة عناصر هذه الفئة الوسم span والوسم a والوسم img
مما يعنى ان الكود
<div><p><span></span></p></div>
كود صحيح, حيث div و p عناصر من الفئة block
و span عنصر من الفئة inline
لكن الكود التالى
<div><span><p></p></span></div>
كود خاطئ لأن تم وضع p داخل span ومن الغير مقبول وضع عناصر الفئة block داخل عناصر الفئة Inline
وكاملحوظة سريعة قبل انهاء درس اليوم.
دائما اذا رأيت انك بحاجة لمعاينة الكود الذى يتم شرحه.
ضع الكود داخل ملف نصى وغير امتداده الى .html ثم افتح الملف بمتصفحك.
.
انتهى درس اليوم واتمنى ان يكون بسيط وسهل بإذن الله.
واراكم بالدروس المقبلة على خير ان شاء الله.
الى هنا انتهى النقل
من الدعم العربي التطويري
.
السلام عليكم ورحمة الله وبركاته
صياغة اكواد الـ XHTML
.
صياغة الـ XHTML هى صياغة بسيطة جدا
تعتمد فيها على العناصر Elements و الأوسمة Tags و يمكنك اضافة مزيد من الخصائص ايضا بإستخدام الـ attributes
لنبدأ بتعريف الـ Elements, و الـ tags و الـ attributes
انظر للكود التالى
<a href="http://www.dd4bb.com">الدعم العربى</a>
هذا الجزء من الكود
كود:
<a href="http://www.dd4bb.com">
هو بداية الوسم (الـ Tag)
والذى يحدد بداية العنصر Element
والجزء الأخير بالكود </a>
هو غلق الـ tag والذى يحدد نهاية الـ Element
اما هذا الجزء
href
فهو احد خصائص (attributes) هذا العنصر و href هى الخاصية المستخدمة للروابط
ونعرف قيمة هذا الـ attribute بوضع علامة = بعده, ثم وضع قيمته داخل علامتى التنصيص.
والكود بالكامل هو عبارة عن عنصر Element
عندما نتحدث عن العناصر والأوسمة والخصائص. هناك قيود (قواعد) يجب اتباعها لكتابة اكواد XHTML صحيحة وخالية من الأخطاء. (ولا تقلق اذا وجدت اى اكواد غير مألوفة اليك ولم يتم شرحها, سوف نشرح كل شئ بإذن الله فى وقته)
1.الـ XHTML تتطلب ان يتم كتابة اسم اى وسم بحروف صغيرة Small وليست حروف كبيرة Capital يعنى الوسم <p></p> وسم صحيح, لكن الوسم <P></P> وسم خاطئ.
2.كل الأوسمة يجب ان يتم غلقها بمعنى اذا بدأت وسم <a> يجب ان يتم غلقه بـ </a> اذا بدأت وسم <div> يجب ان يتم غلقه بـ </div>
الخ. مع العلم انه يوجد اوسمة تسمى self close (او إغلاق ذاتى)
وهى اوسمة صغيرة تغلق نفسها بنفسها.
كامثال على ذلك وسم <img> يغلق بهذا الشكل
<img then_image_attributes_goes_here />
لاحظ بنهاية الوسم العلامة />
والتى تعنى نهاية الوسم ومن امثلة ذلك ايضا, وسم بداية سطر جديد وهو <br />
(عمل الوسم هو لنهاية السطر الحالى, ووضع مابعده بسطر جديد)
3.جميع خصائص الأوسمة يجب ان يكون لها قيمة, ويجب ان توضع هذه القيمة داخل علامات التنصيص.
كما رأينا بأول وسم <a> كان له الخاصية href
اذا كتبت هذا الوسم بالشكل التالى
كود:
<a href=http://www.dd4bb.com>
يصبح هذا الوسم خاطئ (الخاصية هنا هى href وقيمتها هى http: //www.dd4bb.com )
لأن قيمة الخاصية يجب ان توضع داخل علامات التنصيص فتكتب بالشكل التالى
كود:
<a href="http://www.dd4bb.com">
4.ترتيب وضع العناصر يجب ان يتم ترتيبه بشكل صحيح.
لتوضيح المقصود انظر الكود التالى
كود:
<p>ما رأيك فى منتدى <a href="http://www.dd4bb.com">الدعم العربى</a> ؟</p>
تم فتح الوسم <p> اولا, وبعده جاء وسم <a> لذلك يجب ان يغلق وسم <a> اولا وبعده يغلق الوسم <p>
يعنى ماجاء اولا, يغلق بالنهاية, وماجاء بعده يغلق قبله! وهكذا.
ماذا اذا استخدمنا الكود اعلاه بالشكل التالى؟
كود:
<p>ما رأيك فى منتدى <a href="http://www.dd4bb.com">الدعم العربى</p> ؟</a>
هذا الكود خطأ 100% لأن وسم <p> تم غلقه على وسم <a> قبل وضع نهاية وسم <a>
فأصبح وسم <a> غير مغلق بالرغم من وجود وسم إغلاقه بنهاية العنصر, لكنه تم وضعها بترتيب خطأ ولذلك لا يتم التعامل معها بشكل صحيح ويتم تجاهلها,
وبذلك نكون اخترقنا القاعدة الثانية, والتى تشترط غلق كل الأوسمة, واصبح الكود لدينا كود غير سليم.
بالنسبة لمسألة الترتيب, يمكننا ان نعرفها كا علاقة اسرية.
بمعنى العنصر الكبير يكون هو الأب Parent والعنصر الذى بداخله هو الإبن Child
يعنى الكود التالى
كود:
<p><em>الدعم</em> العربى</p>
الأب به او الـ Parent هو الوسم <p>
والأبن او الـ Child هو الوسم <em>
كامعلومة اضافية لقيود صياغة اكواد الـ XHTML قبل انهاء درس اليوم.
كل عناصر الـ XTHML تنقسم الى نوعين.
اما BLOCK او INLINE
النوع الأول BLOCK هو عبارة عن عنصر يحتوى بداخله على عناصر BLOCK او INLINE اخرى. (مثل div , p و table هذه مجرد امثلة وسيتم شرح كل شئ بوقته)
والنوع الثانى INLINE لا يمكن ان يحوى بداخله الا عناصر من نفس نوعه, نصوص فقط. من امثلة عناصر هذه الفئة الوسم span والوسم a والوسم img
مما يعنى ان الكود
<div><p><span></span></p></div>
كود صحيح, حيث div و p عناصر من الفئة block
و span عنصر من الفئة inline
لكن الكود التالى
<div><span><p></p></span></div>
كود خاطئ لأن تم وضع p داخل span ومن الغير مقبول وضع عناصر الفئة block داخل عناصر الفئة Inline
وكاملحوظة سريعة قبل انهاء درس اليوم.
دائما اذا رأيت انك بحاجة لمعاينة الكود الذى يتم شرحه.
ضع الكود داخل ملف نصى وغير امتداده الى .html ثم افتح الملف بمتصفحك.
.
انتهى درس اليوم واتمنى ان يكون بسيط وسهل بإذن الله.
واراكم بالدروس المقبلة على خير ان شاء الله.
الى هنا انتهى النقل
من الدعم العربي التطويري
.