مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
HTML ولغات الويب: أساسيات إنشاء صفحات الويب
أهداف الدرس:
- التعرف على مفهوم لغة HTML وبنية صفحة الويب
- تمييز الوسوم الأساسية (Tags) واستخداماتها
- إنشاء صفحة ويب بسيطة بلغة HTML
- فهم العلاقة بين HTML و CSS و JavaScript
أولاً: مفهوم HTML
HTML (HyperText Markup Language) هي لغة وصفية تستخدم لإنشاء وتصميم صفحات الويب. ليست لغة برمجة بل لغة ترميز (Markup Language) تحدد بنية المحتوى وعناصره. يتم تفسيرها من قبل متصفحات الويب (Chrome, Firefox, Edge).
ثانياً: بنية مستند HTML الأساسي
يتكون أي مستند HTML من الهيكل التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحباً بالعالم</h1>
<p>هذه فقرة نصية.</p>
</body>
</html>
ثالثاً: الوسوم الأساسية (Basic Tags)
- عناوين: <h1> إلى <h6> (الأكبر h1 إلى الأصغر h6).
- فقرة: <p> النص </p>.
- روابط: <a href=”URL”> نص الرابط </a>.
- صور: <img src=”image.jpg” alt=”وصف الصورة”>.
- قوائم:
- غير مرتبة: <ul> <li> عنصر </li> </ul>
- مرتبة: <ol> <li> عنصر </li> </ol>
- جداول: <table> (صفوف <tr>، خلايا <td>).
- وسوم تنسيق: <b> عريض </b>، <i> مائل </i>.
رابعاً: العلاقة بين HTML و CSS و JavaScript
- HTML: الهيكل والمحتوى (Structure).
- CSS: التنسيق والمظهر (Presentation) — ألوان، خطوط، تخطيط.
- JavaScript: السلوك والتفاعل (Behavior) — حركة، استجابة للأحداث.
مثال دمج CSS مع HTML:
<p style="color: blue; font-size: 18px;">نص أزرق</p>
تمارين بكالوريا محلولة
التمرين 01: اكتب كود HTML ينشئ صفحة ويب تحتوي على عنوان رئيسي “مرحباً بكم في موقعي” وفقرة نصية ورابط لصفحة أخرى.
الحل:
<!DOCTYPE html> <html> <head> <title>موقعي</title> </head> <body> <h1>مرحباً بكم في موقعي</h1> <p>هذه صفحتي الأولى على الويب.</p> <a href="https://dz-onec.com">اضغط هنا لزيارة الموقع</a> </body> </html>
التمرين 02: ما الفرق بين الوسم <ul> والوسم <ol>؟ أعط مثالاً لكل منهما.
الحل: <ul> ينشئ قائمة غير مرتبة (نقطية)، أمثلة: قائمة المشتريات، قائمة الهوايات. <ol> ينشئ قائمة مرتبة (مرقمة)، أمثلة: خطوات تشغيل جهاز، ترتيب الأولويات. القائمة غير المرتبة تصلح لعناصر لا يتطلب ترتيبها الدقة، والقائمة المرتبة تصلح للتسلسل المنطقي.