الأيقونات الاجتماعية

اضغط على ESC للإغلاق

دورة HTML كاملة – من الصفر إلى الاحتراف

قائمتي المفضلة مشاركة
مشاركة
رابط الصفحة
مشاركة على وسائل التواصل الاجتماعي

عن الدورة

بناء الويب معي: دورة HTML مصغرة مكونة من 7 مقاطع فيديو

إذا كنت ترغب في تعلم HTML دون الانغماس في المصطلحات، فهذا هو ما تبحث عنه. لقد جمعتُ شرحًا موجزًا ومركّزًا سلسلة من 7 فيديوهات هذا يأخذك من "ما حتى يكون من "علامة؟" إلى نشر صفحة واضحة ودلالية يمكنك نشرها على الإنترنت. لا إضافات، ولا تحويلات طويلة - فقط الأجزاء التي تحتاجها، بوتيرة لا تُرهق عقلك.

ما سوف تتعلمه (حلقة تلو الأخرى)

  1. أساسيات HTML - العلامات والعناصر والسمات وكيفية قراءة المتصفح للمستند.
  2. بنية الصفحة — <!doctype>, <html>, <head>, <body>العناوين، والفقرات، والقوائم، ومتى تستخدم كل منها.
  3. الروابط والوسائط - المراسي، والقفزات الداخلية للصفحات، والصور، والنص البديل الذي ليس عديم الفائدة، وعناوين الأشكال الأساسية.
  4. التخطيط مع الدلالات — header, nav, main, section, article, aside, footerلماذا تتفوق الدلالات على كومة من <div>س.
  5. الجداول والنماذج بالطريقة الصحيحة - المدخلات، والعلامات، والحقول المطلوبة مقابل الحقول الاختيارية، وعلامات الجدول التي يمكن الوصول إليها.
  6. البيانات الوصفية المهمة — أيقونات المفضلة، وعلامات التعريف للمعاينات الاجتماعية، وسمات اللغة/الدليل، ونظافة محرك البحث البسيطة.
  7. شحنها - تنظيف HTML والتحقق من صحته ونشره؛ نصائح سريعة للاستضافة وما يجب فعله بعد ذلك (CSS/JS).

في النهاية، سيكون لديك مشروع صغير ولكنه حقيقي: موقع مكون من صفحة واحدة مع شريط تنقل، وأقسام محتوى، ونماذج اتصال بسيطة، وجميع التفاصيل الصغيرة (العناوين، والأوصاف، والرموز المفضلة) التي تجعلك تشعر بأنه "تم الانتهاء منه".

لمن هذا؟

  • المبتدئين الحقيقيين من يريد شرح الأساسيات بشكل واضح.
  • المطورون من مجموعات أخرى (مرحبا، أيها الناس الذين يعملون في مجال الواجهة الخلفية 👋) الذين يحتاجون إلى تحديث سريع لمعلومات HTML.
  • المصممين/المسوقين الذين يريدون إرسال صفحات الهبوط دون انتظار المطور.
  • طلاب الذين يفضلون الدروس القصيرة والعملية على المحاضرات الماراثونية.

ما تحتاجه

  • أي محرر أكواد (VS Code رائع).
  • متصفح حديث مع أدوات التطوير.
  • حوالي 10 إلى 20 دقيقة لكل مقطع فيديو والاستعداد للكتابة معه (بجدية - الكتابة أفضل من المشاهدة).

كيفية المتابعة

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

لماذا يعمل هذا التنسيق

الدروس القصيرة تُقلل من تغيير السياق. تحافظ على زخمك، وتلاحظ التقدم، ولن تنسى ما غطاه الدرس السابق عند بدء الدرس التالي. كما أن الدورة تُشجعك على: HTML الدلالي وإمكانية الوصول إليه منذ اليوم الأول- العادات التي ستكون شاكراً لها عندما تقوم بإضافة CSS وJavaScript لاحقًا.

ماذا بعد HTML؟

مسارين طبيعيين:

  • سي اس اس للتخطيط والتصميم (Flexbox، Grid، الأنماط المستجيبة).
  • قليلًا من JS للتفاعلية (التبديلات، تحسينات النموذج).
    ولكن لا تتخطى الخطوات - HTML الصلب يجعل كل شيء أسهل.

إذا كان هذا مفيدًا لك، ضع إعجابًا، وشاركه مع صديق يتعلمه، وأخبرني بما تريده بعد ذلك (دورة مكثفة في CSS؟ الغوص العميق في النماذج؟).

بناء سعيد.

إظهار المزيد

ماذا سوف تتعلم؟

  • كيفية استخدام وفهم علامات HTML الأساسية (<p>, <h1>-<h6>, <div>, <span>، إلخ.)
  • الاستخدام الصحيح لعناصر التنسيق (strong، em، code، pre، samp، dfn، إلخ.)
  • بناء النماذج باستخدام المدخلات، ومناطق النص، وتحميلات الملفات، والتقدم، والمقياس، وقائمة البيانات
  • تنظيم المحتوى باستخدام علامات التقسيم (
    ،
    ،
  • إنشاء قوائم وجداول وروابط للتنقل
  • تضمين الصور والصوت والفيديو والإطارات المضمنة ورسومات SVG
  • استخدام قماش HTML5 للرسومات والتأثيرات الأساسية باستخدام JavaScript
  • فهم الكيانات (&، <، >، علامات الاقتباس، الرموز، العملة، وما إلى ذلك)
  • تنفيذ وظيفة السحب والإفلات باستخدام أحداث JavaScript
  • تخزين البيانات باستخدام localStorage للاستمرار في المتصفح
  • أفضل الممارسات لـ HTML الدلالي، الذي يمكن الوصول إليه، والقابل للصيانة

محتوى الدورة

الدرس الأول
هذه الدورة هي خطوتك الأولى في عالم تطوير الويب. سنقدم لك أساسيات كل صفحة ويب: وسوم HTML وكيفية هيكلة المحتوى. ستتعلم كيفية تنسيق النصوص بالعناوين والفقرات، وإنشاء قوائم وجداول للتنظيم، وإضافة صور لإضفاء تأثير بصري مميز. سنتطرق أيضًا إلى النماذج التي تتيح التفاعل، ونسلط الضوء على دور HTML5 في تصميم الويب الحديث. مع تقدمك، ستكتشف كيف يتكامل HTML مع CSS وJavaScript لإضفاء الحيوية على مواقع الويب، بما في ذلك ميزات مثل لوحة HTML5. بنهاية هذا الدرس، ستكون قد اكتسبت أساسًا متينًا لمواصلة دورة تطوير الويب الكاملة.

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

الدرس الثالث
في هذا الدرس، سنوسّع مجموعة أدواتنا بمجموعة متنوعة من وسوم HTML وHTML5 التي تُضفي معنىً وهيكلاً وقوةً إعلاميةً على صفحات الويب. ستشاهد كيف <dfn> يسلط الضوء على التعريف، ولماذا <strong> يفضل على <b> للنصوص المهمة. سنتدرب على أساسيات التخطيط مع <div>وتعلم كيف <samp>, <code data-no-auto-translation="">, and <pre data-no-auto-translation=""> help display code and sample output clearly. We then move into linking and multimedia: <a href="/ar/.../"> for navigation, <link> for external resources, and the <audio> and <video> elements for embedding rich media. Finally, we introduce semantic HTML5 structure with <article> and <aside>, 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.

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

الدرس الخامس
في هذا الدرس سوف تتعلم كيفية رسم وتحريك الرسومات باستخدام وجافا سكريبت. سنُنشئ لوحة رسم في DOM، ونأخذ سياق عرضها ثنائي الأبعاد، ونعرض الأشكال والنصوص والصور. ستتدرب على المسارات (moveTo، lineTo، arc)، والتعبئة والحدود، والألوان والتدرجات، وربط الخطوط، ورسم النصوص. سنغطي رسم الصور/الرسوم المتحركة، ومعالجة نسبة بكسل الجهاز لعرض واضح، ومسح/إعادة رسم كل إطار باستخدام requestAnimationFrame للحصول على رسوم متحركة سلسة. ستتعرف أيضًا على أساسيات التفاعل مع أحداث الماوس/اللمس، وستتعلم كيفية حفظ/تصدير الرسومات عبر toDataURL. في النهاية، ستتعرف على سير عمل اللوحة الأساسية: التهيئة، والرسم، والتحديث، والتحريك.

الدرس السادس
SVG (رسومات متجهية قابلة للتطوير). SVG هي رسومات متجهية تعتمد على XML يمكنك وضعها مع في الصفحة. يمكن قياسها بدقة في أي حجم، ويمكن الوصول إليها/دلالتها، ويمكن عرض الأشكال الفردية (مثل ، ، ، ) هي عناصر DOM يُمكنك تصميمها باستخدام CSS وتعديلها باستخدام JS. تشمل السمات الرئيسية: viewBox، وwidth، وheight، وfill، وstroke، وstroke-width. يُعد SVG رائعًا للأيقونات، والمخططات، والشعارات، والرسوم البيانية التفاعلية. الكيانات (عرض الأحرف المحجوزة). لعرض الأحرف التي يُفسرها HTML عادةً، استخدم الكيانات: &lt;→ &lt; , &gt; → &gt; ، &amp; → &amp; ، &quot;→ &quot; ، &#039;→ &#039; ، → مسافة غير قابلة للكسر. تعمل الكيانات المسماة والرقمية (مثل &#169;) على حد سواء. <center> (مُهمَل). تم إيقافه. توسيط باستخدام CSS: نص مع محاذاة النص: مركز؛، كتل بهامش: 0 تلقائي؛، أو تخطيط حديث (Flex/Grid). السحب والإفلات في HTML5. فعّله بوضع &quot;true&quot; على عنصر واستمع إلى &quot;بدء السحب&quot;. اسمح بالإفلات بمنع الوضع الافتراضي في &quot;السحب فوق&quot;. استخدم واجهة برمجة تطبيقات نقل البيانات داخل الأحداث لتعيين البيانات أثناء &quot;بدء السحب&quot; والحصول على البيانات في &quot;الإفلات&quot;. الأحداث النموذجية: &quot;بدء السحب&quot;، &quot;السحب فوق&quot;، &quot;الإفلات&quot;، &quot;إضافة&quot; &quot;السحب إلى مركز&quot;، &quot;السحب إلى اليسار&quot;، &quot;السحب إلى النهاية&quot;.

الدرس السابع
تخزين المفتاح والقيمة (سلاسل نصية فقط) مُخصص لأصل الصفحة، ويستمر خلال عمليات إعادة التحميل وإعادة التشغيل. الدوال الأساسية: setItem(key, value)، وgetItem(key)، وremoveItem(key)، وclear()، وkey(index)، وخاصية length. خزّن الكائنات باستخدام JSON.stringify / JSON.parse. عادةً ما تكون الحصص بضعة ميغابايت لكل أصل. هذا التخزين متزامن (يمنع الخيط الرئيسي)، ومحمي من نفس الأصل، وتُفعّل التغييرات حدث تخزين في علامات تبويب أخرى من نفس الأصل (وليس علامة التبويب التي أجرت التغيير). استخدم sessionStorage لعمر كل علامة تبويب. تجنّب تخزين الأسرار؛ فالبيانات قابلة للقراءة بواسطة أي برنامج نصي على نفس الأصل، وقد تتم مزامنتها في بعض المتصفحات. قد يُقلل التصفح الخاص من الحصص أو يمسح البيانات عند الخروج.

تقييمات ومراجعات الطلاب

لا يوجد تقييم حتى الآن
لا يوجد تقييم حتى الآن

انضم إلى مجتمعنا 👋

فتح الوصول الكامل إلى حسابي دروس تعليمية ورؤية المكتبة بأكملها أعضاء فقط المشاركات.

اشترك في نشرتنا البريدية النشرة الإخبارية، إلغاء في في أي وقت.

انضم الآن