مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
🌐 مقدمة في لغة HTML (بناء صفحة ويب)
الأهداف التعليمية : في نهاية هذا الدرس يكون التلميذ قادراً على :
- تعريف لغة HTML ومعرفة أهميتها.
- التعرف على بنية مستند HTML الأساسية.
- استخدام الوسوم الأساسية (العناوين، الفقرات، الصور، الروابط).
- إنشاء صفحة ويب بسيطة باستخدام HTML.
1. ما هي لغة HTML ؟
HTML هي اختصار لـ HyperText Markup Language (لغة ترميز النص الفائق). وهي اللغة الأساسية المستخدمة في بناء صفحات الويب. تتكون HTML من مجموعة من الوسوم (Tags) التي تُستخدم لتنسيق المحتوى وعرضه في المتصفح.
ملاحظة مهمة : HTML ليست لغة برمجة بل هي لغة ترميز (Markup Language)، لأنها تصف كيفية عرض المحتوى ولا تحتوي على تعليمات شرطية أو حلقات تكرار.
2. بنية مستند HTML الأساسية
أي صفحة HTML تبدأ بالهيكل التالي :
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
محتوى الصفحة
</body>
</html>شرح الأجزاء :
- <!DOCTYPE html> : تعريف لنوع المستند (HTML5).
- <html> : العنصر الجذر الذي يحتوي كل محتوى الصفحة.
- <head> : يحتوي على معلومات عن الصفحة (العنوان، الترميز، الأنماط).
- <title> : عنوان الصفحة الذي يظهر في شريط عنوان المتصفح.
- <body> : يحتوي على المحتوى المرئي للصفحة.
3. الوسوم الأساسية في HTML
| الوسم | الوظيفة | مثال |
|---|---|---|
| <h1> إلى <h6> | العناوين (من الأكبر للأصغر) | <h1>مرحباً بالعالم</h1> |
| <p> | الفقرة | <p>هذه فقرة نصية</p> |
| <img> | إدراج صورة | <img src=”photo.jpg”> |
| <a> | رابط تشعبي | <a href=”dz-onec.com”>زيارة الموقع</a> |
| <br> | سطر جديد | <br> |
4. إنشاء صفحة ويب بسيطة (مثال تطبيقي)
لنقم بإنشاء صفحة ويب بسيطة تقدّم معلومات عن مدينة الجزائر :
<!DOCTYPE html>
<html>
<head>
<title>مدينة الجزائر</title>
</head>
<body>
<h1>مرحباً بكم في مدينة الجزائر</h1>
<p>الجزائر العاصمة هي عاصمة الجزائر وأكبر مدنها.</p>
<h2>أهم المعالم</h2>
<p>من أبرز معالمها :</p>
<ul>
<li>القصبة</li>
<li>ساحة الشهداء</li>
<li>مقام الشهيد</li>
</ul>
<p>لمزيد من المعلومات، زوروا <a href="https://dz-onec.com">موقعنا</a>.</p>
</body>
</html>✍️ تمارين
التمرين الأول : اكتب هيكل مستند HTML الأساسي.
التمرين الثاني : أنشئ صفحة HTML بسيطة تحتوي على : عنوان رئيسي، فقرة تعريفية عن نفسك، وصورة رمزية.
التمرين الثالث : ما الفرق بين الوسم <head> والوسم <body> ؟
🏠 النشاط المنزلي
أنشئ صفحة HTML تحتوي على قائمة بأسماء 5 من زملائك في الفصل، مع إضافة رابط تشعبي لكل اسم يؤدي إلى موقع ويب تعليمي تفضله.
📍 دروس مشابهة
🔗 الخوارزميات (مفهومها وتمثيلها) — الإعلام الآلي السنة الرابعة متوسط
🔗 الشبكات والإنترنت والإتصال — الإعلام الآلي السنة الثالثة متوسط
