مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
مقدمة
مرحباً بكم في درس جديد من مادة الإعلام الآلي للمرحلة المتوسطة حسب المنهاج الجزائري. في هذا الدرس، سنتناول موضوع مقدمة في لغة HTML: إنشاء صفحات الويب.
الأهداف التعليمية
- فهم مفهوم HTML.
- التعرف على بنية صفحة HTML.
- معرفة الوسوم الأساسية في HTML.
- إنشاء صفحة ويب بسيطة.
ما هي HTML؟
HTML (HyperText Markup Language) هي لغة ترميز تستخدم لإنشاء صفحات الويب. هي العمود الفقري لأي موقع ويب. تستخدم وسوماً (Tags) لتحديد بنية المحتوى مثل العناوين والفقرات والصور والروابط. يتصفح المستخدم صفحات HTML عبر متصفح الويب.
بنية صفحة HTML
صفحة HTML بسيطة تبدأ بـ <!DOCTYPE html> وتحتوي على وسوم <html> و <head> و <title> و <body>. <head> يحتوي على معلومات الصفحة والعنوان. <body> يحتوي على المحتوى المرئي للصفحة.
الوسوم الأساسية
- العناوين: <h1> إلى <h6> (h1 الأكبر، h6 الأصغر).
- الفقرات: <p> … </p>.
- الروابط: <a href=”url”>نص الرابط</a>.
- الصور: <img src=”image.jpg” alt=”وصف”>.
- القوائم: <ul> (غير مرقمة)، <ol> (مرقمة)، <li> (عنصر قائمة).
- الجداول: <table>، <tr> (صف)، <td> (خلية).
- التقسيمات: <div> لتجميع العناصر.
- التأكيد: <strong> (خط عريض)، <em> (مائل).
مثال: صفحة ويب بسيطة
<html>
<head><title>صفحتي الأولى</title></head>
<body>
<h1>مرحباً بالعالم!</h1>
<p>هذه صفحة HTML الأولى لي.</p>
<a href=”https://dz-onec.com”>زيارة موقعنا</a>
</body>
</html>
تمارين تطبيقية
- التمرين الأول: اكتب الكود HTML لصفحة تحتوي على عنوان رئيسي وفقرة.
- التمرين الثاني: أضف رابطاً وصورة إلى صفحة HTML.
- التمرين الثالث: أنشئ جدولاً بسيطاً يحتوي على صفين وعمودين.
- التمرين الرابع: اشرح معنى الوسوم: <h1>، <p>، <a>، <img>.
ملخص الدرس
HTML: لغة ترميز لإنشاء صفحات الويب. بنيتها: <html>، <head>، <body>. الوسوم الأساسية: عناوين h1-h6، فقرات p، روابط a، صور img، قوائم ul/ol. راجع درس لغات البرمجة: أنواعها واستخداماتها ودرس الخوارزميات: مفهومها وأمثلة عليها.