فئة HTML/CSS - تفصيل الدرس الأول

الدرس 1: مراجعة HTML الأساسية ومقدمة لعناصر HTML المتقدمة

موضوعي:

• تحديث علامات HTML الأساسية.
• تقديم عناصر HTML للمستوى المتوسط ​​لإنشاء صفحات ويب أكثر وظيفية.

1. مقدمة إلى بنية HTML

ابدأ بشرح موجز لكيفية تنظيم HTML لمحتوى صفحة الويب باستخدام العلامات. التأكيد على أن HTML (لغة ترميز النص التشعبي) يتم استخدامه لتنظيم صفحات الويب، بينما يتم استخدام CSS للتصميم.

المفاهيم الأساسية التي يجب مراجعتها:

• ، ، : اشرح أن كل مستند HTML له بنية محددة:
  • : العنصر الجذري الذي يشمل صفحة الويب بأكملها.
  • : يحتوي على معلومات وصفية مثل العنوان وروابط CSS والبرامج النصية وما إلى ذلك.
  • : يحتوي على كافة المحتويات المرئية، مثل النصوص والصور والعناصر التي يتفاعل معها المستخدمون.

2. ملخص علامات HTML الأساسية

• العناوين (

  إلى

  ):

  اشرح أن العناوين تنظم المحتوى بشكل هرمي، من الأكبر (

  ) إلى الأصغر (

  ).

مثال:

    
Main Heading
    
Sub Heading

• الفقرات (

  ):

  تستخدم لتحديد كتل النص أو الفقرات.

مثال:

    
This is a paragraph.

• المثبتات (Click here
  • الصور (): تستخدم لعرض الصور. اشرح سمة src للارتباط بملف الصورة وalt لسهولة الوصول.

  مثال:
  

  3. مقدمة إلى عناصر HTML المتوسطة

  3.1. النماذج (

  ، ، )

  • تُستخدم النماذج لجمع مدخلات المستخدم.

  • هيكل النموذج الأساسي:

    • :
      حاوية لعناصر النموذج. يمكن أن تتضمن سمات مثل الإجراء (حيث يتم إرسال بيانات النموذج) والطريقة (GET/POST).
    • : يحدد تسمية لعناصر الإدخال ويحسن إمكانية الوصول.
    • : يحدد أنواعًا مختلفة من حقول الإدخال مثل النص وكلمة المرور ومربع الاختيار والراديو وما إلى ذلك.

  مثال لنموذج بسيط مع إدخال النص:
  

  Name: Email:

  3.2. القوائم (

  ،
  ،
  1. )
  • القوائم المرتبة (
    )
    والقوائم المرتبة (
    ) تساعد في تنظيم البيانات في نقاط نقطية أو قوائم مرقمة.
  • عناصر القائمة (
  • ) تحدد كل عنصر في القائمة.
  مثال لقائمة غير مرتبة ومرتبة:

  
  

  • العنصر 1
  • البند 2
  1. الخطوة 1
  2. الخطوة 2
  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. الجداول (

  ، ،

  ،

  ) الجداول تسمح بعرض البيانات المنظمة في الصفوف والأعمدة. : حاوية الجدول. : يحدد صفًا في الجدول. الجدول> Item 1 Item 2 Step 1 Step 2 4. الأنشطة الصفية 4.1. خلاصة النشاط: كلف الطلاب بإنشاء صفحة ويب أساسية تتضمن: عنوان ( ) فقرة ( ) صورة () مثال: مرحبًا بك في موقع الويب الخاص بي هذه هي صفحتي الأولى على الويب. Item 1 Item 2 Step 1 Step 2 4.2. التمرين الموجه: إنشاء نموذج بسيط: قم بتوجيه الطلاب خلال إنشاء نموذج بسيط لجمع مدخلات المستخدم (الاسم والبريد الإلكتروني). تضمين ، و، و. 4.3. القوائم والجداول: كلف الطلاب بإنشاء قائمة غير مرتبة ( ) للأشياء المفضلة لديهم وجدول بسيط يحتوي على بضعة صفوف من البيانات (الاسم والعمر واللون المفضل). مثال: القراءة الترميز السفر الجدول> Item 1 Item 2 Step 1 Step 2 5. العمل في المنزل يجب على الطلاب توسيع صفحة الويب الخاصة بهم عن طريق: إضافة عناصر النموذج مثل مربعات الاختيار وأزرار الاختيار وزر الإرسال. تخصيص النموذج لجمع معلومات إضافية للمستخدم (مثل الجنس والهوايات). مثال: الجنس:ذكرأنثى النموذج> Item 1 Item 2 Step 1 Step 2 6. نصائح إضافية تشجيع الطلاب على التحقق من صحة لغة HTML الخاصة بهم باستخدام أدوات مثل خدمة التحقق من صحة العلامات W3C. شرح أهمية HTML الدلالي وسبب أهمية استخدام العلامات الصحيحة لإمكانية الوصول وتحسين محركات البحث. ملخص سيقوم الطلاب بمراجعة علامات HTML الأساسية مثل العناوين والفقرات والصور والروابط. سيتم تعريفهم بعناصر HTML ذات المستوى المتوسط: النماذج، والقوائم، والجداول. ستمنحهم التمارين العملية والواجبات المنزلية خبرة عملية في إنشاء صفحة ويب أكثر تنظيماً. : يحدد خلية في الجدول. : تحديد خلية رأسية في الجدول (اختياري). مثال لجدول بسيط: الاسم العمر جون 25 الاسم العمر أليس 30