0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

بناء أساسيات قوية في تطوير الويب من خلال تعلم HTML في HTML Academy.

🤖 مدعوم بالذكاء الاصطناعي📚 40 دورة👥 100,000+ متعلم⭐ تقييم 4.9
نظرة عامة على الدورة

HTML: لغة كل صفحة ويب

HTML هو الأساس الهيكلي للويب — كل تبويب متصفح وإرسال نموذج وفيديو مدمج يبدأ بـ markup. يبني هذا المسار طلاقة حقيقية في HTML، من القواعد التي تحكم المستند الصحيح إلى واجهات برمجة التطبيقات والنماذج الهندسية المستخدمة في المواقع الإنتاجية الحديثة. الهدف ليس فقط كتابة tags بل فهم السبب في وجود كل عنصر وما الذي يشير إليه للمتصفحات والتقنيات المساعدة ومحركات البحث.

ما ستتعلمه

ستبدأ بهيكل المستند والمحتوى النصي والروابط والصور والقوائم، ثم تنتقل إلى الجداول والنماذج وسمات التحقق من الصحة. يغطي المسار عناصر HTML5 الدلالية و <head> والبيانات الوصفية والصوت والفيديو وأساسيات إمكانية الوصول بما فيها أدوار وسمات ARIA. تتناول الدورات اللاحقة السمات البيانات المخصصة وقوالب HTML وعناصر Canvas و SVG وتخزين الويب وواجهة برمجة تطبيقات السحب والإفلات وعلامات SEO والوسائط الاجتماعية وقوالب بريد HTML. تتعمق الأقسام المتقدمة في Shadow DOM و Web Components والعناصر المخصصة وموديولات HTML وخرائط الاستيراد والتحسين التدريجي والأسلوب المحلي والأمان وواجهة برمجة تطبيقات التاريخ والملاحة و Intersection Observer وبناء HTML لتطبيقات الويب التقدمية.

مسار التعلم

تتطور أربعون دورة من A1 عبر A2 و B1 إلى B2، وتنتهي بـ capstone من المستوى C1 في HTML at Scale. تقيم دورات A1 و A2 الأساسيات — هيكل المستند والعناصر الدلالية والنماذج والبيانات الوصفية. يقدم B1 إمكانية الوصول و ARIA و Canvas و SVG وتخزين المتصفح. B2 هو الكتلة الأكبر، تغطي Web Components و Shadow DOM والأداء والأمان والأسلوب المحلي و Intersection Observer. تتناول الدورة النهائية C1، HTML at Scale، الأنماط والقيود المهمة عندما يتم تأليف HTML واختباره والعناية به عبر قواعد البيانات الكبيرة.

كيف يعمل

تنقسم كل دورة إلى دروس قصيرة وعملية تكملها في محرر الأكواد المدمج مع الملاحظات الحية. يتوفر معلم ذكي في أي وقت تواجه فيه صعوبة، وتتقدم بسرعتك الخاصة — كل درس مستقل بحيث يمكنك العودة إلى أي موضوع كمرجع لاحقاً.

ابدأ التعلم →

كيف ستتعلم

🎯
دروس تفاعلية
تمارين برمجة عملية مع ردود فعل فورية
🤖
معلم الذكاء الاصطناعي
احصل على مساعدة فورية من معلمنا الذكي عندما تعلق
💻
محرر مدمج
اكتب وشغّل الأكواد مباشرة في متصفحك
🏆
الشهادة
احصل على شهادة عند إكمالك للدورة
المنهج الدراسي

40 دورة

كل الدورات في مسار تعلم HTML Academy.

01

بنية مستند HTML

A13 دروس

تعلّم كيفية تحليل المتصفحات لـ HTML، وما يفعله DOCTYPE، وكيف تنظّم عناصر html وhead وbody كل صفحة ويب.

02

عناصر المحتوى النصي

A14 دروسPRO

أتقن العناوين والفقرات والتوكيد والعناصر المضمّنة والتحكم في المسافات البيضاء باستخدام وسوم النص في HTML.

03

الروابط والتنقّل

A14 دروسPRO

أنشئ التنقّل باستخدام عناصر الارتساء، وعناوين URL المطلقة والنسبية، وروابط علامات التبويب الجديدة، ومعرّفات الأجزاء.

04

الصور والأشكال التوضيحية

A14 دروسPRO

اعرض الصور بشكل متجاوب باستخدام img وsrcset وعنصر picture، وأضف تسميات توضيحية دلالية باستخدام figure.

05

القوائم

A14 دروسPRO

أنشئ قوائم غير مرتبة ومرتبة وقوائم وصفية مع التداخل الصحيح والمعنى الدلالي.

06

الجداول

A24 دروسPRO

أنشئ جداول بيانات ميسّرة ببنية صحيحة وخلايا ممتدة وأقسام الجداول.

07

سمات HTML والسمات العامة

A24 دروسPRO

افهم سمات id وclass وstyle وhidden وtabindex وdata-* المخصّصة المستخدمة عبر جميع عناصر HTML.

08

أساسيات نماذج HTML

A24 دروسPRO

أنشئ نماذج ويب ميسّرة باستخدام أنواع الإدخال والتسميات والأزرار، وسمتي action وmethod لعنصر form.

09

عناصر التحكم المتقدمة في النماذج

A24 دروسPRO

طوّر النماذج باستخدام القوائم المنسدلة وtextareas ومجموعات مربعات الاختيار والأزرار الاختيارية والإكمال التلقائي باستخدام datalist.

10

سمات التحقق من صحة النماذج

A24 دروسPRO

استخدم سمات التحقق في HTML5 مثل required وpattern وmin وmax للتحقق من إدخال المستخدم قبل الإرسال.

11

HTML5 الدلالية

A24 دروسPRO

استبدل عناصر div العامة بعناصر HTML5 ذات معنى مثل header وnav وmain وfooter وarticle وsection.

12

عناصر دلالية إضافية

A24 دروسPRO

استكشف aside وdetails وsummary وprogress وmeter لإضافة معنى وتفاعلية أغنى إلى الصفحات.

13

رأس HTML والبيانات الوصفية

A24 دروسPRO

أتقن قسم head: وسم title ووسوم meta وviewport وعناوين URL الأساسية وتوجيهات robots والأيقونات المفضّلة.

14

عناصر الصوت والفيديو

A24 دروسPRO

ضمّن الصوت والفيديو أصليًا باستخدام HTML5، ووفّر صيغًا متعددة، وأضف الترجمات باستخدام track وWebVTT.

15

أساسيات إتاحة HTML

B14 دروسPRO

افهم مستويات WCAG وتسلسل العناوين واستراتيجية النص البديل والتنقّل باستخدام لوحة المفاتيح لإنشاء صفحات ويب شاملة.

16

أدوار وسمات ARIA

B14 دروسPRO

حسّن الإتاحة باستخدام أدوار ARIA وتسمياتها وأوصافها، والتزم بقاعدة استخدام HTML الأصلية أولًا.

17

سمات البيانات المخصّصة

B14 دروسPRO

خزّن البيانات الوصفية المخصّصة في عناصر HTML واسترجعها باستخدام سمات data-* وواجهة dataset ومحددات CSS.

18

قوالب HTML

B14 دروسPRO

استخدم عنصر template لتعريف ترميز غير نشط، واستنسخه بكفاءة، وقارنه بالعرض القائم على innerHTML.

19

عنصر Canvas

B14 دروسPRO

ارسم الأشكال والنصوص والصور على لوحة Canvas ثنائية الأبعاد، وحرّكها باستخدام requestAnimationFrame.

20

SVG في HTML

B14 دروسPRO

ضمّن الرسومات المتجهية القابلة للتوسّع داخل الصفحة، واستخدم الأشكال الأساسية، وتحكّم في viewBox، وحرّك SVG باستخدام CSS.

21

iframe والمحتوى المضمّن

B14 دروسPRO

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

22

تخزين الويب في HTML

B14 دروسPRO

خزّن البيانات من جهة العميل باستخدام localStorage وsessionStorage، واستمع إلى أحداث storage، واتبع إرشادات الأمان.

23

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

B14 دروسPRO

نفّذ تفاعلات السحب والإفلات باستخدام HTML5 Drag and Drop API والكائن dataTransfer.

24

تحسين محركات البحث والبيانات الوصفية الاجتماعية

B14 دروسPRO

حسّن الصفحات لمحركات البحث والمشاركة الاجتماعية باستخدام OpenGraph وTwitter Cards وJSON-LD وhreflang.

25

قوالب البريد الإلكتروني بـ HTML

B14 دروسPRO

أنشئ HTML متوافقًا مع البريد الإلكتروني باستخدام التخطيطات القائمة على الجداول والأنماط المضمّنة وتقنيات الصور المتوافقة بين العملاء.

26

أنماط ARIA المتقدمة

B24 دروسPRO

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

27

أداء HTML

B24 دروسPRO

سرّع تحميل الصفحات باستخدام نصوص async وdefer، وتلميحات preload، والصور المحمّلة كسولًا، وتلميحات الموارد.

28

عناصر HTML المخصّصة في Web Components

B24 دروسPRO

عرّف عناصر HTML مخصّصة قابلة لإعادة الاستخدام باستخدام Custom Elements API، واستدعاءات دورة الحياة، والسمات المراقَبة.

29

Shadow DOM

B24 دروسPRO

اعزل الترميز والأنماط داخل Shadow DOM، ووزّع المحتوى باستخدام slots، وأتِح واجهات برمجة لتنسيق الأنماط باستخدام part.

30

وحدات HTML وخرائط الاستيراد

B24 دروسPRO

استخدم نصوص وحدات ES وخرائط الاستيراد للمحدّدات المجرّدة والاستيرادات الديناميكية ومفاهيم Module Federation.

31

التحسين التدريجي

B24 دروسPRO

أنشئ باستخدام التحسين التدريجي: ابدأ بـ HTML متين، وأضف CSS وJavaScript على مراحل، واكتشف الميزات بطريقة صحيحة.

32

التدويل

B24 دروسPRO

حضّر HTML للجمهور العالمي باستخدام lang وdir وbdi وbdo وcharset ودعم النصوص من اليمين إلى اليسار

33

أمان HTML

B24 دروسPRO

احمِ الصفحات من XSS واختطاف النقر وحقن التعليمات باستخدام CSP وsandboxing وSRI وممارسات التعامل الآمن مع HTML

34

واجهة HTML المتقدمة للنماذج

B24 دروسPRO

استفد من FormData وConstraint Validation API ورسائل التحقق المخصصة وإدارة حالة النموذج

35

واجهة HTML للتاريخ والتنقل

B24 دروسPRO

أدر سجل المتصفح باستخدام pushState وأحداث popstate وNavigation API الحديثة للتوجيه في SPA

36

Intersection Observer

B24 دروسPRO

استخدم IntersectionObserver لتنفيذ التحميل الكسول والتمرير اللانهائي ومشغلات الرسوم المتحركة المرتبطة بالتمرير

37

HTML لتطبيقات PWAs

B24 دروسPRO

اضبط تطبيقات الويب التقدمية باستخدام بيان تطبيق الويب وتسجيل service worker وصفحات الرجوع الاحتياطية عند عدم الاتصال

38

التحقق من HTML واختباره

B24 دروسPRO

تحقق من الترميز باستخدام W3C Validator ودقّق HTML باستخدام Lighthouse واختبر إمكانية الوصول باستخدام pa11y وaxe

39

مستقبل HTML

B24 دروسPRO

استكشف ميزات HTML الناشئة: Declarative Shadow DOM وPopover API وselectlist وسمات command

40

HTML على نطاق واسع

C14 دروسPRO

أدر HTML في المشاريع الكبيرة باستخدام استخراج المكونات والقوالب من جهة الخادم وأنظمة التصميم ووثائق styleguide

الأسئلة الشائعة

الأسئلة الشائعة

هل دورة HTML Academy مجانية؟

نعم. يمكنك البدء في دورة HTML Academy مجانًا وإكمال دروسها التفاعلية بلا تكلفة. اشتراك PRO اختياري يفتح لك أدوات ذكاء اصطناعي متقدمة وشهادة قابلة للمشاركة.

هل أحتاج إلى خبرة سابقة لتعلم HTML؟

لا. تبدأ الدورة بالأساسيات وتنتقل تدريجيًا إلى مواضيع أكثر تقدمًا، لذا يمكنك البدء حتى بدون خبرة سابقة في HTML.

كيف ستتعلم HTML على CoddyKit؟

تتعلم من خلال العمل. دروس تفاعلية قصيرة تجمع بين شرح واضح وتمرين برمجة عملي يعمل في الوقت الفعلي، ومعلم ذكاء اصطناعي يعمل 24/7 يقدم مساعدة مخصصة عندما تعلق.

هل أحصل على شهادة عند إكمال HTML Academy؟

نعم. متعلمو PRO يمكنهم الخضوع لامتحان والحصول على شهادة إكمال قابلة للمشاركة برمز تحقق لدورة HTML Academy.

هل يمكنني تعلم HTML على هاتفي؟

نعم. CoddyKit متاح على الويب وكتطبيقات iOS و Android أصلية، لذا يمكنك تعلم HTML على أي جهاز وسيتم مزامنة تقدمك عبرها جميعًا.

ابدأ HTML Academy الآن

انضم إلى آلاف المتعلمين الذين يتقنون البرمجة مع دروس مدعومة بالذكاء الاصطناعي.

ابدأ مجاناً →استعرض جميع الدورات