HTML بالعربي: مقدمة في HTML

ما هي HTML؟

HTML اختصار لـ HyperText Markup Language — وهي لغة الترميز التي نبني بها هيكل صفحات الويب. كل موقع تراه على الإنترنت يبدأ من HTML.

ليست HTML لغة برمجة بالمعنى الدقيق (لا تحتوي منطقًا أو شروطًا)، بل لغة وصف تخبر المتصفّح بمكوّنات الصفحة: أين العنوان، وأين الفقرة، وأين الصورة والرابط.

تذكّر هذه القاعدة البسيطة:

HTML = الهيكل (العناوين، الفقرات، الصور، الروابط).
CSS = الشكل (الألوان، المسافات، التصميم).
JavaScript = السلوك (التفاعل والحركة).

كيف تبدو HTML؟

تتكوّن HTML من عناصر (elements) محاطة بأقواس زاوية < > تُسمّى وسوم (tags):

<h1>أهلًا بالعالم</h1>
<p>هذه أول فقرة لي في HTML.</p>

<h1> وسم البداية.
أهلًا بالعالم المحتوى.
</h1> وسم النهاية (لاحظ الشرطة المائلة /).

وسوم أساسية ستستخدمها كثيرًا

<h1> إلى <h6>: العناوين من الأكبر إلى الأصغر.
<p>: فقرة نصّية.
<a href="...">: رابط.
<img src="...">: صورة.
<ul> و <li>: قائمة نقطية وعناصرها.

<a href="https://thecodefix.dev">زُر The Code Fix</a>
<img src="logo.png" alt="شعار الموقع" />

كيف يتعامل المتصفح مع HTML؟

حين تفتح صفحة، يقوم المتصفح بأربع خطوات مبسّطة:

يقرأ ملف HTML من أعلى لأسفل.
يبني منه شجرة عناصر في الذاكرة تُسمّى DOM (Document Object Model) — تمثيل حيّ لكل وسم وعلاقته بالوسوم حوله.
يدمج هذه الشجرة مع تنسيقات CSS لتكوين شجرة عرض (Render Tree).
يرسم النتيجة النهائية بكسلات على الشاشة.

هذا يفسّر سببين مهمّين ستقابلهما لاحقًا: لماذا ترتيب الوسوم في الملف يهم (المتصفح يبنيها بالترتيب)، ولماذا صفحة بها خطأ بسيط في الإغلاق قد تُعرض بشكل غريب — المتصفح يحاول "تخمين" نيتك ليكمل بناء الشجرة رغم الخطأ.

جهّز بيئة عملك

لا تحتاج أي برنامج معقّد لتبدأ:

محرر أكواد — أي محرر نصوص يكفي تقنيًا، لكن Visual Studio Code مجاني وهو الأكثر استخدامًا اليوم بفضل إضافاته (تلوين الكود، الإكمال التلقائي).
متصفح — Chrome أو Firefox أو Edge، لعرض النتيجة وفتح أدوات المطوّر لاحقًا.
أنشئ ملفًا باسم index.html، اكتب بداخله وسوم HTML، ثم افتحه مباشرة بالنقر المزدوج — يفتحه المتصفح فورًا دون أي "تثبيت" أو "تشغيل خادم".

💡 امتداد Live Server في VS Code يعيد تحميل الصفحة تلقائيًا في المتصفح كلما حفظت الملف — يوفر عليك التبديل والتحديث يدويًا كل مرة.

لماذا تتعلّم HTML أولًا؟

إنها أسهل خطوة لدخول عالم البرمجة.
لا تحتاج أي برامج معقّدة — متصفّح ومحرّر نصوص فقط.
كل تقنيات الويب الأخرى تُبنى فوقها.

أخطاء شائعة للمبتدئين

نسيان وسم النهاية </p>.
كتابة src أو href بدون علامتَي تنصيص.
إهمال خاصية alt في الصور (مهمّة للوصول ولمحرّكات البحث).

أسئلة شائعة

هل HTML لغة برمجة؟ لا، هي لغة ترميز لوصف هيكل الصفحة، ولا تحتوي منطقًا أو شروطًا كما في لغات البرمجة مثل جافاسكريبت.

هل أتعلّم HTML قبل CSS و JavaScript؟ نعم، HTML هي الأساس الذي تُبنى فوقه بقية تقنيات الويب، لذا تبدأ بها دائمًا.

كم يستغرق تعلّم HTML؟ أساسياتها تُتقن خلال أيام قليلة، لأنها من أبسط ما يمكن أن تبدأ به في عالم الويب.

🎯 التالي: الهيكل الكامل لأي صفحة HTML — من <!DOCTYPE html> حتى </html>.