مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
HTML: مقدمة في لغة ترميز النص التشعبي
في هذا الدرس نتعرف على لغة HTML (لغة ترميز النص التشعبي) في مادة الإعلام الآلي لتلاميذ الأولى ثانوي (شعب علمية). تعتبر HTML اللغة الأساسية لبناء صفحات الويب، حيث تحدد هيكل المحتوى (عناوين، فقرات، صور، روابط، جداول) الذي يظهر للمستخدم في المتصفح، وتتكامل مع CSS لتنسيق المظهر و JavaScript لإضافة التفاعلية.
مقدمة عن HTML
- تعريف HTML: اختصار لـ HyperText Markup Language. هي لغة ترميز (وليست لغة برمجة) تستخدم لإنشاء هيكل صفحات الويب. تعتمد على الوسوم (Tags) لتعريف عناصر الصفحة.
- بنية صفحة HTML: تبدأ بـ DOCTYPE html، يليها وسم html، داخل head (معلومات الصفحة)، ثم body (محتوى الصفحة المرئي).
- الوسوم (Tags): تكتب بين قوسين زاويتين < >. معظم الوسوم تأتي زوجية (وسم فتح
ووسم إغلاق ). بعض الوسوم فردية (مثل
و).
- الخصائص (Attributes): معلومات إضافية تضاف لوسم الفتح لتحديد خصائص العنصر. مثال:
.
الوسوم الأساسية في HTML
- وسوم العناوين: من
(الأكبر) إلى
(الأصغر). مهمة لتنظيم المحتوى وتحسين محركات البحث (SEO).
- وسم الفقرة:
للنص العادي. يمكن استخدام
للإنتقال لسطر جديد داخل الفقرة. - الروابط: نص الرابط. يمكن إضافة target=”_blank” لفتح الرابط في نافذة جديدة.
- الصور:
. وسم فردي، السمة alt مهمة لضعاف البصر ولمحركات البحث.
- القوائم:
- (غير مرتبة) و
- لكل عنصر. و
- للقوائم التعريفية.
- الجداول:
تحتوي على
(صف) و (خلية عنوان) و (خلية بيانات). أمثلة تطبيقية
مثال 1: صفحة HTML بسيطة: !DOCTYPE html, html, head, title مرحباً بالعالم /title, /head, body, h1 مرحباً بالعالم /h1, p هذه أول صفحة HTML لي /p, /body, /html.✓
مثال 2: إنشاء قائمة غير مرتبة: ul, li تفاحة /li, li برتقال /li, li موز /li, /ul. تظهر كنقطة نقطة: تفاحة، برتقال، موز.✓
مثال 3: إنشاء جدول بسيط: table, border=”1″, tr, th الاسم /th, th العمر /th, /tr, tr, td أحمد /td, td 15 /td, /tr, /table.✓
تمارين وحلول
تمرين 1: اكتب كود HTML لصفحة تحتوي عنوان رئيسي (h1) بعنوان “مدرستي” وفقرة نصية تحتها، ورابط لموقع المدرسة. الحل: h1 مدرستي /h1, p مدرستي هي مؤسسة تعليمية متميزة /p, a href=”https://school.com” موقع المدرسة /a.✓
تمرين 2: أنشئ صفحة HTML تعرض صور ثلاث حيوانات مع أسمائها تحتها. الحل: لكل حيوان: img src=”cat.jpg” alt=”قطة”, p قطة /p. استخدم 3 صور مختلفة.✓
تمرين 3 (للمتفوقين): اكتب كود HTML لإنشاء جدول يضم جدول حصص أسبوعي (5 أيام، 4 حصص يومياً). الحل: table مع border=1. كل tr يمثل يوماً، كل td يمثل حصة. أضف th لعناوين الأيام والحصص.✓
نصائح للمراجعة
- HTML تحدد هيكل المحتوى فقط، التنسيق يتم باستخدام CSS
- كل صفحة HTML تحتاج إلى DOCTYPE, html, head, body كحد أدنى
- استخدم العناوين (h1 إلى h6) بالترتيب المنطقي للحصول على SEO جيد
- الوسم ضروري لدعم اللغة العربية
- حاول كتابة كود HTML نظيف ومنظم باستخدام المسافات البادئة (indentation)
- اختبر صفحتك في متصفحات مختلفة للتأكد من ظهورها بشكل صحيح
دروس مشابهة
- الخوارزميات: مقدمة في الخوارزميات والمخططات الانسيابية
- البرمجة: المتغيرات والعمليات الأساسية في بايثون
مقالات مشابهة
شاهد أيضا
اللغة الفرنسية — Les adverbes de fréquence: toujours, souvent, rarement, jamais — الثانية متوسط — المنهاج الجزائري
@/tmp/tmp7794qcu3.html
اللغة الفرنسية — La place des adverbes dans la phrase — الثالثة متوسط — المنهاج الجزائري
@/tmp/tmpkzq9utls.html
اللغة الفرنسية — Les adjectifs et pronoms indéfinis — الرابعة متوسط — المنهاج الجزائري
@/tmp/tmpk_0z_qq_.html
اللغة الفرنسية — L’accord du participe passé avec avoir — الثالثة متوسط — المنهاج الجزائري
@/tmp/tmpw4e3cufh.html
العد التنازلي لبكالوريا 202600 يوماً:15 ساعة:30 دقيقة:10 ثانيةمميّز📰 أخبار التربيةالعد التنازلي لنتائج البكالوريا 2026
من المتوقع الإعلان عن نتائج شهادة البكالوريا دورة 2026 خلال الأيام القادمة. تابعوا موقعنا لأول النتائج فور صدورها رسمياً.
🧮 احسب معدلك باك 2026 ←📚 أحدث الدروس
عرض الكل ←
- (مرتبة) مع
- لكل عنصر. و
