حل الوحدة الثالثة البرمجة باستخدام لغة ترميز النص التشعبي HTML تقنية رقمية 1
عرفنا سابقا البرمجة و أنواعها و طبقنا على عدد من لغات البرمجة بالكائنات مثل سكراتش هناك لغات برمجة اخرى لا تتم البرمجة فيها من خلال السحب و الإفلات للبنات البرمجية بل من خلال كتابة التعلميات البرمجية و سنتعرف على أحدها في هذه الوحدة
في هذه الوحدة سنقوم بكتابة التعليمات البرمجية بلغة ترميز النص التشعبي (HTML) و المخصصة لتصميم صفحات و مواقع الويب
صفحة الويب
صفحة الويب هي ملف منظم يحتوي على نصوص وصور و وسائط متعددة أخرى ، و كذلك الارتباطات التشعبية يتم عرضها جميعها باستخدام متصفح الويب
موقع الويب
يتكون موقع الويب من مجموعة من الصفحات المترابطة التي يمكن العثور عليها في نفس المجال ( domain ) يحتوي موقع الويب عادة على صفحة بداية تسمى الصفحة الرئيسة التي يمكن للزائر من خلالها الانتقال إلى جميع الصفحات الاخرى . يمكن ان تحتوي صفحة الويب على روابط لصفحات ويب في نفس الموقع أو إلى صفحات في مواقع أخرى
يحتوي المظهر الخاص بموقع الويب على ثلاثة أجزاء مختلفة :
العنوان : يتضمن ترويسة رسومية و شريط التنقل
محتوى الصفحة : و يشمل محتوى النص و الصور وما إلى ذلك
التذييل : يحتوي على روابط مفيدة
ما لغة ترميز النص التشعبي (HTML) ؟
هي لغة برمجة تستخدم لوصف مكونات صفحات الويب لبرامج التصفح من خلال استخدام مجموعة وسوم و التعليمات برمجية يمكن من خلال هذه الوسوم و التعليمات البرمجية تحديد طريقة عرض النصوص و الصور و لورابط و غير ذلك من مكونات صفحة الويب بشكل صحيح في متصفح الويب
| سلبيات HTML | إيجابيات HTML |
1- يقتصر استخدامها على صفحات الويب غير التفاعلية 2- يجب كتابة برنامج لإنشاء صفحة ويب يسيرة 3- يصعب صيانة و تصحيح برنامج بتنسيق HTML | 1- شائعة الاستخدام 2- مدعومة من معظم المتصفحات 3- يمكن تعلمها و كذلك استخدامها بسهولة |
النص التشعبي
هو نص يتم عرضه على شاشة الحاسب أو أي جهاز إلكتروني آخر يحتوي على مرجعيات ( ارتباطات تشعبية ) لنصوص أخرى يمكن للقارئ الوصول إليها بصورة فورية
العلامات
يشير مصطلح العلامات إلى سلسلة الاحرف او الرموز الاخرى التي يمكننا إدراجها في مواقع محددة داخل نص أو داخل ملف معالجة نصوص .يتم الامر لتحديد التنسيقات الخاصة بمظهر الملف ( غامق ، مائل ، مسطر ، … ) عند طباعته أو عرضه أو لوصف البنية المنطقية للمستند
لنطبق معا
تدريب 1
السؤال : حدد و أصلح الأخطاء في البرنامج التالي :
< DOCTYPE html!> html dir = rtl Lang = ar < head > <title /> title page title < / meta charset = UTF-8> < head / > < body > < hl/> هذا عنوان < hl> <p /> هذه فقرة < p> < html /> < DOCTYPE html!> html dir = rtl Lang = ar <title /> title page title < / meta charset = UTF-8> < head / > < body > < hl/> هذا عنوان < hl> <p /> هذه فقرة < p> < html /> |
بنية المحتوى
القوائم
هناك نوعان من القوائم المستخدمة في مواقع الويب :
قائمة مرتبة ( Ordered List ) : في هذه القائمة ، يتم اتباع تسلسل رقمي بحيث يتم ترقيم كل عنصر في القائمة
قائمة غير مرتبة ( Unordered List ) : يتم تمييز عناصر هذه القائمة بتعداد نقطي
القائمة المرتبة ( Ordered List )
يتم إنشاء القائمة المرتبة استخدام وسم < ol> حيث يتم وضع كل عنصر في هذه القائمة بين وسم الفتح < li > < li/ >
لنلق نظرة على المثال التالي :
< DOCTYPE html!> dir = rtl lang = ar> < head > < title Examples > < head / > < body > < hl/> ألعاب جماعية < hl> < ol > < li/> كرة القدم
< li/> كرة اليد
< li/> كريكيت
|
لنطبق معا
تدريب 1
السؤال : حدد و أصلح الاخطاء في البرنامج التالي
الجواب :
< DOCTYPE html> dir = rtl lang = ar> < head > < title Examples > < head / > < body > < hl/> المواد الدراسية < hl> < ul > < li/> الرياضيات < li > < li/>اللغة العربية < li > < li/> التاريخ < li > < html /> |
تدريب 2
أنشئ صفحة ويب تتكون من قائمة غير منسقة بعنوان البريد الإلكتروني للأصدقاء تتضمن هذه الصفحة عناوين البريد الإلكتروني لأصدقائك ويتم فتح تطبيق البريد الإلكتروني في علامة تبويب مختلفة و ذلك عند الضغط على أحد هذه العناوين
< DOCTYPE html!> dir = rtl lang = ar> < head > < title Examples > < head / > < body > < hl/> البريد الإلكتروني < hl> < ul >  < li/>اللغة العربية < li > < li/> التاريخ < li > < ul > < html /> |
تدريب3
1- انشئ قائمة عناصر مرتبة تتكون من 3 روابط لمواقع مختلفة يفتح كل منها في نافذة جديدة
2- انشئ قائمة باطعمتك المفضلة
3- اعرض صورة بحيث يتم فتح صفحة ويب لمحرك بحث من اختيارك ( مع مراعاة ان يفتح في نافذة جديدة ) و ذلك عند الغلط على تلك الصورة
< DOCTYPE html!> dir = rtl lang = ar> < head > < title Examples > < head / > < body > < ol >  < ol > < hl/> الاطعمة المفضلة < hl> < ul> < li/ > الحمص < li>  < li/>الطعام < li > < li/> الطعام < li > < li/> الطعام < li > < ul > < html /> |