مدخل إلى تطوير واجهات الويب

في هذه المحاضرة، يتم استعراض متصفح Google Chrome باعتباره أحد أهم الأدوات المستخدمة من قبل مطوري الويب، مع التركيز على DevTools المدمجة فيه. سنتعرف على كيفية فتح أدوات المطور، استكشاف واجهتها، واستخدامها لفحص العناصر (Elements)، تتبع الشبكة (Network)، مراقبة الأداء (Performance)، ومعالجة الأخطاء في الكود. الهدف من هذه الجلسة هو تمكين المتعلم من فهم أساسيات بيئة العمل التي سيستخدمها يوميًا أثناء تطوير أو اختبار مواقع وتطبيقات الويب، مما يساعده على تحسين الإنتاجية وسرعة اكتشاف الأخطاء.

في هذه المحاضرة سنتعرف على مفهوم شجرة الـ HTML (DOM Tree Structure) وكيف يتم تنظيم العناصر داخل صفحة الويب بشكل هرمي. سيتم توضيح كيفية عمل العناصر الرئيسية مثل , , و ، وكيف تحتوي هذه العناصر على عناصر أخرى بداخلها. كما سيتم التركيز على العلاقة بين العناصر الأب و العناصر الابن وكيف يؤثر هذا التداخل على تصميم الصفحة وسلوكها. فهم هذه البنية يعد أساسياً لأي مطور، لأنه يساعد على التعامل مع الأكواد بطريقة منظمة، ويسهّل استخدام أدوات المطور (DevTools) أو لغات البرمجة مثل JavaScript للتعديل والتفاعل مع الصفحة.

في هذه المحاضرة ستقوم بإنشاء أول صفحة ويب لك باستخدام HTML عبر كتابة كود قصير يعرض العبارة الشهيرة "Hello World". الهدف من هذا الدرس هو التعرف على البنية الأساسية لأي صفحة ويب، بما في ذلك وسم ، قسم ، ووسم . هذه الخطوة العملية الأولى تمنح المتعلم فرصة لفهم كيفية عمل المتصفح في عرض الأكواد، وتعتبر نقطة الانطلاق قبل الانتقال إلى مفاهيم أكثر تقدماً مثل التنسيقات باستخدام CSS أو إضافة التفاعلية عبر JavaScript. هذا الدرس يشكل الأساس لتطوير مواقع وتطبيقات ويب أكثر تعقيداً في المستقبل.

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

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

في هذا الدرس سنتناول وسوم العناوين في HTML وكيفية استخدامها لتنظيم النصوص داخل الصفحة. وأفضل الممارسات لاستخدامها لتحسين تجربة المستخدم وهيكل الصفحة. فهم وسوم العناوين مهم أيضاً لتحسين SEO (تحسين محركات البحث) وجعل المحتوى أكثر وضوحاً للمستخدمين ومحركات البحث على حد سواء. هذا الدرس يساعدك على كتابة محتوى منظم وسهل القراءة داخل أي صفحة ويب.

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

التعرف على الوسوم المختلفة لتنسيق النصوص في HTML مثل الغامق والمائل والقوائم.

في هذا الدرس سنتعرف على القوائم غير المرتبة

• وكيفية استخدامها لتنظيم العناصر داخل صفحة الويب. سنتعلم كيفية إضافة عناصر القائمة
• داخل القائمة غير المرتبة، وكيفية ترتيبها بطريقة منطقية وسهلة القراءة.

في هذا الدرس سنتعلم كيفية إدراج الصور في صفحات HTML باستخدام وسم ، وكيفية تحديد خصائصه الأساسية مثل src (مصدر الصورة) وalt (النص البديل).

في هذا الدرس سنتعرف على القوائم المرتبة

1. وكيفية استخدامها لعرض عناصر بطريقة مرتبة رقمياً أو حسب ترتيب محدد. سنتعلم كيفية إضافة عناصر القائمة
2. داخل القائمة المرتبة، وكيفية التحكم في ترتيب العناصر بطريقة واضحة وسهلة القراءة.

في هذا الدرس سنتعلم كيفية إنشاء النماذج في HTML

في هذا الدرس سنتعلم كيفية إضافة الروابط داخل صفحات الويب باستخدام وسم . سنتعرف على كيفية ربط صفحة بأخرى، أو الانتقال إلى مواقع خارجية عبر خاصية href. كما سنتطرق إلى خصائص إضافية مثل target لفتح الرابط في نافذة أو تبويب جديد، وtitle لإضافة وصف يظهر عند تمرير الفأرة على الرابط.

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

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

في هذا الدرس سنتعرف على CSS (Cascading Style Sheets) بشكل عام، وكيف تكمل لغة HTML في بناء المواقع. سيتم شرح دور CSS في التحكم بمظهر الصفحة مثل الألوان، الخطوط، المسافات، وحجم العناصر. سنتعرف أيضاً على أهم مزايا CSS، مثل فصل المحتوى (HTML) عن الشكل (CSS)، مما يسهل تطوير وصيانة المواقع. هذا الدرس يوضح للمتعلمين كيف تساعد CSS على تحويل صفحة بسيطة مكتوبة بـ HTML إلى صفحة جذابة ومنسقة، ويعتبر مدخلاً لفهم باقي خصائص وأدوات CSS التي ستتم دراستها في الدروس القادمة.

في هذا الدرس سنتعلم كيفية استخدام In-line CSS لتنسيق العناصر بشكل مباشر داخل وسم HTML من خلال خاصية style. سيتم توضيح كيفية تغيير لون النصوص، حجم الخط، الخلفية، والمحاذاة باستخدام التعليمات المضمنة في نفس العنصر. ورغم أن هذه الطريقة سهلة وسريعة للتجارب أو التعديلات البسيطة، إلا أنها ليست الأفضل في المشاريع الكبيرة بسبب صعوبة إدارة الأكواد وتكرارها. الهدف من هذا الدرس هو فهم كيفية عمل التنسيقات المضمنة، ومعرفة متى يمكن استخدامها، مع التمهيد للانتقال لاحقاً إلى الطرق الأكثر تنظيماً مثل Internal CSS و External CSS.

في هذا الدرس سنتعلم كيفية استخدام Internal CSS لتنسيق صفحة الويب عبر كتابة التعليمات داخل وسم

في هذا الدرس سنتعلم الفرق بين Class و ID في CSS وكيفية استخدامهما لتنسيق العناصر. سنوضح أن ID يُستخدم لتعريف عنصر واحد بشكل فريد داخل الصفحة، بينما Class يمكن تطبيقه على عدة عناصر لتطبيق نفس النمط عليها. سنتعرف على كيفية استدعاء كل منهما داخل CSS باستخدام الرمز # للـ ID والرمز . للـ Class، مع أمثلة عملية لتنسيق العناوين، الأزرار، والأقسام المختلفة. فهم هذه المفاهيم أساسي لأنه يمنح المطور مرونة أكبر في التحكم بمظهر الموقع وتنظيم الأكواد، ويُعتبر خطوة مهمة قبل الانتقال إلى موضوعات أكثر تعقيداً مثل Selectors المتقدمة و CSS Layouts.

في هذا الدرس سنتعرف على كيفية تطبيق تنسيقات CSS على وسم