بدايتك لتعلم HTML
يوفر كورس HTML هذا لمطوري الويب نظرة عامة قوية للمطورين، من المبتدئ إلى مستوى الخبير في HTML.
HyperText Markup Language، أو HTML، هي العمود الفقري للويب، حيث توفر المحتوى، بالإضافة إلى هيكل ذلك المحتوى، الذي تراه معروضاً في متصفح الويب الخاص بك.
ما لم تكن تقرأ ملف PDF أو نسخة مطبوعة من هذه الصفحة، فإن هذا المحتوى يتكون من عناصر HTML ونصوص متنوعة. HTML هي طبقة المحتوى للويب. عناصر HTML هي العقد (nodes) التي تشكل نموذج كائن المستند (Document Object Model).
توفر Cascading Style Sheets (CSS) الشكل والمظهر، أو طبقة العرض التقديمي للصفحة. JavaScript هي طبقة السلوك، وغالباً ما تُستخدم لمعالجة الكائنات داخل المستند. المواقع المبنية بأطر عمل جافاسكريبت هي في الحقيقة مجرد معالجة لـ HTML. في المقابل، من المهم ترميز HTML الخاص بك بطريقة يمكن للبرامج النصية (scripts) تحليلها بسهولة ويمكن للتقنيات المساعدة (assistive technologies) فهمها.
هذا يعني كتابة كود HTML بمعايير حديثة.
ما ستتعلمه
يوفر كورس HTML هذا لمطوري الويب نظرة عامة قوية للمطورين، من المبتدئ إلى مستوى الخبير في HTML. إذا كنت جديداً تماماً في HTML، فستتعلم كيف تبني محتوى سليم هيكلياً. إذا كنت تبني مواقع ويب لسنوات، فقد يملأ هذا الكورس فجوات في المعرفة لم تكن تعلم بوجودها.
خلال هذه الرحلة، سنبني هيكل موقع MachineLearningWorkshop.com. لم تتضرر أي آلات في إنشاء هذه السلسلة.
هذا ليس مرجعاً كاملاً. يقدم كل قسم موضوع القسم مع شروحات وأمثلة موجزة، مما يوفر لك فرصة لاستكشاف المزيد. هناك روابط لمراجع المواضيع، مثل مواصفات MDN و WHATWG، ومقالات أخرى على web.dev. على الرغم من أن هذا ليس كورساً حول إمكانية الوصول (accessibility)، إلا أن كل قسم يتضمن أفضل الممارسات والقضايا المحددة المتعلقة بإمكانية الوصول، مع روابط لتعمق أكثر في الموضوع. يحتوي كل قسم على تقييم قصير لمساعدة الأشخاص على تأكيد فهمهم.
إليك ما ستتعلمه:
قائمة موضوعات الدورة
نظرة عامة على HTML (Overview)
مقدمة بسيطة للمفاهيم الأساسية في HTML.
هيكل المستند (Document structure)
تعلم كيف تبني مستندات HTML الخاصة بك بأساس متين.
البيانات الوصفية (Metadata)
كيفية استخدام وسوم meta (meta tags) لتوفير معلومات حول مستنداتك.
HTML الدلالي (Semantic HTML)
استخدام عناصر HTML الصحيحة لوصف محتوى مستندك.
العناوين والأقسام (Headings and sections)
كيفية استخدام عناصر التقسيم (sectioning elements) بشكل صحيح لإعطاء معنى للمحتوى الخاص بك.
السمات (Attributes)
تعلم عن السمات العامة (global attributes) المختلفة جنباً إلى جنب مع السمات الخاصة بعناصر HTML معينة.
أساسيات النص (Text basics)
كيفية تنسيق النص باستخدام HTML.
الروابط (Links)
كل ما تحتاج لمعرفته حول الروابط.
القوائم (Lists)
القوائم والطرق الأخرى لتجميع المحتوى الخاص بك.
التنقل (Navigation)
التنقل هو عنصر أساسي في أي موقع أو تطبيق، ويبدأ بـ HTML.
الجداول (Tables)
فهم كيفية استخدام الجداول لترميز البيانات الجدولية.
النماذج (Forms)
نظرة عامة على النماذج في HTML.
الصور (Images)
نظرة عامة على الصور في HTML.
الصوت والفيديو (Audio and Video)
اكتشف كيف تعمل مع وسائط HTML مثل الصوت والفيديو.
Template, slot, and shadow
شرح لـ template (النموذج), slot (الخانة), و shadow (الظل).
HTML APIs
تعلم كيف يمكن كشف معلومات HTML ومعالجتها باستخدام JavaScript.
التركيز (Focus)
كيفية إدارة ترتيب التركيز (focus order) في مستندات HTML الخاصة بك.
عناصر النص المضمنة الأخرى (Other inline text elements)
مقدمة لمجموعة العناصر المستخدمة لترميز النص.
Details and summary
اكتشف كيف تعمل عناصر details و summary المفيدة جداً، وأين يمكن استخدامها.
Dialog
عنصر <dialog> هو عنصر مفيد لتمثيل أي نوع من الحوار (dialog) في HTML، اكتشف كيف يعمل.
الخاتمة والخطوات التالية
نختتم ببعض الموارد الإضافية.
إذاً، هل أنت مستعد لتعلم HTML؟ هيا نبدأ.
ملاحظة: تمت كتابة هذا الكورس بواسطة Abdilrahman Ibrahim، بمساهمة ومراجعة من Salma Ahmed, و ساره عماد.