أخبار الموقع

HTML — إنشاء صفحات الويب باستخدام لغة HTML — الإعلام الآلي — السنة الرابعة متوسط — المنهاج الجزائري

HTML (HyperText Markup Language) هي اللغة الأساسية المستخدمة في إنشاء صفحات الويب. كل موقع تتصفحه على الإنترنت مبني بلغة HTML. في هذا الدرس ستتعلم أساسيات HTML وكيفية إنشاء صفحة ويب بسيطة خاصة بك.

الأهداف التعليمية

  • أن يتعرف التلميذ على مفهوم HTML واستخداماته.
  • أن يُميز بين الوسوم (Tags) الأساسية في HTML.
  • أن ينشئ صفحة ويب بسيطة تحتوي على نصوص وصور وروابط.
  • أن يفهم بنية مستند HTML الأساسية.

الشرح المبسط

ما هي HTML؟ HTML هي اختصار لـ HyperText Markup Language (لغة ترميز النص التشعبي). هي ليست لغة برمجة بل لغة ترميز تستخدم لإنشاء هيكل ومحتوى صفحات الويب. تتكون من وسوم (Tags) تكتب بين أقواس زاوية (< >). يقرأها متصفح الويب ويعرضها بشكل منسق للمستخدم.

بنية مستند HTML الأساسي: كل صفحة HTML تبدأ بالوسم الذي يُخبر المتصفح أن هذه الصفحة مكتوبة بأحدث إصدار من HTML. ثم يأتي الوسم الذي يحيط بكل محتوى الصفحة. داخل يوجد قسمان: (الرأس) ويحتوي على معلومات عن الصفحة مثل العنوان، و (الجسم) ويحتوي على المحتوى الذي يظهر في المتصفح.

الوسوم الأساسية: الوسوم الأكثر استخداماً:

إلى

للعناوين (h1 الأكبر، h6 الأصغر)،

للفقرات النصية، للروابط التشعبية، للصور،

    و

      للقوائم،

      للجداول،

      و لتقسيم الصفحة. معظم الوسوم تأتي في شكل زوج: المحتوى باستثناء بعض الوسوم الفردية مثل
      و و


      .

      إنشاء صفحة ويب بسيطة: يمكن لأي شخص إنشاء صفحة HTML باستخدام أي محرر نصوص (مثل Notepad في Windows أو gedit في Linux). الخطوات: افتح محرر النصوص، اكتب بنية HTML الأساسية، أضف المحتوى داخل ، احفظ الملف بامتداد .html (مثل: صفحتي.html)، ثم افتح الملف بأي متصفح ويب لترى النتيجة.

      الروابط والصور: لإنشاء رابط، نستخدم نص الرابط. لإضافة صورة، نستخدم وصف الصورة. السمة “alt” مهمة لتحسين محركات البحث ولذوي الاحتياجات الخاصة. السمة “src” تحدد مسار الصورة سواء كانت على الإنترنت أو في نفس المجلد.

      أمثلة محلولة

      المثال 1: اكتب كود HTML لصفحة بعنوان “مرحباً بكم” تحتوي على فقرة ترحيبية.

      <!DOCTYPE html>
      <html>
      <head><title>مرحباً بكم</title></head>
      <body>
      <h1>مرحباً بكم في موقعي</h1>
      <p>هذه أول صفحة HTML لي. أتعلم كيفية إنشاء صفحات الويب.</p>
      </body>
      </html>

      المثال 2: كيف تضيف رابطاً إلى صفحة Google؟

      <a href=”https://www.google.com”>اذهب إلى Google</a>

      تمارين تطبيقية

      1. ما الفرق بين الوسم <h1> والوسم <h6>؟
      2. اكتب كود HTML ينشئ صفحة تحتوي على عنوان رئيسي وفقرة وصفية ورابط.
      3. أكمل: الوسم <____> يستخدم لإضافة الصور، والوسم <____> لإضافة روابط.
      4. ما دور السمة “alt” في الوسم <img>؟
      5. أنشئ صفحة HTML تحتوي على قائمة من ثلاث مواد دراسية مفضلة لديك.

      نشاط منزلي

      أنشئ صفحة HTML بسيطة عن نفسك. يجب أن تحتوي على: عنوان رئيسي باسمك، فقرة تعريفية عن نفسك، قائمة بهواياتك، رابط إلى موقع مدرستك، وصورة (يمكنك استخدام رابط صورة من الإنترنت). احفظ الملف وافتحه في المتصفح لتتأكد من عمله.


      ◆ دروس مشابهة

      شاهد أيضا

      التربية العلمية والتكنولوجية — الضوء وخصائصه (انعكاس وانكسار الضوء) — السنة الخامسة ابتدائي — المنهاج الجزائري

      التربية العلمية والتكنولوجية — الضوء وخصائصه (انعكاس وانكسار الضوء) — السنة الخامسة ابتدائي — المنهاج …

      التربية العلمية والتكنولوجية — الحيوانات وبيئاتها (كيف تعيش الحيوانات) — السنة الأولى ابتدائي — المنهاج الجزائري

      التربية العلمية والتكنولوجية — الحيوانات وبيئاتها (كيف تعيش الحيوانات في بيئات مختلفة) — السنة الأولى …

      اللغة العربية — نص قرائي: فضل العلم (نص إرشادي) — السنة الخامسة ابتدائي — المنهاج الجزائري

      اللغة العربية — نص قرائي: فضل العلم (نص إرشادي) — السنة الخامسة ابتدائي — المنهاج …

      اللغة العربية — نص قرائي: مدرستي الجميلة (نص تربوي) — السنة الرابعة ابتدائي — المنهاج الجزائري

      اللغة العربية — نص قرائي: مدرستي الجميلة (نص تربوي) — السنة الرابعة ابتدائي — المنهاج …

      اترك تعليقاً

      لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *