إليك تمارين تدريبية بلغة HTML تركز فقط على العناصر التالية:
العناوين – الفقرات – الروابط – الأزرار.

قم بمشاركة التمارين عبر منتدى تطوير المواقع الإلكترونية عبر الواتساب 

التمرين 1: صفحة تعريفية بسيطة

المطلوب:

أنشئ صفحة HTML تحتوي على:

• عنوان رئيسي: “مرحبا بكم في موقعي الشخصي”
• فقرة تقدم فيها نفسك (الاسم، العمر، الهوايات…)
• زر عند الضغط عليه يظهر تنبيه (alert) فيه عبارة “شكرًا على زيارتك”
• رابط يؤدي إلى موقعك المفضل (مثلاً: https://www.google.com)

التمرين 2: صفحة مقالة قصيرة

المطلوب:

صمم صفحة تحتوي على:

• عنوان رئيسي المقابلة (مثلاً: “أهمية التعلم الذاتي”)
• فقرتين تتحدث فيهما عن الموضوع.
• رابط لقراءة المزيد يقود إلى صفحة خارجية.
• زر بعنوان “أعجبني” (ليس من الضروري أن يعمل، فقط أدرجه بالشكل).

التمرين 3: صفحة متعددة العناوين

المطلوب:

• استخدم العناوين من <h1> إلى <h4> لعرض التسلسل التالي:

<h1>الصفحة الرئيسية</h1>
<h2>من نحن</h2>
<h3>فريق العمل</h3>
<h4>المهام اليومية</h4>

• أضف فقرة أسفل كل عنوان توضح محتواه.
• أضف رابط “اتصل بنا” في أسفل الصفحة.
• أضف زرًا بعنوان “تحميل المزيد”.

التمرين 4: أزرار وروابط

المطلوب:

• أنشئ صفحة فيها 3 أزرار:

  • زر بعنوان “الرئيسية”
  • زر بعنوان “حول”
  • زر بعنوان “الخدمات”

• أسفل الأزرار، أضف 3 روابط تؤدي إلى صفحات افتراضية (مثلاً: home.html – about.html – services.html

الأسبوع 9 — مشروع «متصفّح البلدان» (Fetch + JSON + LocalStorage)

الهدف

• استخدام fetch و async/await لجلب بيانات JSON من واجهة عامة.

• عرض النتائج ديناميكيًا (DOM)، مع حالة تحميل ومعالجة أخطاء.

• تخزين مؤقت للنتائج في localStorage لتسريع البحث.

• تطبيق تصفية وفرز وترقيم صفحات بسيط (pagination) لنتائج كثيرة.

الملفات

• index.html — الهيكل والعناصر التفاعلية

• style.css (اختياري) — تنسيقات بسيطة

• app.js — منطق الجلب والعرض والتخزين

الواجهة المقترحة

• حقل بحث عن بلد بالاسم.

• اختيار (Select) للفرز: الاسم A→Z، السكان تصاعدي/تنازلي.

• اختيار (Select) لتصفية المنطقة: كل المناطق، Africa, Asia, Europe, Americas, Oceania.

• منطقة نتائج تحتوي بطاقات: (العلم، الاسم، المنطقة، عدد السكان، العملة/اللغة إن توفرت).

• شريط ترقيم صفحات “السابق/التالي”.

خطوات التنفيذ (Step-by-Step)

1. هيكل HTML: شريط أدوات فيه input للبحث + Select للفرز + Select للتصفية + span لحالة “Loading…/Error”. أسفلها div للبطاقات، ثم شريط ترقيم صفحات.

2. مصدر البيانات: استخدم REST Countries API (لا يحتاج مفتاح):

   • للبحث بالاسم: https://restcountries.com/v3.1/name/<QUERY>?fields=name,flags,region,population,languages,currencies

   • للكل (للـ cache الأولي عند الحاجة): https://restcountries.com/v3.1/all?fields=...

3. جلب Async: اكتب دالة fetchCountries(query) تُظهر حالة التحميل، وتجلب البيانات بـ await fetch(...)، ثم await res.json().

4. معالجة الأخطاء:

   • إذا !res.ok → اعرض رسالة مناسبة (مثلاً: لم يتم العثور على نتائج).

   • try/catch لأي أخطاء شبكة.

5. العرض DOM: دالة render(countries) تبني بطاقات HTML (العلم كصورة + معلومات).

6. الفرز: دالة sortCountries(list, mode) (مثلاً بالاسم أو السكان).

7. التصفية: دالة filterByRegion(list, region) تعيد فقط بلدان تلك المنطقة.

8. الترقيم: حدّد pageSize = 12، واحتسب start/end حسب الصفحة الحالية.

9. التخزين المؤقت:

   • مفتاح تخزين مثل: "countries:<query or all>".

   • خزّن النتائج (stringify) لمدة جلسة/وقت محدد (أو احتفِظ بالطابع الزمني للتحكم لاحقًا).

   • عند البحث، إذا وجدت نتيجة محفوظة حديثة → استخدمها بدل الجلب.

10. تحسين UX:

    • Debounce للبحث (300–500ms) كي لا تُرسل طلبًا لكل ضغطة.

    • إظهار “0 نتائج” بشكل واضح.

    • زر “مسح البحث”.

معايير القبول (Acceptance)

• البحث بالاسم يعرض نتائج صحيحة (مثلاً: “morocco”, “france”).

• يمكن فرز النتائج وتصفية المنطقة وتعمل معًا بسلاسة.

• يوجد حالة تحميل مرئية ورسالة خطأ ودية عند عدم العثور/تعذر الجلب.

• الترقيم يعرض عددًا محدودًا بالصفحة مع أزرار التالي/السابق تعمل.

• LocalStorage يُستخدم لتخزين نتائج آخر بحث وتشغيلها فورًا عند تكراره.

Plus (اختياري للتفوّق)

• شارة صغيرة تُظهر “من الـ Cache” عند استخدام بيانات مخزّنة.

• نافذة منبثقة (Modal) عند النقر على البطاقة تعرض تفاصيل إضافية (العاصمة، الحدود…).

• زر “تصدير النتائج الظاهرة إلى CSV”.

كيف تختبر بسرعة؟

• جرّب البحث عن: morocco, france, united.

• بدّل “المنطقة” إلى Africa للتصفية.

• جرّب الفرز بالسكان صعودًا/هبوطًا.

• لاحظ أن البحث نفسه ثاني مرّة سيعرض “استخدمت النسخة المخزنة (Cache)”.

الأسبوع 8 — مشروع «مدير مهام بسيط» (To-Do)

الهدف: DOM + أحداث + إنشاء/حذف عناصر.

الملفات:
index.html — main.js (+ style.css اختياري)

الخطوات:

1. إدخال نص + زر “إضافة” + قائمة <ul>.

2. عند الإضافة:

   • أنشئ عنصر <li> يحتوي نص المهمة + زر “حذف”.

   • عند الضغط على <li> أضف/أزل صنف CSS (منجزة).

3. عند الضغط على “حذف” احذف العنصر.

4. خزّن المهام في مصفوفة، وحدّث العرض عند كل تغيير.

معايير القبول:

• لا تُضاف مهمة فارغة.

• التبديل بين “منجزة/غير منجزة” يعمل بوضوح.

Plus: خزّن/استرجع المهام من localStorage.

الأسبوع 7 — مشروع «مكتبة دوال صغيرة»

الهدف: الدوال بأنواعها (عادية، مجهولة، سهمية) + معاملات وقيم إرجاع.

الملفات:
index.html — main.js

الخطوات:

1. square(n) تعيد مربع رقم.

2. sumArray(arr) تعيد مجموع مصفوفة (باستخدام reduce).

3. أنشئ دالة سهمية avg = arr => sumArray(arr)/arr.length.

4. دالة مجهولة مخزنة في متغير welcome تطبع رسالة مرحبًا بالاسم.

معايير القبول:

• اختبارات سريعة لكل دالة تعرض نتائج صحيحة.

• التعامل مع مصفوفة فارغة في avg (قسمة على صفر).

Plus: أضف max(arr) وmin(arr).

الأسبوع 6 — مشروع «مدير قائمة أسماء»

الهدف: مصفوفات + map/filter + عمليات أساسية (push/pop).

الملفات:
index.html — main.js

الخطوات:

1. مصفوفة ابتدائية من 5 أسماء.

2. واجهة: إدخال اسم + زر “إضافة”، زر “حذف آخر”، إدخال حرف + زر “تصفية”.

3. “إضافة” تستعمل push()، “حذف آخر” تستعمل pop().

4. “تصفية” تُرجع أسماء تبدأ بالحرف (filter).

5. زر “تحويل لحروف كبيرة” يستخدم map().

معايير القبول:

• تحدّث القائمة على الشاشة بعد كل عملية.

• معاملة الإدخالات الفارغة بشكل صحيح.

Plus: أضف زر “فرز” بالترتيب الأبجدي.

الأسبوع 5 — مشروع «لعبة الأعداد»

الهدف: الحلقات (for/while) مع break و continue.

الملفات:
index.html — main.js

الخطوات:

1. استخدم for لطباعة الأعداد الزوجية 1–100 (اعرض داخل الصفحة).

2. لعبة تخمين: اختر رقمًا عشوائيًا 1–20 (Math.floor(Math.random()*20)+1).

3. استخدم while(true) لطلب تخمين حتى يصيب اللاعب:

   • إذا خارج النطاق → continue مع رسالة.

   • إذا صحيح → break واعرض عدد المحاولات.

   • وإلا أعطه تلميح “أكبر/أصغر”.

معايير القبول:

• عدّاد محاولات يعمل بشكل صحيح.

• لا تعليق للتطبيق عند مدخلات غير رقمية (تحقق من NaN).

Plus: حدّد حدًا أقصى للمحاولات ثم “خسرت”.

الأسبوع 4 — مشروع «نظام التقييم الأكاديمي»

الهدف: استخدام if/else و switch.

الملفات:
index.html — main.js

الخطوات:

1. إدخال علامة (0–100) + زر “احسب التقدير”.

2. بـ if/else: عُد بدرجة حرفية (A/B/C/D/F) مع رسائل.

3. حقل آخر لاسم يوم الأسبوع (مثلاً “monday”) + زر “رسالة اليوم”.

4. بـ switch: اطبع “عطلة”/“دراسة” أو رسالة مناسبة.

معايير القبول:

• التحقق من النطاق 0–100 برسالة خطأ.

• تجاهل حالة الأحرف في اليوم (toLowerCase()).

Plus: أضف ألوانًا مختلفة حسب التقدير (CSS classes).

الأسبوع 3 — مشروع «آلة حاسبة مبسّطة»

الهدف: العمليات الحسابية والمقارنات والمنطق.

الملفات:
index.html — main.js

الخطوات:

1. حقلا إدخال رقمين + أزرار (جمع/طرح/ضرب/قسمة).

2. دالة calc(op) تقرأ القيم بـ parseFloat وتطبّق العملية.

3. اعرض نتيجة العملية.

4. اعرض مقارنة بين الرقمين (> < ===) ورسالة منطقية (مثلاً: كلاهما > 10).

معايير القبول:

• منع القسمة على صفر برسالة لطيفة.

• تنسيق ناتج القسمة (مثلاً toFixed(2)).

Plus: أضف زر “جميع النتائج” يعرض النتائج الأربع معًا.

الأسبوع 2 — مشروع «محرك نصوص صغير»

الهدف: إتقان دوال النصوص (trim / toUpperCase / includes / replace …).

الملفات:
index.html — main.js (+ style.css اختياري)

الخطوات:

1. أنشئ textarea وزرين: “تشغيل المعالجة” و“إعادة الضبط”.

2. عند الضغط:

   • طبّق trim()، اعرض طول النص وعدد الكلمات (split(/\s+/)),

   • حوّل للنُسختين UPPER/lower,

   • تحقّق من وجود كلمة (includes),

   • استبدل كلمة بأخرى (replaceAll إن توفر؛ وإلا replace مع regex g).

3. اعرض النتائج ببطاقات أسفل الـ textarea.

معايير القبول:

• التعامل مع نص فارغ دون أخطاء.

• إظهار كل النتائج بوضوح.

Plus: أضف حقلين للبحث والاستبدال مع زر “استبدال الكل”.

الأسبوع 1 — مشروع «بطاقة تعريف شخصية»

الهدف: التعرّف على المتغيرات وأنواع البيانات والمخرجات والتعليقات.

الملفات:
index.html — style.css (اختياري) — main.js

الخطوات:

1. اربط main.js داخل index.html.

2. عرّف متغيرات: name, age, city (جرّب let وconst).

3. اطبع القيم في console وفي الصفحة (DOM أو document.write).

4. استخدم تعليقات سطرية ومتعددة الأسطر لشرح ما تفعل.

5. اعرض نوع كل متغير باستخدام typeof.

6. ابنِ قالب HTML صغير (بطاقة) يعرض البيانات بشكل منسق.

معايير القبول:

• تظهر البيانات داخل بطاقة.

• يظهر typeof لكل قيمة في الـ console.

• الملفّات مربوطة صحيحة (لا أخطاء في الـ console).

Plus (اختياري): أضف حقل “مهارة مفضلة” وادمجها في النص باستخدام Template Literals.