تعلم HTML للمستوى مبتدئ - الدرس 1: ما هي لغة HTML وهيكل الصفحة الأساسي

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

1. ما هي لغة HTML؟ وكيف تعمل؟

كلمة HTML هي اختصار لـ HyperText Markup Language (لغة توصيف النص الفائق). من الضروري معرفة أن HTML ليست لغة برمجة فعلية (مثل JavaScript أو Python) حيث إنها لا تحتوي على عمليات منطقية أو حسابية، بل هي لغة توصيف وتنسيق هيكلي، وظيفتها الأساسية هي إخبار متصفح الويب (مثل Chrome أو Firefox) بنوع كل عنصر في الصفحة (هل هذا نص؟ عنوان؟ صورة؟ زر؟).

مفهوم الوسوم (Tags) والعناصر (Elements)

تعتمد لغة HTML كلياً على ما يسمى الوسوم (Tags). يتكون عنصر الويب النموذجي من ثلاثة أجزاء رئيسية:

وسم البداية (Opening Tag): يحدد بداية العنصر ونوعه، مثل <p> للفقرات النصية.
المحتوى (Content): النص أو الوسائط التي ستظهر للمستخدم.
وسم النهاية (Closing Tag): يماثل وسم البداية ولكنه يحتوي على خط مائل / مثل </p>.

إليك مثال يوضح كيف نكتب فقرة نصية بسيطة في HTML:

<p>مرحباً بك في عالم تطوير الويب!</p>

2. الهيكل الأساسي لصفحة HTML (Document Structure)

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

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="UTF-8">
    <title>صفحتي الأولى</title>
  </head>
  <body>
    <h1>أهلاً بكم في درسي الأول!</h1>
    <p>هذا هو المحتوى الحقيقي الذي يراه الزائر على الشاشة.</p>
  </body>
</html>

شرح أجزاء الهيكل الأساسي:

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

تطبيق عملي: أنشئ صفحتك الأولى الآن!

افتح أي محرر نصوص بسيط (مثل VS Code أو حتى Notepad على Windows).
انسخ كود الهيكل الأساسي الموضح في الأعلى والصقه في المحرر.
احفظ الملف باسم index.html (تأكد أن الامتداد هو .html وليس .txt).
انقر مرتين على الملف ليتم فتحه داخل متصفحك، وشاهد صفحتك الأولى تعمل بنجاح!

للمزيد من التوسع والاطلاع على المعايير القياسية للغة، يمكنك دائماً زيارة توثيق HTML الرسمي على شبكة مطوري موزيلا (MDN).

في الدرس القادم، سنتعلم بالتفصيل كيفية التعامل مع مختلف أنواع النصوص، العناوين، والفقرات، وكيفية تنسيقها دلالياً داخل لغة HTML.