دورة HTML: بناء صفحات الويب من الصفر

دورة HTML عربية مجانية للمبتدئين: تعلّم بناء صفحات الويب من الصفر بأمثلة عملية ومحرر أكواد تفاعلي، من أول وسم حتى مرجع شامل لوسوم HTML5.

📚 8 درسًا 🧩 61 موضوعًا تعليميًا 🎯 المستوى: مبتدئ
ابدأ التعلّم الآن ↓ ✓ الدورة مجانية بالكامل

بصفتي مبرمجًا ومعلّم حاسب، أقولها بثقة: HTML هي حجر الأساس لكل رحلة في تطوير الويب. أي موقع تراه على الإنترنت، مهما بلغ جماله وتعقيده، يبدأ هيكله من HTML. هذه الدورة تأخذك من الصفر إلى بناء صفحات ويب حقيقية بـ HTML5 خطوة بخطوة.

ما يميّز هذه الدورة أنك تطبّق بيدك لا تحفظ بعينك: عبر محرّر الأكواد المباشر تكتب كل وسم وترى أثره فورًا في المتصفح. وبنيتُ كل درس من تجربتي مع المبتدئين، فبدأت من حيث يتعثّرون فعلًا، لا من حيث تفترض الكتب.

أهم نصيحة من تجربتي: لا تكتفِ بالمشاهدة. افتح محرّرًا واكتب كل وسم بيدك وجرّبه، فالمهارة تُبنى بالكتابة لا بالقراءة. من يطبّق كل درس يتقدّم أضعاف من يكتفي بالفهم النظري.

تشبيه أستخدمه دائمًا: بناء موقع كبناء منزل. HTML هي الجدران والغرف والهيكل، وCSS هي الدهان والديكور، وJavaScript هي الكهرباء التي تجعله يعمل. لا أحد يبدأ بالدهان قبل بناء الجدران — ولهذا نبدأ بـHTML.

هل يجب أن أحفظ كل الوسوم؟

لا أبدًا. حتى المحترفون يعودون للمرجع. ركّز على فهم الفكرة والوسوم الأكثر استخدامًا، والبقية تأتي بالممارسة.

هل أحتاج إنترنت سريع أو جهازًا قويًا؟

لا. HTML تعمل على أي جهاز، ويكفيك محرّر بسيط ومتصفح. يمكنك حتى التجربة مباشرة من محرّر الأكواد في الموقع.

🎓 ماذا ستتعلم؟

  • بنية صفحة HTML5 والوسوم الأساسية الصحيحة
  • الوسوم الدلالية (header وnav وmain وfooter) وأثرها على الأرشفة
  • إنشاء النماذج (Forms) وحقول إدخال البيانات
  • إضافة الصور والروابط والوسائط من فيديو وصوت
  • الجداول وتنظيم البيانات بشكل احترافي
  • بناء صفحة ويب كاملة من الصفر بيدك

📋 متطلبات الدورة

  • لا تلزم خبرة سابقة إطلاقًا — الدورة تبدأ من الصفر
  • جهاز كمبيوتر ( سواء كمبيوتر شخصي أو لابتوب ) حيث أن استخدام أجهزة الهاتف في تعلم البرمجة وتصميم صفحات المواقع الإلكترونية أمر صعب جدا وغير عملي.
  • تحميل برنامج نوتباد ++ notepad++ وهو برنامج مجاني وميزته يسهل عليك كتابة الأكواد بجميع اللغات البرمجية. يمكن استخدام برنامج المفكرة الذي يأتي مع الويندوز تلقائيا لكن لا أنصح به وذلك لأنه مخصص لكتابة النصوص وليس الأكواد البرمجية.
  • متصفح حديث (Chrome أو Firefox)
  • رغبة في التطبيق العملي أكثر من الحفظ

🗺️ خريطة الدورة

منهج متسلسل مبني بعناية — كل درس يمهّد لما بعده، ابدأ من الأول والتزم بالترتيب

1
مقدمة في الويب
ماهو الويب؟ وماهي مكوناته؟ وماهو HTML و CSS و JavaScript؟ وماهي الادوات التي احتاجها لانشاء موقع الكتروني؟
🧩 11 مواضيع ⏱ 30:00 دقيقة مجاني
2
بنية صفحة HTML
ستتعلم في هذا الدرس الوسوم tags في HTML ، ايضا ستتعلم البنية الاساسية لصفحة HTML
🧩 9 مواضيع ⏱ 35:00 دقيقة مجاني
3
الوسوم الأساسية في HTML التي ستستخدمها يوميًا
أهم وسوم HTML الأساسية مع أمثلة عملية ، وسوم العناوين h1 وغيرها وسم الفقرات p و وسم الروابط a و وسم الصور img ووسوم القوائم ul و ol.
🧩 9 مواضيع ⏱ 30:00 دقيقة مجاني
4
Semantic HTML – الوسوم الدلالية لكود احترافي
تعلّم الوسوم الدلالية Semantic HTML مثل header و nav و main و footer، ولماذا تجعل كودك أوضح وأفضل لمحركات البحث، مع أمثلة عملية لبناء صفحة منظمة.
🧩 6 مواضيع ⏱ 30:00 دقيقة مجاني
5
الخصائص Attributes في HTML بطريقة مبسطة
شرح الخصائص (Attributes) في HTML بطريقة بسيطة وواضحة جدًا وتوضيح اهميتها في بناء صفحات المواقع الالكترونية
🧩 7 مواضيع ⏱ 30:00 دقيقة مجاني
6
الجداول والنماذج في HTML: Tables و Forms
سنتعلم وسوم الجداول والنماذج. كيف ننشئ جدول في المواقع الالكترونية مبدئيا بدون اي تنسيق . وكيف ننشئ نموذج في المواقع الالكترونية ايضا مبدئيا بدون اي تنسيق .
🧩 6 مواضيع ⏱ 30:00 دقيقة مجاني
7
الصوت و الفيديو والفريم
شرح إضافة الصوت والفيديو في HTML باستخدام وسمي audio و video، وتضمين المحتوى الخارجي عبر iframe، مع أمثلة عملية وأهم الخصائص التي تحتاجها.
🧩 8 مواضيع ⏱ 30:00 دقيقة مجاني
8
أهم وسوم HTML5 التي سيستخدمها الطالب باستمرار
مرجع عربي شامل لجميع وسوم HTML5 وخصائصها في صفحة واحدة: وسوم البنية والنصوص والقوائم والجداول والنماذج والوسائط، مع وصف مختصر لكل وسم.
🧩 5 مواضيع ⏱ 30:00 دقيقة مجاني
✍️ أعدّ هذه الدورة: أ. يوسف
معلّم حاسب آلي وأخصائي تقنية معلومات، حاصل على الماجستير في تقنية المعلومات، بخبرة تتجاوز 20 عامًا في تطوير البرمجيات وأمن المعلومات وتدريس الحاسب. بنيتُ هذا المنهج من واقع تدريسي اليومي وأماكن تعثّر المبتدئين الفعلية. تعرّف على خبرتي كاملة ←