الخميس، 1 نوفمبر 2012
1- الوسوم Les balises
ا - وسوم ثنائية Les balises en paires
ب - وسوم فردية Les balises orphelines
2- هل < DOCTYPE html! > وسم أو لا
3- التعليقات
4- تحميل الدرس بصيغة PDF
1- الوسوم Les balises
جميع الوسوم التي نستخدمها لا تظهر للمستخدمين ومتصفحي صفحاتنا ومواقعنا لأن المتصفح يترجمها ويعرض نتيجتها على شاشة المستخدم , فهي مرئية فقط بالنسبة لنا نحن بصفتنا المطورين ومصممي الموقع . يمكن أن نشبه الوسوم في لغة "الهتمل" بالكلمات في اللغات الانسانية , أي أن كل وسم له معناه الخاص وطريقة كتابته والمواضع التي يمكننا استخدامه فيها , جميع الوسوم في html5 تبدأ بمعكوفة < مفتوحة وتنتهي بأخرى مغلقة > ... "Les chevrons" .
وهناك نوعين أساسين من الوسوم :
ا - وسوم ثنائية Les balises en paires : وهي تلك التي تستخدم وسم للبداية وآخر للنهاية حيث <وسم> بهذه الطريقة هو وسم البداية وبهذه لطريقة </وسم> هو وسم الإغلاق وفي الكود الذي استخدمناه في الدرس الماضي كانت لدينا الكثير من تلك الوسوم .
مثال :
<titre> عنوان الصفحة </titre>
في المثال السابق استخدمنا كلمة <titre> التي يفهم المتصفح من خلالها أننا نريد كتابة عنوان وهذا الوسم مصنف في اللغة على أن مكانه في أعلى الصفحة وليس في جسم الصفحة وأنه وسم ثنائي ايضا أي أنه يحتاج لوسم اغلاق وهو <titre/> .. وكما قلنا سابقا فكل وسم له معنى يدل على مكانه وطريقة استخدامه . هناك أيضا وسم ثنائي استخدمناه في صفحتنا في الدرس السابق وهو
<head> </head>
هذا الوسم مخصص ليضم كل الوسوم والأوامر المكونة لرأس الصفحة وخصائصها وكل مايوجد داخله لا يظهر في جسم الصفحة . وفي كود صفحتنا السابقة أيضا كان لدينا قطعة كهذه :
<head>
<title>عنوان الموقع</title>
</head>الترتيب هنا مهم جدا وأي خلل به يؤدي إلى خطأ في صفحتنا أو عدم فهم المتصفح لما نريده منه , وسم <head> يُفتح قبل الشروع في كتابة عنوان الصفحة ويغلق بعد كتابة العنوان , أي أن وسم فتح وإغلاق <titre> محتوى كليا في <head> وكذالك أيضا وبنفس التراتبية والمنطق فإن وسم الصفحة الرئيسي وهو <html> و <html/> يحتوي كل الوسوم الأخرى أي وسم رأس الصفحة <head> ووسم جسم الصفحة <body> وكل منهما وسم ثنائي أي أنهما يحتاجان أيضا لوسم إغلاق , الصورة التالية قد تساعدنا في الفهم
الصفحة مكونة من رأس وجسم وكل منهما له وسم خاص به , وصفحاتنا ومواقعنا يحب أن تبدأ بوسم html مفتوح وتنتهي بآخر مغلق ... وكحال الرسائل التي نتبادلها بيننا في الحياة الاجتماعية فهي تبدأ عادة بـ "بسم لله الرحمن الرحيم" وتنتهي بـ "أستودعكم الله" .. يمكن أيضا فهم الوسم الأساسي لصفحاتنا ومواقعنا بهذه الطريقة حيث الرسالة هنا موجهة للمتصفح :
<html> تعني البسملة وبداية محتوى وخصائص صفحتنا و <html/> تعني أن الكود انتهي .
ب - وسوم فردية Les balises orphelines : وهي التي تفتح وتغلق في نفس الوسم , ومن أشهر الأمثلة عليها هو وسم الصور الذي يمكننا من عرض الصور في مواقعنا , ويتم استخدامه الوسم كالتالي :
<img src="عنوان الصورة.jpg" />
حيث عنوان الصورة هو مكان حفظ الصورة في الجهاز أو رابطها على الإنترنت .
2- هل < DOCTYPE html! > وسم أو لا : ليس وسما لسبب بسيط وهو أنه لايحترم قواعد كتابة الوسوم فهو يبدأ بعلامة تعجب , وقد قلنا في الدرس السابق أن الغرض منه هو إخبار المتصفح باصدار لغة الهتمل التي نستخدمها .
3- التعليقات
كل مانكتبه في صفحتنا من أكواد أو نصوص يتم ترجمتها وقراءتها من قبل المتصفح , لكن عندما نبدأ بتصميم وبرمجة مواقع كبيرة فإن الأمر سيحتاج منا لمئات السطور البرمجية والوسوم وغيرها , وقد نجد صعوبة في فهمها عندما نعود لقرءتها لاحقا , ولذالك بإمكاننا أن نضيف تعليقات تساعدنا في حفظ دور كل مقطوعة برمجية مكونة لصفحاتنا ومواقعنا, وأيضا عندما نقدم الكود لشخص آخر قد يعتمد على التعليقات الجانبية ليفهم أكثر طبيعة الكود . هذه التعاليق لايتم ترجمتها من قبل المتصفح ولا يعرضها أيضا في جسم الصفحة إنما يتركها كما هي في مكانها متاحة فقط عندما نقوم باستعراض كود الصفحة ويتم صياغتها كالتالي :
<!-- نقوم بكتابة التعليق هنا -->
وبالتالي الصفحة التي قمنا بكتابتها في الدرس الماضي يمكن أن نزيدها بالأوامر التي تعلمناها من خلال هذا الدرس لتصبح كالتالي :
<!DOCTYPE html><html><!-- بداية رأس الصفحة -->
<head>
<title>عنوان الموقع </title></head ><!-- نهاية رأس الصفحة -->
<body>
<!-- هنا نكتب مكونات صفحتنا -->
<img src="شعار الصفحة.jpg" />
محتوى الموقع
</body>
</html>
4- تحميل الدرس بصيغة PDF
هنا نكون قد أنهينا الدرس الثاني من هذه الدورة , في الدرس القادم ان شاء لله سوف نغوص أكثر في الوسوم ونتعلم كيفية إضافة صورة والتحكم في إعداداتها وخصائصها .
ليست هناك تعليقات:
إرسال تعليق