HTML

بنية كل صفحة ويب

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

الأسس

مبتدئ - الأساسيات خطوة بخطوة

• ما هي HTML؟ الوسوم والخصائصاكتشف ما هي HTML وتعلّم كيف تميّز الوسم من الخاصية.
• هيكلة النص: العناوين والفقرات والقوائمتعلّم تنظيم النص عبر تسلسل هرمي من العناوين والفقرات والقوائم.
• الروابط والصورأنشئ روابط إلى صفحات أخرى واعرض الصور بالوسمين a وimg.
• الجداول البسيطةاعرض البيانات في صفوف وأعمدة بالوسوم table وtr وth وtd.
• الهيكل الكامل لصفحة HTMLجمّع صفحة ويب كاملة باستخدام doctype والوسوم html وhead وmeta وbody.

التقدّم

متوسط - بناء مشاريع حقيقية

• النماذج: input و label و select و textarea و buttonأنشئ نماذج كاملة وسهلة الوصول وجاهزة للإنتاج.
• HTML الدلالي: بناء صفحة حقيقيةاستبدل عناصر div المجهولة بوسوم تمنح المعنى لبنيتك.
• الوسائط: audio و video و figure و figcaptionأدرج الصوت والفيديو والرسوم التوضيحية المعنونة دون أي إضافة برمجية.
• السمات العامة و data-*استفد من السمات التي تعمل في كل مكان وخزّن بياناتك الخاصة داخل الـ HTML.
• تجهيز صفحتك للويبأتقن ترويسة head في صفحتك: العنوان والوصف والأيقونة والروابط الخارجية الآمنة.

الإتقان المتقدّم

محترف - أنماط متقدّمة والأداء

• إمكانية الوصول: alt وتسلسل العناوين وARIAأتقن النص البديل، وتسلسلًا هرميًا للعناوين يمكن لقارئات الشاشة التنقّل فيه فعليًا، واستخدام ARIA مقصورًا على الحالات التي يعجز فيها HTML الأصلي.
• النماذج المتقدمة والتحقق الأصلياستفد من required وpattern وinputmode وواجهة Constraint Validation API لبناء نماذج متينة من دون أي مكتبة خارجية.
• الصور المتجاوبة: srcset وsizes وpictureقدّم الصورة المناسبة للشاشة المناسبة بواسطة srcset وsizes، واحتفظ بـ picture للتوجيه الفني، وأتقن التحميل الكسول.
• تحسين محركات البحث التقني: Open Graph والبيانات المهيكلةتحكّم في كيفية معاينة صفحاتك على الشبكات الاجتماعية بواسطة Open Graph، واسعَ إلى النتائج الغنية بواسطة schema.org بصيغة JSON-LD.
• أداء التحميل: defer وasync وpreload وprefetchرتّب تنفيذ سكربتاتك بواسطة defer وasync، ثم وجّه الشبكة بواسطة preload وpreconnect وprefetch.

الاحتراف

خبير - البنية والتفاصيل الداخلية والحالات الحدّية

• من HTML إلى DOM: التحليل والتعافي من الأخطاءافهم كيف يحوّل المتصفح أي دفق HTML، حتى لو كان مشوّهًا، إلى شجرة DOM حتمية.
• مكوّنات الويب: العناصر المخصّصة وShadow DOM والفتحاتأتقن دورة حياة العنصر المخصّص، وتغليف Shadow DOM، وإسقاط المحتوى عبر الفتحات (slots).
• التدويل: lang وdir وcharset ومصائد Unicodeاستخدم lang وdir وتصريح الترميز بحكمة، واهزم مصائد التطبيع والاتجاهية في Unicode.
• الأمان من جهة HTML: XSS وsandbox وnoopener وCSPحدّد نواقل XSS الخاصة بالترميز، وانشر دفاعات HTML الأصلية: sandbox وnoopener وسياسة أمان المحتوى.
• HTML التفاعلي الحديث: dialog وdetails وpopover وcontenteditableاستبدل مكتبات واجهتك بالبدائيات الأصلية في HTML الحديث: النوافذ الحوارية النمطية، والأكورديونات الحصرية، والنوافذ المنبثقة، والمناطق القابلة للتحرير.