كورس HTML بالعربي

ماذا ستتعلم؟

• بناء هيكل صفحة ويب كاملة بالوسوم الصحيحة
• كتابة العناوين والفقرات والقوائم والجداول
• إضافة الروابط والصور إلى صفحاتك
• بناء نماذج لإدخال البيانات
• استخدام الوسوم الدلالية لصفحات أوضح لمحركات البحث
• تسمية العناصر بـ class و id وتجميعها بـ div و span
• إضافة الصوت والفيديو، وضبط head و meta لمحركات البحث
• مشروع ختامي: صفحتك الشخصية الكاملة

فهرس الدروس

1. 1مقدمة في HTML: لغة بناء صفحات الويبتعرّف على HTML، اللغة التي تُبنى بها كل صفحات الويب: ما هي الوسوم والعناصر، وكيف تكتب أول صفحة HTML وتفتحها في المتصفح، وما علاقتها بـ CSS و JavaScript.
2. 2هيكل صفحة HTML: الرأس والجسم والخصائصافهم هيكل صفحة HTML بالتفصيل: دور DOCTYPE و html و head و body، ووسوم meta المهمة للعربية والموبايل، والخصائص (Attributes)، والتعليقات، وتداخل العناصر.
3. 3العناوين والفقرات وتنسيق النص في HTMLتعلّم كتابة العناوين من h1 إلى h6 والفقرات في HTML، والنزول لسطر جديد بـ br، والخط الفاصل hr، وتمييز النص المهم بـ strong و em، ولماذا يتجاهل المتصفح المسافات.
4. 4الروابط في HTML: الوسم a والخاصية hrefتعلّم إنشاء الروابط في HTML بالوسم a: الروابط الخارجية والداخلية، والمسارات النسبية، وفتح الرابط في تبويب جديد بأمان، وروابط البريد، والقفز لقسم في الصفحة.
5. 5الصور في HTML: الوسم img والنص البديلتعلّم إضافة الصور إلى صفحات الويب بالوسم img: الخاصيتان src و alt، وتحديد الأبعاد، وأشهر صيغ الصور، والتحميل الكسول، وتعليق الصورة بـ figure و figcaption.
6. 6القوائم في HTML: المرقمة وغير المرقمةتعلّم بناء القوائم في HTML: القائمة غير المرقمة ul، والمرقمة ol وخصائصها start و reversed و type، والقوائم المتداخلة، وقائمة التعريفات dl، ومتى تستخدم كلاً.
7. 7الجداول في HTML: الصفوف والأعمدة والدمجتعلّم بناء الجداول في HTML: الوسوم table و tr و td و th، وتقسيم الجدول إلى thead و tbody و tfoot، وعنوان الجدول caption، ودمج الخلايا بـ colspan و rowspan.
8. 8النماذج في HTML: form و input و labelتعلّم بناء النماذج في HTML لاستقبال البيانات: form و input و label و textarea و select و button، وأنواع الحقول، والتحقق التلقائي بـ required، والخاصية name.
9. 9الوسوم الدلالية في HTML: header و main و footerتعلّم الوسوم الدلالية في HTML مثل header و nav و main و section و article و aside و footer، ولماذا هي أفضل من div، وكيف تساعد محركات البحث وقارئات الشاشة.
10. 10تنسيق النص في HTML: الاقتباس والكود والنص المشطوبتعلّم وسوم تنسيق النص في HTML: الاقتباس بـ blockquote و q، والنص المحذوف والمضاف بـ del و ins، والرموز العلوية والسفلية sub و sup، وعرض الكود بـ code و pre.
11. 11div و span والعناصر block و inline في HTMLافهم الفرق بين العناصر من نوع block والعناصر من نوع inline في HTML، ومتى تستخدم div لتجميع أقسام الصفحة و span لتمييز جزء من النص، مع أمثلة تجربها.
12. 12class و id في HTML: تسمية العناصرتعلّم تسمية عناصر HTML بالخاصيتين class و id: الفرق بينهما ومتى تستخدم كل واحدة، وإعطاء العنصر أكثر من كلاس، وقواعد اختيار الأسماء، وخصائص data و hidden.
13. 13عناصر النماذج المتقدمة في HTMLتعمّق في نماذج HTML: حقول اللون والمدى والملفات والهاتف، والاقتراحات بـ datalist، وتجميع الحقول بـ fieldset و legend، وخصائص disabled و readonly و pattern.
14. 14الصوت والفيديو و iframe في HTMLتعلّم إضافة الوسائط إلى صفحات HTML: تشغيل الصوت بوسم audio والفيديو بوسم video مع خصائص controls و poster، وتضمين فيديو يوتيوب أو خريطة داخل صفحتك بوسم iframe.
15. 15وسم head في HTML: العنوان و meta والأيقونةتعلّم ما يوضع داخل head في صفحة HTML: العنوان title ووصف الصفحة لمحركات البحث، ووسوم meta، وأيقونة الموقع favicon، وبطاقة المشاركة Open Graph، وربط ملفات CSS.
16. 16الرموز والكيانات في HTMLتعلّم كتابة الرموز الخاصة في HTML بالكيانات Entities: إظهار علامتي أصغر من وأكبر من كنص، والمسافة غير المنكسرة، ورمز حقوق النشر والأسهم، وكتابة الإيموجي.
17. 17مشروع HTML: صفحتك الشخصية خطوة بخطوةطبّق كل ما تعلمته في كورس HTML ببناء صفحة شخصية كاملة: رأس وقائمة تنقل، ونبذة وصورة، وقائمة مهارات، وجدول مشاريع، ونموذج تواصل، بالوسوم الدلالية الصحيحة.