قبل أن تكتب أي كود، يجب أن تفهم ما الذي يحدث فعلاً عندما تفتح موقعاً على الإنترنت.
عندما تكتب google.com في المتصفح وتضغط Enter، ماذا يحدث؟
متصفحك (Chrome أو Firefox) يرسل "طلباً" عبر الإنترنت يقول: "أعطني صفحة google.com"
جهاز كمبيوتر ضخم مكان ما في العالم (يُسمى السيرفر) يستلم طلبك ويرسل لك ملفات.
يستلم المتصفح ثلاثة أنواع من الملفات: HTML (الهيكل) + CSS (التنسيق)
+ JavaScript (التفاعل)
المتصفح يقرأ هذه الملفات ويحولها إلى ما تراه — نصوص، صور، أزرار، وكل شيء.
تشبيه المنزل: فكر في بناء موقع كبناء منزل.
HTML = الجدران والأعمدة والسقف (الهيكل الأساسي)
CSS = الدهانات والديكورات والإضاءة (المظهر والجمال)
JavaScript = الكهرباء والسباكة والمصاعد (التفاعل والحركة)
HTML اختصار لـ HyperText Markup Language — وهي ليست لغة برمجة بالمعنى الحقيقي، بل هي لغة وصفية. أي أنك تصف للمتصفح ما يجب أن يعرضه.
الـ Tag هي كلمة مغلّفة بين رمزَي أقل من وأكبر من. وكل محتوى في HTML يُوضع بين tag افتتاح وtag إغلاق.
/ قبل الاسم.
هذه الـ / تعني "إغلاق" أو "نهاية" العنصر.
بعض العناصر لا تحتوي على أي محتوى داخلها — مثل الصور وفواصل الأسطر. هذه لا تحتاج tag إغلاق:
<br> — يُنزل سطراً جديداً<img src="صورة.jpg"> — يعرض صورة<hr> — يرسم خطاً أفقياً فاصلاً
كل صفحة HTML في الدنيا تبدأ بنفس الهيكل الأساسي. دعنا نشرح كل سطر فيه تفصيلاً:
<!DOCTYPE html><html lang="ar" dir="rtl">lang="ar" تخبر محركات البحث أن لغة
الصفحة عربية. dir="rtl" (Right To Left) تجعل النص يُكتب من اليمين لليسار.
<head>...</head><meta charset="UTF-8">ط±ط¨ظˆط·.
<body>...</body>لا تحتاج إلا لشيئين: محرر كود ومتصفح. هذا كل شيء.
اذهب إلى code.visualstudio.com وحمّل النسخة المناسبة لجهازك (Windows / Mac /
Linux). شغّل برنامج التثبيت واتبع الخطوات.
أنشئ مجلداً في أي مكان باسم my-website. التنظيم مهم — ضع كل ملفات مشروع واحد في
مجلد واحد.
افتح VS Code ← اضغط Open Folder ← File ← اختر المجلد الذي أنشأته.
في الشريط الجانبي اضغط على أيقونة "New File" ← سمّه index.html. الاسم
index هو الاسم الافتراضي لأي موقع.
داخل الملف الفارغ اكتب ! فقط (علامة التعجب) ثم اضغط Tab. VS Code
سيكتب الهيكل الكامل تلقائياً!
اضغط بالزر الأيمن على اسم الملف في VS Code ← Open with Live Server. أو انقر
نقراً مزدوجاً على الملف من Explorer.
Ctrl + S — حفظ الملفCtrl + / — تحويل السطر إلى تعليقAlt + Shift + F — تنسيق الكود تلقائياً
لنبني معاً أول صفحة حقيقية ونشرح كل سطر فيها:
خطأ: <p>هذا نص — صواب: <p>هذا نص</p>
بعض المتصفحات تتسامح معه لكن النتائج غير متوقعة. دائماً أغلق ما تفتحه.
يجب أن تكون لكل صفحة <h1> واحدة فقط. للعناوين الإضافية استخدم
h2 وh3...
بدون <meta charset="UTF-8"> ستظهر الأحرف العربية كرموز غريبة وغير مفهومة.
أي محتوى تريد إظهاره للزائر يجب أن يكون داخل <body>...</body> فقط.
4 أسئلة تختبر ما تعلمته — يجب الإجابة على جميعها صحيحاً للمتابعة.
س1: ما هو السطر الأول الذي يجب كتابته في كل ملف HTML؟
س2: أين تُكتب العناوين والنصوص والصور التي تريد إظهارها للزائر؟
س3: ما وظيفة <meta charset="UTF-8">؟
س4: في VS Code، ما هو الاختصار الذي يكتب هيكل HTML بالكامل تلقائياً؟