تعلم الـ XHTML من الصفر.

صراحة انا لا احبذ المقدمات الطويلة والتى تملنى انا شخصيا وتمل القارئ معى.

لأن كل ماسيذكر بالمقدمة ليس الا
ماهو الـ XHTML ومتى نشأت, و و الخ. واظن كلها معلومات لا يوجد اكثر منها فى الإنترنت.

لذلك سوف ندخل بالدورة بدون مقدمات. (لكن كاشئ بسيط قبل البدأ, ارجح لك ان يكون لديك برنامج dream weaver على جهازك)

وايضا اريدك ان تضع فى الإعتبار, ان دائما الأساسيات فى اى شئ, تكون هى اصعب مايمكن تعلمه فى هذا الشئ. مايأتى بعدها يصبح سهل وبسيط لأنك اصبحت تعرف الأساسيات المكونة للتركيبة الكاملة.



صياغة الـ XHTML هى صياغة بسيطة جدا

تعتمد فيها على العناصر Elements و الأوسمة Tags و يمكنك اضافة مزيد من الخصائص ايضا بإستخدام الـ attributes

لنبدأ بتعريف الـ Elements, و الـ tags و الـ attributes

انظر للكود التالى


هذا الجزء من الكود

هو بداية الوسم (الـ 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

يعنى الكود التالى

الأب به او الـ Parent هو الوسم <p>
والأبن او الـ Child هو الوسم <em>


كامعلومة اضافية لقيود صياغة اكواد الـ XHTML قبل انهاء درس اليوم.

كل عناصر الـ XTHML تنقسم الى نوعين.

اما BLOCK او INLINE

النوع الأول BLOCK هو عبارة عن عنصر يحتوى بداخله على عناصر BLOCK او INLINE اخرى. (مثل div , p و table هذه مجرد امثلة وسيتم شرح كل شئ بوقته)

والنوع الثانى INLINE لا يمكن ان يحوى بداخله الا عناصر من نفس نوعه, نصوص فقط. من امثلة عناصر هذه الفئة الوسم span والوسم a والوسم img

مما يعنى ان الكود

كود صحيح, حيث div و p عناصر من الفئة block
و span عنصر من الفئة inline
لكن الكود التالى

كود خاطئ لأن تم وضع p داخل span ومن الغير مقبول وضع عناصر الفئة block داخل عناصر الفئة Inline

وكاملحوظة سريعة قبل انهاء درس اليوم.
دائما اذا رأيت انك بحاجة لمعاينة الكود الذى يتم شرحه.
ضع الكود داخل ملف نصى وغير امتداده الى .html ثم افتح الملف بمتصفحك.
انتهى درس اليوم واتمنى ان يكون بسيط وسهل بإذن الله.

واراكم بالدروس المقبلة على خير ان شاء الله.