المسار: تطوير الويب (Front-End)

الدرس الأول: مقدمة في لغة HTML وبناء الهيكل الأساسي

شرح الدرس

المرفقات والأكواد

المناقشة

عناوين هذا الدرس

مقدمة: ما هي لغة HTML؟
كيف تعمل المتصفحات؟
مفهوم الوسوم (Tags) والعناصر
الهيكل الأساسي لأي صفحة ويب
كتابة أول كود HTML

في هذا الدرس سنتعلم الأساسيات الصلبة:

التعريف والوظيفة: لماذا تعتبر HTML العمود الفقري للإنترنت؟
البنية التحتية: كيف يقرأ المتصفح الأكواد ويحولها لصفحة مرئية.
التطبيق العملي: كتابة أول صفحة ويب كاملة وفهم كل سطر فيها.

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

أولاً: ما هي لغة HTML؟

هي اختصار لـ (HyperText Markup Language)، وظيفتها وصف هيكل الصفحة للمتصفح (مثل الهيكل العظمي للإنسان)، بينما لغة CSS هي "الشكل والملابس".

المفاهيم الأساسية

1. الوسم (Tag)

هو الكلمة المحجوزة التي نكتبها بين قوسين < >.
مثال: <h1> للعنوان.

2. العنصر (Element)

هو المكون الكامل: وسم البداية + المحتوى + وسم النهاية.

            3. السمة (Attribute)
            
            معلومات إضافية نعطيها للعنصر لتغيير سلوكه (مثل رابط الصورة).

ثانياً: البنية الأساسية والكود

أي صفحة ويب يجب أن تحتوي على هيكل ثابت يقسم الصفحة إلى رأس وجسم.

Code الكود القياسي (Boilerplate)

index.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">

  <head>
    <!-- المعلومات الوصفية وإعدادات الصفحة -->
    <meta charset="UTF-8">
    <title>موقعي الأول</title>
  </head>

  <body>
    <!-- محتوى الصفحة الظاهر للمستخدم -->
    <h1>مرحباً بك في عالم الويب</h1>
    <p>هذه أول فقرة أقوم بكتابتها باستخدام HTML.</p>
    <button>اضغط هنا</button>
  </body>

</html>

تحليل الكود (شرح تفصيلي)

الوسم (Tag)	الوظيفة والشرح
<!DOCTYPE html>	إعلان يخبر المتصفح أن الملف مكتوب بإصدار HTML5 الحديث.
<html>	العنصر الجذري (Root Element) الذي يضم كل شيء في الصفحة.
<head>	رأس الصفحة: يحتوي على "الكواليس" مثل العنوان (Title) وترميز اللغة، ولا يظهر محتواه وسط الصفحة.
<body>	جسم الصفحة: الحاوية لكل ما يراه المستخدم (نصوص، صور، فيديوهات).
<meta charset>	يحدد ترميز الحروف (UTF-8) ليسمح بظهور اللغة العربية والرموز بشكل صحيح.

Tools نصائح وأدوات

محرر الأكواد: استخدم VS Code لكتابة الأكواد باحترافية.
المتصفح: استخدم Chrome أو Firefox للتجربة.

نصيحة ذهبية: البرمجة ممارسة وليست حفظاً. حاول كتابة الكود أعلاه بنفسك في ملف جديد لتثبيت المعلومة.

تعلم لغه HTML في 2026