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

📚 بطاقة الدرس

المادة: الإعلام الآلي | المستوى: السنة الرابعة متوسط | الوحدة: الإنترنت وتصميم صفحات الويب | الدرس: إنشاء صفحة ويب بلغة HTML

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

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

📖 تمهيد

في عصر الإنترنت، أصبحت مواقع الويب جزءاً من حياتنا اليومية. هل تساءلت يوماً كيف تُبنى هذه المواقع؟ السر يكمن في لغة تسمى HTML. إنها اللغة التي يفهمها المتصفح (Chrome, Firefox) ليعرض الصفحات التي تراها. في هذا الدرس، ستتعلم أساسيات HTML وستنشئ أول صفحة ويب لك!

📖 شرح الدرس

أولاً: ما هي HTML؟

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

معلومة: اخترع تيم بيرنرز لي لغة HTML في عام 1991 عندما كان يعمل في المنظمة الأوروبية للأبحاث النووية (CERN).

ثانياً: هيكل صفحة HTML الأساسي

كل صفحة HTML تبدأ بهذا الهيكل الأساسي:

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

ثالثاً: أهم الوسوم في HTML

الوسم	الوظيفة	مثال
h1 إلى h6	عناوين (الأكبر h1)	<h1>عنوان رئيسي</h1>
p	فقرة نصية	<p>نص الفقرة</p>
a	رابط تشعبي	<a href=”url”>نص الرابط</a>
img	صورة	<img src=”image.jpg”>
ul / ol	قوائم (غير مرقمة/مرقمة)	<ul><li>عنصر</li></ul>
br	سطر جديد	نص <br> سطر جديد

رابعاً: شرح الوسوم الأساسية

1. العناوين (Headings): تستخدم لعرض العناوين الرئيسية والفرعية.

<h1>عنوان رئيسي (الأكبر)</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>

2. الفقرات (Paragraphs): تستخدم لعرض النصوص.

<p>هذا نص فقرة كاملة. يمكن أن يكتب فيها عدة جمل.</p>

3. الروابط (Links): تستخدم للتنقل بين الصفحات.

<a href="https://dz-onec.com">زيارة موقعنا</a>

4. الصور (Images): تستخدم لعرض الصور.

<img src="صورة.jpg" alt="وصف الصورة" width="300">

5. القوائم (Lists): لعرض العناصر على شكل قائمة.

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
</ul>

<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
</ol>

خامساً: صفحة ويب كاملة — نموذج تطبيقي

<!DOCTYPE html>
<html>
<head>
  <title>مدرستي</title>
</head>
<body>
  <h1>مرحباً بمدرستي</h1>
  <p>مدرستي هي أفضل مدرسة في المدينة.</p>
  
  <h2>موادي المفضلة</h2>
  <ul>
    <li>الرياضيات</li>
    <li>الإعلام الآلي</li>
    <li>اللغة الإنجليزية</li>
  </ul>
  
  <p>لمزيد من المعلومات:</p>
  <a href="https://dz-onec.com">موقع المدرسة</a>
</body>
</html>

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

التمرين 1:

أكمل الجدول التالي بكتابة الوسم الصحيح:

الوظيفة	الوسم
عنوان رئيسي	<___>
فقرة	<___>
رابط	<___>
صورة	<___>

التمرين 2:

ما الخطأ في الوسم التالي: <img=”photo.jpg”>

التمرين 3:

اكتب كود HTML لصفحة بسيطة تحتوي على عنوان رئيسي “أهلاً بالعالم” وفقرة نصية وقائمة من ثلاثة عناصر.

🏠 النشاط المنزلي

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

📌 خلاصة الدرس

HTML هي لغة ترميز لإنشاء صفحات الويب.
تتكون من وسوم (tags) يكتب معظمها بشكل زوجي (افتتاحي وختامي).
الهيكل الأساسي: doctype + html + head + body.
أهم الوسوم: h1-h6 (عناوين)، p (فقرات)، a (روابط)، img (صور)، ul/ol (قوائم).
لعرض الصفحة، نفتح ملف HTML في أي متصفح ويب.