مقدمة إلى برمجة HTML و CSS - الجزء الأول

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

تعتمد العديد من صفحات الويب — التي تشكل مجموعة منها موقعًا إلكترونيًا — على لغتي البرمجة HTML وCSS. ويُعد تعلّم كيفية استخدام هاتين اللغتين، المستخدمتين لإنشاء محتوى صفحة الويب وتنسيقه، خطوة مهمة نحو إنشاء صفحات ويب خاصة بك ومصممة جيدًا.

موضوعات الدورة:

الدرس 1: البدء باستخدام HTML

الموضوع أ: أساسيات HTML

• HTML – معلومات أساسية
• تركيب وسم HTML
• البدء
• النشاط 1-1: فحص صفحة ويب

الموضوع ب: عناصر صفحة الويب الأساسية

• وسم العنوان
• وسما الفقرة وفاصل الأسطر
• وسوم تنسيق النص الأساسية
• النشاط 1-2: استخدام HTML لإضافة عناصر أساسية

الموضوع ج: إنشاء القوائم

• القوائم المرتبة
• القوائم غير المرتبة
• عناصر القائمة
• النشاط 1-3: إنشاء قائمة باستخدام HTML
• الملخص
• أسئلة المراجعة

الدرس 2: التوسع في استخدام HTML

الموضوع أ: الصور في HTML

• وسم الصورة
• تحديد مصدر الصورة
• تحديد نص بديل للصورة
• تغيير حجم الصورة
• النشاط 2-1: إضافة صورة باستخدام HTML

الموضوع ب: الروابط في HTML

• الربط بصفحة ويب أخرى
• الروابط الداخلية
• النشاط 2-2: إضافة رابط

الموضوع ج: الجداول في HTML

• مكونات الجدول في HTML
• صف رأس الجدول
• صفوف بيانات الجدول
• النشاط 2-3: إنشاء جدول باستخدام HTML
• الملخص
• أسئلة المراجعة

الدرس 3: البدء باستخدام CSS 

الموضوع أ: أساسيات CSS 

• CSS: أوراق الأنماط المتتالية 

• وسم <style> 

• الطباعة والتسلسل الهرمي في CSS 

• النشاط 3-1: إنشاء مساحة تنسيق باستخدام وسم <style> 

الموضوع ب: الألوان في CSS 

• تغيير لون عنصر في صفحة ويب 

• أسماء الألوان في CSS 

• نظام ألوان RGB 

• نظام الألوان السداسي عشري 

• لون الخلفية 

• النشاط 3-2: إضافة ألوان CSS بطرق متنوعة 

الموضوع ج: استخدام معرّفات CSS إضافية 

• استخدام أسماء المعرّفات في CSS 

• استخدام أسماء الأصناف في CSS 

• النشاط 3-3: استخدام اسم معرّف للتنسيق 

• الملخص 

• أسئلة المراجعة 

الدرس 4: تنسيق النص باستخدام CSS 

الموضوع أ: عائلات الخطوط 

• ما الخط؟ 

• استخدام خاصية Font-Family 

• الخطوط ذات الزوائد مقابل الخطوط بلا زوائد 

• أسماء الخطوط 

• أنواع خطوط إضافية 

• الخطوط الاحتياطية 

• النشاط 4-1: تغيير عائلة الخطوط في CSS 

الموضوع ب: حجم الخط 

• خاصية Font-Size 

• البكسلات 

• وحدات EM 

• النشاط 4-2: تغيير حجم النص 

الموضوع ج: المزيد من خصائص النص في CSS 

• خاصية Font-Style 

• خاصية Font-Weight 

• خاصية Line-Height 

• خاصية Text-Align 

• النشاط 4-3: تخصيص النص باستخدام خصائص إضافية 

الموضوع د: اختصار خصائص الخط 

• اختصارات CSS 

• اختصار CSS للخطوط 

• النشاط 4-3: تطبيق اختصار CSS للخطوط عمليًا 

• الملخص 

• أسئلة المراجعة 

الدرس 5: تقنيات تنسيق متقدمة باستخدام HTML وCSS 

الموضوع أ: تجميع العناصر 

• ما عنصر التجميع؟ 

• التنسيق المضمن مقابل التنسيق الكتلي 

• النشاط 5-1: استخدام الوسمين <span> و<div> لتجميع عناصر صفحة الويب 

الموضوع ب: أبعاد Div 

• ضبط عرض Div 

• ضبط ارتفاع Div 

• تجاوز المحتوى 

• النشاط 5-2: ضبط نمط كتلة Div 

الموضوع ج: نموذج الصندوق في CSS 

• نموذج الصندوق في CSS 

• هوامش CSS 

• حدود CSS 

• الحشو في CSS 

• النشاط 5-3: ضبط نمط كتلة Div 

• الملخص 

• أسئلة المراجعة