محتوى الدورة
الدرس الأول
هذه الدورة هي خطوتك الأولى في عالم تطوير الويب. سنقدم لك أساسيات كل صفحة ويب: وسوم HTML وكيفية هيكلة المحتوى. ستتعلم كيفية تنسيق النصوص بالعناوين والفقرات، وإنشاء قوائم وجداول للتنظيم، وإضافة صور لإضفاء تأثير بصري مميز. سنتطرق أيضًا إلى النماذج التي تتيح التفاعل، ونسلط الضوء على دور HTML5 في تصميم الويب الحديث. مع تقدمك، ستكتشف كيف يتكامل HTML مع CSS وJavaScript لإضفاء الحيوية على مواقع الويب، بما في ذلك ميزات مثل لوحة HTML5. بنهاية هذا الدرس، ستكون قد اكتسبت أساسًا متينًا لمواصلة دورة تطوير الويب الكاملة.
0/2
الدرس الثاني
في هذه الدورة، سنستكشف مجموعة من عناصر HTML التي تجعل صفحات الويب تفاعلية وديناميكية. ستتعلم كيفية إنشاء نماذج تسمح للمستخدمين بإدخال البيانات وإرسالها، بالإضافة إلى مساحات نصية لكتل الإدخال الأكبر. سنتناول أيضًا وسم marquee الغريب، وإن كان تاريخيًا، وسبب ندرة استخدامه في تطوير الويب الحديث. ومن ثم، سنتناول كيفية إضافة وظائف باستخدام وسم النص البرمجي، وأهمية وسم noscript للزوار الذين تمنع متصفحاتهم جافا سكريبت أو لا تدعمه. وأخيرًا، سنعود إلى عنصر العنوان في —تفاصيل صغيرة لكنها أساسية لكل صفحة. تُجسّد هذه المفاهيم الفجوة بين لغة HTML الثابتة وعالم JavaScript التفاعلي، ولوحة HTML5، وممارسات تطوير الويب الحديثة.
0/2
الدرس الثالث
في هذا الدرس، سنوسّع مجموعة أدواتنا بمجموعة متنوعة من وسوم HTML وHTML5 التي تُضفي معنىً وبنيةً وقوةً إعلاميةً على صفحات الويب. ستشاهد كيف تُبرز التعريفات، ولماذا تُفضّل على النصوص المهمة. سنتدرب على أساسيات التخطيط باستخدام
و، وسنتعلم كيف تُساعد , and
في عرض الكود ونتائج العينة بوضوح.

ثم ننتقل إلى الربط والوسائط المتعددة: للملاحة، للموارد الخارجية، وعناصر   
و
0/2
الدرس الرابع
في هذا الدرس، نركز على علامات HTML5 الإضافية التي تجعل النماذج والتخطيطات والمحتوى المنظم أكثر قوة وسهولة في الاستخدام. ستشاهد كيف يتيح للمستخدمين تحميل الملفات، وكيف و إظهار مؤشرات مرئية مثل إنجاز المهام أو القيم القابلة للقياس. سنعمل أيضًا مع ، الذي يوفر للمستخدمين خيارات مقترحة أثناء الكتابة في نموذج. بالنسبة لبنية المستند، سنتعلم العناصر الدلالية
،
، و
— ضروري لتنظيم المحتوى في كتل ذات معنى. سنستكشف أيضًا
و
مثالي لربط الصور أو المخططات مع التعليقات التوضيحية. أخيرًا، سنتدرب على استخدام لتحديد التواريخ والأوقات بتنسيق قابل للقراءة آليًا، والتفاعلية
و الوسوم، التي تسمح للمستخدمين بتوسيع المحتوى وطيّه. بنهاية هذه الدورة، ستتعلم كيفية دمج هذه الوسوم لإنشاء صفحات ويب HTML5 أكثر ثراءً ودلالةً وتفاعلية.
0/2
الدرس الخامس
في هذا الدرس، ستتعلم كيفية رسم وتحريك الرسومات باستخدام <canvas> وجافا سكريبت. سنُنشئ لوحة رسم في DOM، ونأخذ سياق عرضها ثنائي الأبعاد، ونعرض الأشكال والنصوص والصور. ستتدرب على المسارات (moveTo، lineTo، arc)، والتعبئة والحدود، والألوان والتدرجات، وربط الخطوط، ورسم النصوص. سنغطي رسم الصور/الرسوم المتحركة، ومعالجة نسبة بكسل الجهاز لعرض واضح، ومسح/إعادة رسم كل إطار باستخدام requestAnimationFrame للحصول على رسوم متحركة سلسة. ستتعلم أيضًا أساسيات التفاعل مع أحداث الماوس/اللمس، وحفظ/تصدير الرسومات عبر toDataURL. في النهاية، ستتعرف على سير عمل اللوحة الأساسية: التهيئة، والرسم، والتحديث، والتحريك.
0/2
الدرس السادس
SVG (رسومات متجهية قابلة للتطوير). SVG هي رسومات متجهية مبنية على XML، تُوضع باستخدام <svg> في الصفحة. يتغير حجمها بدقة عند أي حجم، وهي سهلة الوصول/دلالية، والأشكال الفردية (مثل <rect> و<circle> و<path> و<text>) هي عناصر DOM يمكنك تصميمها باستخدام CSS وتعديلها باستخدام JS. تشمل السمات الرئيسية: viewBox، وwidth، وheight، وfill، وstroke، وstroke-width. SVG رائع للأيقونات، والمخططات، والشعارات، والرسوم البيانية التفاعلية. الكيانات (التي تعرض الأحرف المحجوزة). لعرض الأحرف التي تفسرها HTML عادةً، استخدم الكيانات: &lt; → <، &gt; → >، &amp; → &، &quot; → "، &apos; → '، &nbsp; → مسافة غير قابلة للكسر. تعمل الكيانات المسماة والكيانات الرقمية (مثل ©) بشكل جيد. (مُهمَل). <center> قديم. توسيط باستخدام CSS: نص مع محاذاة نصية: توسيط؛، كتل بهامش: 0 تلقائي؛، أو تخطيط حديث (Flex/Grid). السحب والإفلات في HTML5. فعّله بوضع "true" على عنصر واستمع إلى "بدء السحب". اسمح بالإفلات بمنع الوضع الافتراضي في "السحب فوق". استخدم واجهة برمجة تطبيقات نقل البيانات داخل الأحداث لتعيين البيانات أثناء "بدء السحب" والحصول على البيانات في "الإفلات". الأحداث النموذجية: "بدء السحب"، "السحب فوق"، "الإفلات"، "إضافة" "السحب إلى الداخل"، "السحب إلى الخارج"، "السحب إلى الخارج".
0/2
الدرس السابع
تخزين المفتاح والقيمة (سلاسل نصية فقط) مُخصص لأصل الصفحة، ويستمر خلال عمليات إعادة التحميل وإعادة التشغيل. الدوال الأساسية: setItem(key, value)، وgetItem(key)، وremoveItem(key)، وclear()، وkey(index)، وخاصية length. خزّن الكائنات باستخدام JSON.stringify / JSON.parse. عادةً ما تكون الحصص بضعة ميغابايت لكل أصل. هذا التخزين متزامن (يمنع الخيط الرئيسي)، ومحمي من نفس الأصل، وتُفعّل التغييرات حدث تخزين في علامات تبويب أخرى من نفس الأصل (وليس علامة التبويب التي أجرت التغيير). استخدم sessionStorage لعمر كل علامة تبويب. تجنّب تخزين الأسرار؛ فالبيانات قابلة للقراءة بواسطة أي برنامج نصي على نفس الأصل، وقد تتم مزامنتها في بعض المتصفحات. قد يُقلل التصفح الخاص من الحصص أو يمسح البيانات عند الخروج.
0/2
دورة HTML كاملة – من الصفر إلى الاحتراف

In this lesson we expand our toolkit with a variety of HTML and HTML5 tags that give meaning, structure, and media power to web pages. You’ll see how &lt;dfn&gt; يسلط الضوء على التعريف، ولماذا &lt;strong&gt; يفضل على &lt;b&gt; for important text. We’ll practice layout basics with &lt;div&gt;وتعلم كيف &lt;samp&gt;, &lt;code&gt;، و &lt;pre&gt; help display code and sample output clearly.

We then move into linking and multimedia: &lt;a href="..."&gt; for navigation, &lt;link&gt; for external resources, and the &lt;audio&gt; و &lt;video&gt; elements for embedding rich media. Finally, we introduce semantic HTML5 structure with &lt;article&gt; و &lt;aside&gt;, which give pages clearer meaning for both browsers and search engines.

By the end of this session, you’ll understand how these tags improve readability, accessibility, and user experience—stepping closer to building modern, well-structured websites.