Menu
CoddyTech
ابدأ التعلم
flag Ar iconالعربيةdown icon
شائعرحلة

تعلّم HTML

دورة HTML تفاعلية مجانية أونلاين. تكتب HTML في كل درس، مع معاينة مباشرة أثناء الكتابة وشهادة مجانية عند الإكمال.

ابدأ التعلم(مجاني)
عرض المنهجPlayground لـ HTML

336,814+ من الـ codders مسجلون

241 درسًا212 تحديات1,193 أسئلة الاختبار

  • مناسب للمبتدئين
  • sparkles iconمساعدة برمجية بالذكاء الاصطناعي
  • hint iconدروس تفاعلية عملية
  • volume On iconتعليق صوتي في كل درس
  • quiz iconاختبارات لقياس معرفتك
  • certificate iconشهادة إتمام مجانية

المنهج

5 أقسام6 مشاريع241 درسًا212 تحديات1,193 أسئلة الاختبار
  1. قسم 1

    الأساسيات

    ابدأ القسمابدأتوسيعطي    تعلّم البنية الأساسية والصياغة لإنشاء صفحات الويب من الصفر60 درسًا75 تحديات251 أسئلة3 مشاريع

    أساسيات HTML

    5 درسًا530

    النصوص والتنسيق

    6 درسًا1135

    التعامل مع القوائم

    4 درسًا721

    بطاقة وصفة

    مشروع4 درسًا1

    إضافة المحتوى

    5 درسًا837

    تخطيط الصفحة

    5 درسًا930

    صفحة الملف الشخصي

    مشروع5 درسًا1

    النماذج والمدخلات - الجزء الأول

    6 درسًا936

    النماذج والمدخلات - الجزء الثاني

    7 درسًا1239

    الجداول

    4 درسًا723

    صفحة التسجيل في الفعالية

    مشروع5 درسًا1

    التحديات النهائية

    4 درسًا4
  2. قسم 2

    التنسيق باستخدام CSSصفحة مخصصة

    ابدأ القسمابدأتوسيعطي    أضف الحيوية إلى صفحات الويب باستخدام الألوان والتخطيطات والأنماط76 درسًا100 تحديات418 أسئلة3 مشاريع

    مقدمة

    5 درسًا540

    إضافة CSS

    4 درسًا725

    المحددات الأساسية

    7 درسًا1247

    أساسيات النصوص

    8 درسًا1450

    الألوان والخلفيات

    5 درسًا834

    قائمة المقهى

    مشروع3 درسًا1

    نموذج الصندوق - الجزء الأول

    6 درسًا943

    نموذج الصندوق (Box Model) - الجزء الثاني

    5 درسًا833

    Flex Box

    6 درسًا943

    نموذج تسجيل الدخول

    مشروع4 درسًا1

    تقنيات التخطيط

    7 درسًا1151

    أساسيات التصميم المتجاوب

    6 درسًا1052

    صفحة ويب تونغا

    مشروع6 درسًا1

    التحديات النهائية

    4 درسًا4
  3. قسم 3

    إتقان CSSصفحة مخصصة

    ابدأ القسمابدأتوسيعطي    ارتقِ بمهاراتك في CSS إلى المستوى التالي!43 درسًا40 تحديات164 أسئلة

    إتقان المحددات – الربط

    6 درسًا539

    الفئات الزائفة التفاعلية

    5 درسًا431

    الأصناف الزائفة الهيكلية (Structural pseudo-classes)

    5 درسًا432

    مشروع القائمة المنسدلة

    4 درسًا4

    التأثيرات البصرية

    5 درسًا536

    صفحة الهبوط (Landing Page)

    5 درسًا5

    البناء باستخدام CSS Grid

    4 درسًا426

    موقع Flavor Fiesta

    4 درسًا4

    التحديات النهائية

    5 درسًا5
  4. قسم 4

    الواجهة الأمامية العملية

    ابدأ القسمابدأتوسيعطي    اجمع بين البنية والتنسيق لتصميم صفحات ويب متكاملة ومتجاوبة35 درسًا34 تحديات197 أسئلة

    المتغيرات

    5 درسًا432

    إستراتيجية الهاتف المحمول أولاً

    6 درسًا643

    السمات والأنماط المرئية

    5 درسًا535

    الرياضات الخطرة

    3 درسًا3

    مكونات واجهة المستخدم

    6 درسًا642

    أنماط التصميم المتجاوب

    6 درسًا645

    التحديات النهائية

    4 درسًا4
  5. قسم 5

    JavaScript قيد التطبيق

    ابدأ القسمابدأتوسيعطي    استكشف كيفية استخدام JavaScript مع HTML وCSS27 درسًا27 تحديات163 أسئلة

    التفاعلية/مكوّنات واجهة المستخدم

    4 درسًا433

    النماذج والتحقق

    3 درسًا324

    الإشعارات والتغذية الراجعة

    3 درسًا327

    نموذج مع إشعار Toast

    2 درسًا2

    التنقّل

    3 درسًا329

    التنسيق والتخصيص

    2 درسًا217

    الرسوم المتحركة والتأثيرات

    3 درسًا327

    التنقّل المتحرك

    3 درسًا36

    التحديات النهائية

    4 درسًا4

دورات HTML

دورات HTML تطبيقية، ابدأها مجانًا في متصفحك.

رسوم متحركة لكسوف الشمس | مشروع HTML/CSS

شائع

في هذه الدورة، ستنشئ رسومًا متحركة مذهلة لـ "كسوف الشمس"، لتوضيح كيفية بناء واجهات مستخدم جذابة وعملية باستخدام الرسوم المتحركة.

  • 10
  • 2

محاكاة صفحة إنستغرام | مشروع Front-End

شائع

في هذه الدورة، ستتدرب على أساليب HTML و CSS القياسية والبسيطة، وستقوم بإنشاء مشروع محاكاة لصفحة إنستغرام.

  • 16
  • 5

مشغل فيديوهات YouTube - مشروع HTML

شائع

في هذا المشروع، ستنشئ مشغل فيديوهات YouTube باستخدام HTML وتستكشف سمات متنوعة خلال ذلك.

  • 7
  • 1

دوال JavaScript DOM

في هذه الدورة، ستتعرف على دوال JavaScript DOM الأكثر استخداماً وكيفية استخدامها!

  • 13

ساعة إيقاف - مشروع HTML/CSS/JS

في هذا المشروع، ستنشئ ساعة إيقاف بسيطة باستخدام HTML و CSS و JavaScript.

  • 10
  • 3

تحديات HTML/CSS - الحزمة الأولى

ستختبر هذه الدورة معرفتك بـ HTML و CSS بطريقة ممتعة وفعالة!

  • 11
عرض كل دورات HTML الـ 26 ←
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

تعلّم بالممارسة

اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.

playground.js
محرر الأكواد
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
اختبار #1test Case Success icon
اختبار #2test Case Success icon
اختبار #3test Case Failure icon
الإدخال
"Alex"
الإخراج
"Hello, Coddy! Alex"

ابنِ سلسلتك

حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.

12 أيام متتالية

عُد غداً للحفاظ على سلسلتك!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

ضعف أو لا شيء

اليوم 5 من 7

fire Freeze icon

تجميد السلسلة

2 left

برمج في أي مكان

خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات - فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.

Python
7السلسلة
250النقاط
5الطاقة
المتغيرات
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
متابعة
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
الرحلة
الأهداف
لوحة المتصدرين
الملف الشخصي
4.9
نجمةنجمةنجمةنجمةنجمة
التقييم

لست وحدك

تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!

دوري المتحدّين
دوري المتحدّينأفضل 7 يتقدمون
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconمنطقة الترقيةleaderboard Arrow Up icon

كل طريقة للتعلّم

اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.

مقدمة للمتغيّرات
صوت

المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.

في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.

يمكن أن تتغيّر القيمة بمرور الوقت - إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.

1xSarah

احصل على شهادتك

احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.

Coddyشهادة إتمام
يُشهد بأنمحمد أحمدقد أتمّ بنجاح
python iconأساسيات Python
موثّق
التاريخيناير 2026
LinkedInأضف إلى LinkedIn

لماذا تتعلم HTML مع Coddy

  • اكتب HTML في متصفحك وشاهد الصفحة المعروضة جنبًا إلى جنب. لا حاجة لتثبيت محرر ولا لأي إعداد. كل تعديل تجريه على كود HTML يظهر فورًا، فتكون حلقة الملاحظات قصيرة.
  • HTML حديث ودلالي: العناوين، القوائم، الروابط، الصور، الجداول، النماذج، والوسوم الدلالية مثل <header> و<nav> و<main> و<section> و<footer>. هذا هو HTML الذي ستستخدمه فعلًا لبناء موقع حقيقي.
  • تلميحات الذكاء الاصطناعي تساعدك على إصلاح أخطاء HTML - وسوم غير مغلقة، صياغة خاطئة للسمات، هفوات في إمكانية الوصول - دون أن تكشف لك الإجابة، فترسخ عاداتك في كتابة HTML.
  • شهادة HTML مجانية عند الانتهاء. خطوة أولى موثوقة نحو تطوير الويب، تتكامل بشكل طبيعي مع دورتَي CSS وJavaScript.

أسئلة شائعة حول تعلّم HTML

هل HTML سهل التعلم؟

HTML من أسهل ما يمكن تعلّمه في عالم التقنية. فهي لغة وسم لا لغة برمجة - أنت توسم أجزاء من المحتوى (عناوين، فقرات، روابط، صور) بدلًا من كتابة منطق برمجي. معظم المبتدئين يبنون أول صفحة ويب حقيقية خلال الساعة الأولى.

كم يستغرق تعلّم HTML؟

يمكن تعلّم أساسيات HTML عادة خلال أسبوع أو أسبوعين من التدريب اليومي. ولإنشاء مشاريع حقيقية بثقة، خصص من شهر إلى ثلاثة أشهر حسب سرعتك وخبرتك السابقة.

هل يجب أن أتعلم HTML قبل CSS وJavaScript؟

نعم. HTML يحدد بنية الصفحة، وCSS يتحكم في شكلها، وJavaScript يجعلها تفاعلية. تعلّم HTML أولاً يعني أن لديك شيئاً ملموساً لتنسيقه وتحريكه لاحقاً. دورة HTML قصيرة عن قصد حتى تتمكن من الانتقال إلى CSS وJS بسرعة.

هل HTML لغة برمجة؟

بالمعنى الدقيق، لا. HTML لغة توصيف تُستخدم لوصف بنية محتوى الويب، وليس فيها متغيرات ولا شروط ولا حلقات بمفردها. البرمجة الفعلية في صفحة الويب تأتي من JavaScript، وهي موضوع دورة منفصلة.

هل يمكنني تعلّم HTML عبر الإنترنت مجانًا؟

نعم. دورة HTML التفاعلية مجانية - دروس وتمارين برمجية ومعاينة حية لـ HTML وشهادة في النهاية. كل شيء يعمل داخل المتصفح، فلا حاجة إلى تثبيت أي محرر أو أدوات للبدء.

هل أحصل على شهادة بعد إنهاء دورة HTML؟

نعم. إكمالك لدورة HTML يمنحك شهادة إتمام مجانية. دليل قابل للتحقق تضيفه إلى سيرتك الذاتية أو تشاركه على LinkedIn - عادةً كخطوة نحو ملف أعمال أكثر اكتمالاً يجمع HTML وCSS وJavaScript.

مسارات التعلّم التي تتضمن هذه الدورة

هذه الدورة خطوة واحدة من مسار أطول: عدة دورات بالترتيب الذي يدرّسها به مرشد، ولكلٍّ منها شهادة مجانية.

رسم توضيحي للغات البرمجة في Coddy

تعلم HTML مع Coddy

ابدأ الآن