صراحة انا لا احبذ المقدمات الطويلة والتى تملنى انا شخصيا وتمل القارئ معى.
لأن كل ماسيذكر بالمقدمة ليس الا
ماهو الـ XHTML ومتى نشأت, و و الخ. واظن كلها معلومات لا يوجد اكثر منها فى الإنترنت.
لذلك سوف ندخل بالدورة بدون مقدمات. (لكن كاشئ بسيط قبل البدأ, ارجح لك ان يكون لديك برنامج dream weaver على جهازك)
وايضا اريدك ان تضع فى الإعتبار, ان دائما الأساسيات فى اى شئ, تكون هى
اصعب مايمكن تعلمه فى هذا الشئ. مايأتى بعدها يصبح سهل وبسيط لأنك اصبحت
تعرف الأساسيات المكونة للتركيبة الكاملة.
صياغة اكواد الـ XHTMLصياغة الـ XHTML هى صياغة بسيطة جدا
تعتمد فيها على العناصر Elements و الأوسمة Tags و يمكنك اضافة مزيد من الخصائص ايضا بإستخدام الـ attributes
لنبدأ بتعريف الـ Elements, و الـ tags و الـ attributes
انظر للكود التالى
- الكود:
-
<a href="http://www.ibfata.com">ابداع فتى</a>
هذا الجزء من الكود
- الكود:
-
<a href="http://www.ibfata.com">
هو بداية الوسم (الـ Tag)
والذى يحدد بداية العنصر Element
والجزء الأخير بالكود </a>
هو غلق الـ tag والذى يحدد نهاية الـ Element
اما هذا الجزء
href
فهو احد خصائص (attributes) هذا العنصر و href هى الخاصية المستخدمة للروابط
ونعرف قيمة هذا الـ attribute بوضع علامة = بعده, ثم وضع قيمته داخل علامتى التنصيص.
والكود بالكامل هو عبارة عن عنصر Element
عندما نتحدث عن العناصر والأوسمة والخصائص. هناك قيود (قواعد) يجب اتباعها
لكتابة اكواد XHTML صحيحة وخالية من الأخطاء. (ولا تقلق اذا وجدت اى اكواد
غير مألوفة اليك ولم يتم شرحها, سوف نشرح كل شئ بإذن الله فى وقته)
- الـ XHTML تتطلب ان يتم كتابة اسم اى وسم بحروف صغيرة Small وليست حروف كبيرة Capital يعنى الوسم <p></p> وسم صحيح, لكن الوسم <P></P> وسم خاطئ.
- كل الأوسمة يجب ان يتم غلقها بمعنى اذا بدأت وسم <a> يجب ان يتم غلقه بـ </a> اذا بدأت وسم <div> يجب ان يتم غلقه بـ </div>
الخ. مع العلم انه يوجد اوسمة تسمى self close (او إغلاق ذاتى)
وهى اوسمة صغيرة تغلق نفسها بنفسها.
كامثال على ذلك وسم <img> يغلق بهذا الشكل
- الكود:
-
<img then_image_attributes_goes_here />
لاحظ بنهاية الوسم العلامة />
والتى تعنى نهاية الوسم ومن امثلة ذلك ايضا, وسم بداية سطر جديد وهو <br />
(عمل الوسم هو لنهاية السطر الحالى, ووضع مابعده بسطر جديد)
جميع خصائص الأوسمة يجب ان يكون لها قيمة, ويجب ان توضع هذه القيمة داخل علامات التنصيص.
كما رأينا بأول وسم <a> كان له الخاصية href
اذا كتبت هذا الوسم بالشكل التالى
- الكود:
-
<a href=http://www.ibfata.com>
يصبح هذا الوسم خاطئ (الخاصية هنا هى href وقيمتها هى http: http://www.dd4bb.com )
لأن قيمة الخاصية يجب ان توضع داخل علامات التنصيص فتكتب بالشكل التالى
- الكود:
-
<a href="http://www.ibfata.com">
ترتيب وضع العناصر يجب ان يتم ترتيبه بشكل صحيح.
لتوضيح المقصود انظر الكود التالى
- الكود:
-
<p>ما رأيك فى منتدى <a href="http://www.ibfata.com">ابداع فتى</a> ؟</p>
تم فتح الوسم <p> اولا, وبعده جاء وسم <a> لذلك يجب ان يغلق وسم <a> اولا وبعده يغلق الوسم <p>
يعنى ماجاء اولا, يغلق بالنهاية, وماجاء بعده يغلق قبله! وهكذا.
ماذا اذا استخدمنا الكود اعلاه بالشكل التالى؟
- الكود:
-
<p>ما رأيك فى منتدى <a href="http://www.ibfata.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 ثم افتح الملف بمتصفحك.
انتهى درس اليوم واتمنى ان يكون بسيط وسهل بإذن الله.
واراكم بالدروس المقبلة على خير ان شاء الله.
الرئيسية
