← العودة لمرحلة تطوير الويب
🌐الأسبوع 1 من 16

التعرف على HTML وإنشاء أول صفحة ويب

فهم أساسيات HTML وإنشاء صفحة ويب بسيطة

مدة الجلسة
45 دقيقة

🎯 أهداف التعلم

فهم مفهوم الويب

التعرف على كيفية عمل مواقع الويب

HTMLالمتصفحاتصفحات الويب

كتابة HTML أساسي

إنشاء عناصر HTML بسيطة

العناوينالفقراتالروابط

📚 الأنشطة التعليمية

🎥

كيف تعمل مواقع الويب؟

10 دقيقة • فيديو

فيديو يشرح أساسيات الويب و HTML

التعليمات:

  1. شاهد الفيديو عن كيفية عمل الويب
  2. تعرف على دور HTML في صفحات الويب
  3. فكر في المواقع التي تزورها يومياً
🎮

استكشاف CodePen

15 دقيقة • تفاعلي

تعلم استخدام محرر الويب CodePen

التعليمات:

  1. افتح موقع codepen.io
  2. أنشئ حساب جديد
  3. أنشئ "Pen" جديد
  4. تعرف على أقسام HTML و CSS و JS
  5. اكتب <h1>مرحباً</h1> في قسم HTML
💻

كتابة أول عناصر HTML

20 دقيقة • تطبيق عملي

تجربة عناصر HTML الأساسية

التعليمات:

  1. جرب عناوين مختلفة: h1, h2, h3
  2. أضف فقرة باستخدام <p>
  3. أنشئ قائمة باستخدام <ul> و <li>
  4. أضف رابط باستخدام <a>
  5. لاحظ كيف تظهر في المعاينة

🚀 المشروع العملي

صفحتي الشخصية الأولى

إنشاء صفحة ويب شخصية بسيطة باستخدام HTML

مبتدئالنتيجة المتوقعة: صفحة ويب شخصية بسيطة تعرض معلومات منظمة

خطوات التنفيذ:

1

أنشئ Pen جديد في CodePen

2

أضف عنوان رئيسي لصفحتك

<h1>مرحباً، أنا أحمد!</h1>
3

أضف عنوان فرعي عن نفسك

<h2>طالب مبرمج مبتدئ</h2>
4

اكتب فقرة تعريفية

<p>أحب تعلم البرمجة وإنشاء مواقع الويب الجميلة.</p>
5

أضف قائمة بهواياتك

<h3>هواياتي:</h3>
<ul>
  <li>البرمجة</li>
  <li>القراءة</li>
  <li>الرسم</li>
</ul>
6

أضف رابط لموقع مفضل

<a href="https://scratch.mit.edu">موقع Scratch المفضل</a>
7

أضف خط أفقي للفصل

<hr>
8

أضف رسالة ختامية

<p><strong>شكراً لزيارة صفحتي!</strong></p>

أمثلة الكود:

صفحة HTML شخصية كاملة
<h1>مرحباً، أنا أحمد!</h1>
<h2>طالب مبرمج مبتدئ</h2>

<p>أحب تعلم البرمجة وإنشاء مواقع الويب الجميلة.</p>

<h3>هواياتي:</h3>
<ul>
  <li>البرمجة</li>
  <li>القراءة</li>
  <li>الرسم</li>
</ul>

<a href="https://scratch.mit.edu">موقع Scratch المفضل</a>

<hr>

<p><strong>شكراً لزيارة صفحتي!</strong></p>

هذا الكود ينشئ صفحة ويب بسيطة تحتوي على معلومات شخصية منظمة

📝 الواجب المنزلي

توسيع الصفحة الشخصية

أضف المزيد من المحتوى لصفحتك

المدة المقترحة: 25 دقيقة

👀 نظرة على الأسبوع القادم

الأسبوع القادم سنتعلم CSS لجعل صفحاتنا جميلة وملونة!