ما هو HTML؟ — أساسيات HTML

ما هو HTML؟

كل صفحة ويب تراها مبنية من ثلاث طبقات:

| اللغة | الدور | تشبيه |

|---|---|---|

| HTML | الهيكل والمحتوى: عناوين، فقرات، صور، روابط | هيكل البيت وجدرانه |

| CSS | الشكل: ألوان، خطوط، تخطيط | الطلاء والأثاث |

| JavaScript | السلوك والتفاعل | الكهرباء والأجهزة |

HTML اختصار HyperText Markup Language: لغة ترميز وليست لغة برمجة — لا متغيرات ولا شروط ولا حلقات. أنت "تُعلِّم" أجزاء المحتوى لتقول للمتصفح: هذا عنوان، هذه قائمة، هذا رابط.

الوسم والعنصر والخاصية

<a href="https://kodax.app">موقع Kodax</a>

- <a> وسم الفتح و </a> وسم الإغلاق (لاحظ الشرطة /).

- href="..." خاصية (attribute): معلومة إضافية بصيغة اسم="قيمة" داخل وسم الفتح.

- العنصر = وسم الفتح + المحتوى + وسم الإغلاق.

بعض العناصر فارغة بلا محتوى ولا وسم إغلاق: <img>، <br>، <input>، <meta>.

التداخل (Nesting)

العناصر توضع داخل بعضها، ويجب أن تُغلق بالترتيب العكسي:

<p>هذا نص <strong>مهم جداً</strong> في فقرة.</p>

❌ الخطأ الشائع: <p><strong>نص</p></strong> — المتصفح سيحاول "إصلاحه" بطريقته وقد تحصل على نتيجة غير متوقعة.

أول صفحة كاملة

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

- <!DOCTYPE html>: يخبر المتصفح أن هذه صفحة HTML5 حديثة.

- <html lang="ar" dir="rtl">: الجذر، واللغة عربية، والاتجاه من اليمين لليسار.

- <head>: معلومات عن الصفحة لا تظهر في محتواها (الدرس التالي).

- <body>: كل ما يظهر للزائر.

كيف تجرّب؟

1. افتح محرر نصوص (VS Code مثلاً) واحفظ الملف باسم index.html.

2. افتح الملف في المتصفح (نقر مزدوج).

3. عدّل واحفظ ثم حدّث الصفحة (F5).

أداة مهمة: انقر بالزر الأيمن على أي صفحة ← Inspect / فحص لترى عناصر HTML الخاصة بها. هكذا تتعلم من مواقع حقيقية.

المتصفح متسامح — لا تعتمد على ذلك

المتصفح لا يعرض أخطاء: إذا نسيت إغلاق وسم سيخمّن. هذا يخفي الأخطاء بدل إظهارها. تحقق من صفحاتك بالمدقق الرسمي validator.w3.org.

تمرين

أنشئ index.html فيها عنوان باسمك، وفقرة عن نفسك تحتوي كلمة مهمة داخل <strong>، ورابطاً لموقعك المفضل. افتحها بالمتصفح ثم افحصها بـ Inspect.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>صفحتي الأولى</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه أول صفحة HTML لي، وأنا أتعلم <strong>بناء المواقع</strong> مع Kodax.</p>
    <p>زر <a href="https://developer.mozilla.org/ar/">مرجع MDN</a> لتتعلم المزيد.</p>
</body>
</html>