الوسم : Tag
كل وثائق لغة ال X(HTML) تتكون من العناصر او الوسوم ومفردها الوسم وكل وسم يتكون من ثلاثة أشياء:
أولا وسم البداية : Starting Tag
يكتب الوسم في ملف التكست باد او NOTE PAD علي هيئة علامة " أصغر من " ، (<) ، ثم نكتب حرف مثل (P, B, or b)أو مجموعة من الحروف تشكل كلمة معينة ذات معني أحيانا مثل (title, body)أو ترمز لمعني معين التاج مثل (img, em, or div) تعرف باسم الوسم او TAG NAME مثل P) ) او تاج الفقرة، ثم ننهي كتابة وسم البداية بكتابة علامة " أكبر من" , ((> مثال: <p> - <html>.
ثانيا المحتويات: Tag Content
وهي النصوص او الكلام المكتوب الذي يوضع بين وسم البداية ووسم النهاية يسمي محتوي الوسم او التاج، وهي أيضا ما يظهر لزائر الموقع من خلال المتصفح.
ثالثا وسم النهاية: Ending Tag
أما تاج النهاية فلا يختلف عن تاج البداية إلا أننا نكتب علامة "شرطة مائلة للامام" "Forward Slash" وذلك بعد علامة فتح التاج وقبل كتابة اسم التاج
مثال: </p> - </html>
"معلومة خارج الدرس من الان فصاعدا سوف اقوم بتعريف او ترجمة اسم المصطلح من اللغة الانجليزية إلي العربية ولكني في الغالب سوف استخدم الاسماء الانجليزية قدر الاستطاعة واتجنب كتابتها أو نطقها باللغة العربية مرة أخري."
ملحوظة X(HTML) : يكتب الكود كما هو في HTML و XHTML . بالرغم من ان بعض الوسوم في لغة HTML مثل وسم <p> لا يفترض ان نكتب له وسم النهاية </p> علي إعتبار ان كل وسم جديد يقفل الوسم الذي قبله مباشرة. إلا انه ينصح بكتابة وسم النهاية </p>.
الوسوم ذاتية الغلق: Self Closing Tags
وهذه الانواع من الوسوم تتميز بأنها لا يوجد لها محتوي. مثال ذلك وسم الصورة img tag و br tag
وهي تحتوي علي وسم واحد هو نفسه وسم البداية ووسم النهاية
يكتب الوسم في ملف التكست باد او NOTE PAD علي هيئة علامة " أصغر من " ، < .
ثم يكتب اسم التاج وهو مثلا img او br
في حالة مثل وسم الصور قد يحتوي الوسم علي بعض الخصائص Attributes وسوف نقوم بشرحها فيما بعد في هذه الحالة تكتب الخصائص بعد كتابة اسم التاج img ونكتب مسافة بين اسم التاج والخاصية الاولي ثم مسافة بين كل خاصية واخري حسب ما يقتضيه الكود من خصائص نحتاج لوضعها في الوسم.
ثم نضغط علي زر المسطرة علي لوحة المفاتيح لنكتب مسافة ثم نكتب شرطة مائلة للامام Forward Slash
ثم ننهي كتابة وسم البداية بكتابة علامة " أكبر من" , > .
مثال ذلك:
ملحوظة X(HTML) : في ال HTML لا يلزم ان نكتب مسافة والشرطة المائلة Forward Slash قبل علامة غلق الوسم أكبر من Greater than sign لكن في XHTMLنكتب المسافة والشرطة المائلة قبل علامة أكبر من المستخدمة في غلق الوسم. إلا أنه ينصح بكتابتهم في كلا الحالتين ولن تحدث أي مشاكل.
الوسوم المتداخلة: Nesting Tags
والوسوم المتداخلة لا تعتبر فقط مقبولة ولكنها أيضا ضرورية في كثير من الاحيان ونقوم بعمل الوسوم المتداخلة بإنشاء وسم بداية ووسم نهاية ومحتوي داخل وسم بداية ونهاية ومحتوي أيضا.
مثال:
نلاحظ في هذا المثال انه هناك وسم رئيسي في تلك الجملة وهو وسم الخط العريض Bold يتوسطه او يوضع بداخلة وسم الكلمة التي يوضع تحتها خط Underline Word. الملحوظة المهمة في هذا الوسم هي انه أول وسم يتم فتحه هو أخر وسم يتم غلقة. سيتم توضيح ما اعنيه تماما بالامثلة العملية طوال التدريبات في هذه الدورة.
لكن علي سبيل المثال سندرج الأن مثال علي الخطأ الذي قد يقع فيه بعض المبتدئين في تعلم هذه اللغة.
مثال الخطأ:
خصائص الوسوم: Tag Attributes
والخاصية يتم كتابتها داخل وسم البداية ويكون الاسم الاول هو اسم الخاصية او Attribute Name ويتبعها علامة "=" ثم قيمة الخاصية Attribute Value داخل علامة الاقتباسات او " " Quotation Mark وذلك قبل علامة أكبر من والتي تستخدم لغلق الوسم. أو يكتب بعدها مسافة في حالة الوسوم ذاتية الغلق ثم تكتب الشرطة المائلة للامام وسواء كان الوسم ذاتي الغلق ام وسم يحتوي علي وسم بداية ووسم نهاية تكتب الخاصية في وسم البداية وبعد اسم الوسم بمسافة وكذلك إذا كان الوسم يحتوي علي اكثر من خاصية يراعي كتابة مسافة بين كل خاصية واخري.
بينما سنقوم فيما بعد بشرح الخواص بالتفصيل إلا انني احب ان اوضح القليل عن بعض ما يتعلق بقيم الخواص فبعض الخواص يمكن لها ان تقبل قيم غير محدودة او لا نهائية اما بعض الخواص فلها قيم محددة مسبقا في اللغة احيانا يكون لها قيمة رقمية إما (الصفر) او (الواحد الصحيح) وبعض القيم تكون عبارة ان نسبة مئوية كبعض الخواص التي تصف العرض او الطول وقد تقبل بعض الخواص حتي وضع كسور عشرية لتوضيح قيم معينة وبينما هذه القيم العشرية تدعمها بعض الخواص إلا انه هناك خواص اخري لا تدعم القيم الرقمية العشرية او الكسور فتستخدم مثلا القيم الرقمية العشرية في توضيح مثلا خاصية ارتفاع السطر. هناك ايضا قيم رقمية مختلطة كالقيم الخاصة بالالوان او بخاصية color فيمكن لنا ان نكتب قيمة اللون بإسمه مباشرة مثل red او green او yellow أما بعض الاخر من الالوان قد نكتب له قيم عشرية معينة نقوم باستخراجها من برنامج الفوتوشوب مثلا او باستخدام بعض الادوات او الملحقات التي يتم تركيبها علي المتصفحات لإستخراج القيمة الرقمية العشرية للون معين، واحيانا اخري يكون هناك مثلا عدد من الكلمات والتي ايضا كل منها يقدم وظيفة معينة ومحددة مسبقا في اللغة.
مثال:
كل وثائق لغة ال X(HTML) تتكون من العناصر او الوسوم ومفردها الوسم وكل وسم يتكون من ثلاثة أشياء:
أولا وسم البداية : Starting Tag
يكتب الوسم في ملف التكست باد او NOTE PAD علي هيئة علامة " أصغر من " ، (<) ، ثم نكتب حرف مثل (P, B, or b)أو مجموعة من الحروف تشكل كلمة معينة ذات معني أحيانا مثل (title, body)أو ترمز لمعني معين التاج مثل (img, em, or div) تعرف باسم الوسم او TAG NAME مثل P) ) او تاج الفقرة، ثم ننهي كتابة وسم البداية بكتابة علامة " أكبر من" , ((> مثال: <p> - <html>.
ثانيا المحتويات: Tag Content
وهي النصوص او الكلام المكتوب الذي يوضع بين وسم البداية ووسم النهاية يسمي محتوي الوسم او التاج، وهي أيضا ما يظهر لزائر الموقع من خلال المتصفح.
ثالثا وسم النهاية: Ending Tag
أما تاج النهاية فلا يختلف عن تاج البداية إلا أننا نكتب علامة "شرطة مائلة للامام" "Forward Slash" وذلك بعد علامة فتح التاج وقبل كتابة اسم التاج
مثال: </p> - </html>
"معلومة خارج الدرس من الان فصاعدا سوف اقوم بتعريف او ترجمة اسم المصطلح من اللغة الانجليزية إلي العربية ولكني في الغالب سوف استخدم الاسماء الانجليزية قدر الاستطاعة واتجنب كتابتها أو نطقها باللغة العربية مرة أخري."
الوسوم ذاتية الغلق: Self Closing Tags
وهذه الانواع من الوسوم تتميز بأنها لا يوجد لها محتوي. مثال ذلك وسم الصورة img tag و br tag
وهي تحتوي علي وسم واحد هو نفسه وسم البداية ووسم النهاية
يكتب الوسم في ملف التكست باد او NOTE PAD علي هيئة علامة " أصغر من " ، < .
ثم يكتب اسم التاج وهو مثلا img او br
في حالة مثل وسم الصور قد يحتوي الوسم علي بعض الخصائص Attributes وسوف نقوم بشرحها فيما بعد في هذه الحالة تكتب الخصائص بعد كتابة اسم التاج img ونكتب مسافة بين اسم التاج والخاصية الاولي ثم مسافة بين كل خاصية واخري حسب ما يقتضيه الكود من خصائص نحتاج لوضعها في الوسم.
ثم نضغط علي زر المسطرة علي لوحة المفاتيح لنكتب مسافة ثم نكتب شرطة مائلة للامام Forward Slash
ثم ننهي كتابة وسم البداية بكتابة علامة " أكبر من" , > .
مثال ذلك:
ملحوظة X(HTML) : في ال HTML لا يلزم ان نكتب مسافة والشرطة المائلة Forward Slash قبل علامة غلق الوسم أكبر من Greater than sign لكن في XHTMLنكتب المسافة والشرطة المائلة قبل علامة أكبر من المستخدمة في غلق الوسم. إلا أنه ينصح بكتابتهم في كلا الحالتين ولن تحدث أي مشاكل.
الوسوم المتداخلة: Nesting Tags
والوسوم المتداخلة لا تعتبر فقط مقبولة ولكنها أيضا ضرورية في كثير من الاحيان ونقوم بعمل الوسوم المتداخلة بإنشاء وسم بداية ووسم نهاية ومحتوي داخل وسم بداية ونهاية ومحتوي أيضا.
مثال:
Please click this link to continue
لكن علي سبيل المثال سندرج الأن مثال علي الخطأ الذي قد يقع فيه بعض المبتدئين في تعلم هذه اللغة.
مثال الخطأ:
<b>Please click <u> this link</b> to continue</u>
والخاصية يتم كتابتها داخل وسم البداية ويكون الاسم الاول هو اسم الخاصية او Attribute Name ويتبعها علامة "=" ثم قيمة الخاصية Attribute Value داخل علامة الاقتباسات او " " Quotation Mark وذلك قبل علامة أكبر من والتي تستخدم لغلق الوسم. أو يكتب بعدها مسافة في حالة الوسوم ذاتية الغلق ثم تكتب الشرطة المائلة للامام وسواء كان الوسم ذاتي الغلق ام وسم يحتوي علي وسم بداية ووسم نهاية تكتب الخاصية في وسم البداية وبعد اسم الوسم بمسافة وكذلك إذا كان الوسم يحتوي علي اكثر من خاصية يراعي كتابة مسافة بين كل خاصية واخري.
مثال:
<FONT FACE="Tahoma″ SIZE="2″>Hello World</FONT>
مثل الخاصية face وهي الخاصة بنوع الخط والتي عن طريقها نعطي قيمة لها في الوسم بإسم خط معين فيظهر تنسيق محتوي الخط منسق بنفس نوع الخط الذي وضعنا اسمه في قيمة الخاصية كما في المثال التالي
كلمة FACE و SIZE في هذا المثال يمثلان اسم الخاصية وفي وقيمتهما , و 2 Tahoma وهي تعني نوع الخط المستخدم تاهوما والرقم 2 وهو يعني حجم الخط
وبعض الخواص تساعد في توصيف الوسم او تحديده وذلك مثل خاصية class او id حيث نعطي لهم قيمة تساعدنا في تحديد وسم معين او تعريفه حتي يمكن تحديدة وإجراء تنسيقات معينة تتناسب مع صفحة الويب التي نقوم بتصميمها ويتم ذلك باستخدام لغات اخري يتم دمجها مع لغة html مثل ال css او JQuery.
مثال ذلك:
<p id="firstp">خاصية ال id تساعدنا بالمشاركة مع لغة ال css في تنسيق الفقرة الاولي من كل مقال مثلا يوضع في الصفحة.</p>
ملحوظة (X)HTML : عند كتابة القيم Values لك خاصية يجب لا يلزم ان نضعها بين علامة " " Quotation Mark في ال HTML مثال (id=firstp) لكن في ال XHTML يلزم وضع القيم بين علامة " " مثال (id="firstp") ولكن في كلتا الحالتين كتابتهم بين ال " " لن يستبب في حدوث أي مشكلة.
Block-level and Inline:
هذا العنوان من الصعب إيجاد معني حرفي له ولكنني سوف احاول شرح المعني حتي يتسني لنا معرفة الفرق بين Inline و Block-level .
العنصر او الوسم في لغة (X)HTML قد يكون Inline او Block-level . فإذا كان العنصر مثلا يعتبر Block-level فهو دائما ما سوف يظهر في سطر جديد مثل وسم الفقرة <p> او وسم الصوره <img> أما إذا كان Inline فسوف يظهر في نفس السطر المكتوب فيه الوسم تماما كأي كلمة سابقة او تالية في الفقرة التي نقرأها الأن.
عنصر Block-level يمثل العنصر الاكبر في العناصر التي تكون صفحة معينة من صفحات الانترنت ومثل هذا العنصر قد يحتوي علي عناصر اخري او وسوم اخري إما Inline أو Block-level علي العكس تماما مع وسوم ال Inline فهي لا يمكن لها ان تحتوي إلا علي وسوم ال Inline.
مثال علي الكود Inline or Block-level:
<p>
قال <i>رسول <b>الله</b> صلى <b>الله</b> عليه وسلم</i> : إذا مات إبن ادم إنقطع عمله إلا من ثلاث صدقة جارية وعلم يتنفع به وولد صالح يدعو له. صدق <i>رسول <b>الله</b> صلى <b>الله</b> عليه وسلم</i> </p> <p> حديث شريف </p> <p> © 2011 Arabic (X)HTML COURSE. </p>
يلاحظ في هذا المثال ان الوسم Block-level تم تحديدة بنوع الخط العريض في هذا الكود وهو وسم <div> and <p> لكن وسم Inline لم يتم تحديده بنوع الخط العريض وذلك لتوضيحه وهو في الكود السابق الوسوم <img>, <b> and <i>. ويظهر هذا الكود في اربع متصفحات كما يلي بالترتيب ميكروسوفت انترنت اكسبلورر وموزيلا فاير فوكس واوبرا وجوجل كروم. كل وسم Block-level يبدء سطر جديد. تماما كما في الصورة و وسم Inline في هذه الصورة هو وسم الصورة والخط المائل <i> والخط العريض <b>.
الاباء و الابناء أو الاطفال: Parents and Children
إذا كان هناك وسم رئيسي يحتوي علي وسم فرعي أخر يعتبر الوسم الرئيسي هو الوسم الاب والوسم الفرعي هو الوسم الطفل او الابن. بمعني أخر اي وسم رئيسي يحتوي علي وسم فرعي بداخلة يعتبر هذا الوسم الفرعي من الابناء أو الاحفاد وبالعكس يعتبر الوسم الرئيسي من الاباء او الأجداد. وباستطاعتك ايضا ان تكون شجرة العائلة لأي صفحة ويب والتي تظهر العلاقات الهرمية بين كل عنصر في الصفحة وتحدده بشكل فريد من نوعه علي حسب تصميم الصفحة والوسوم المستخدمة فيها.
مثال توضيحي :
في هذا الكود فقط يعتبر وسم ال <div> هو الوسم الاب لكل من وسم <img> وكذلك ووسوم <p>. وبالعكس يعتبر وسم <img> ووسوم <p> هما الابناء لوسم <div>.
كذلك أول وسم من وسوم الفقرات في هذا الكود وهو <p> يعتبر الاب لكل من الوسوم المتضمنة داخلة او الابناء وهم الوسوم <b> و <i> وبالعكس أيضا يعتبر الوسمين <b> و <i> هما الابناء لوسم <p> الاول في هذا الكود. وكذلك وسمين ال <p> و <i> يعتبران هما الوسوم الاحفاد للوسم <div> وليس الابناء.
وفهم هذه الخاصية الاباء والابناء سوف يساعدنا بالتأكيد عند دراستنا للغة CSS ولغة JavaScript وكذلك JQuery والتي يمكن ان ندمجها مع لغة (x)html لإنشاء صفحات الويب.
إذا كان هناك وسم رئيسي يحتوي علي وسم فرعي أخر يعتبر الوسم الرئيسي هو الوسم الاب والوسم الفرعي هو الوسم الطفل او الابن. بمعني أخر اي وسم رئيسي يحتوي علي وسم فرعي بداخلة يعتبر هذا الوسم الفرعي من الابناء أو الاحفاد وبالعكس يعتبر الوسم الرئيسي من الاباء او الأجداد. وباستطاعتك ايضا ان تكون شجرة العائلة لأي صفحة ويب والتي تظهر العلاقات الهرمية بين كل عنصر في الصفحة وتحدده بشكل فريد من نوعه علي حسب تصميم الصفحة والوسوم المستخدمة فيها.
مثال توضيحي :
كذلك أول وسم من وسوم الفقرات في هذا الكود وهو <p> يعتبر الاب لكل من الوسوم المتضمنة داخلة او الابناء وهم الوسوم <b> و <i> وبالعكس أيضا يعتبر الوسمين <b> و <i> هما الابناء لوسم <p> الاول في هذا الكود. وكذلك وسمين ال <p> و <i> يعتبران هما الوسوم الاحفاد للوسم <div> وليس الابناء.
وفهم هذه الخاصية الاباء والابناء سوف يساعدنا بالتأكيد عند دراستنا للغة CSS ولغة JavaScript وكذلك JQuery والتي يمكن ان ندمجها مع لغة (x)html لإنشاء صفحات الويب.
ليست هناك تعليقات:
إرسال تعليق