شرح الهيكل الأساسي لـ HTML بالعربي — بنية صفحة الويب
في الدرس السابق عرفنا ما هي HTML. الآن جاء وقت أن نكتب أول صفحة HTML حقيقية ونفهم كل جزء فيها بدقة. هذا الدرس هو أهم درس في كل الكورس — لأن كل صفحة ويب ستبنيها في حياتك لها نفس الهيكل الأساسي هذا.
كيف تبدو صفحة HTML الكاملة؟
إليك النموذج الكامل لأي صفحة HTML — انظر إليه بهدوء:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>اسم الصفحة يظهر هنا</title>
</head>
<body>
<h1>مرحباً! هذا العنوان الرئيسي للصفحة</h1>
<p>وهذه فقرة نصية عادية.</p>
</body>
</html>
هذا هو كل ما تحتاجه! الآن سنشرح كل سطر ماذا يعني.
شرح كل جزء — سطراً سطراً
| الوسم | ماذا يفعل؟ |
|---|---|
<!DOCTYPE html> |
أول سطر دائماً في أي صفحة. يقول للمتصفح: "هذا ملف HTML5 حديث — اقرأه بالطريقة الصحيحة". |
<html> |
الغلاف الخارجي لكل شيء. كل وسوم الصفحة توضع بداخله. يُغلق في نهاية الصفحة بـ </html>. |
<head> |
قسم المعلومات الخفية. لا يراه الزائر مباشرة، لكنه مهم جداً. يحتوي على عنوان الصفحة، وصفها، وملفات CSS. |
<meta charset="UTF-8"> |
يخبر المتصفح بترميز النصوص. هذا ضروري لعرض اللغة العربية بشكل صحيح. |
<title> |
العنوان الذي يظهر في تبويب المتصفح (وعلى نتائج جوجل أيضاً). |
<body> |
كل ما يراه الزائر على الصفحة: النصوص، العناوين، الصور، الأزرار — كلها توضع هنا. |
قسمان رئيسيان فقط — head وbody
الطريقة الأسهل لتذكر هيكل HTML: تخيّل أن الصفحة كإنسان.
<head>= الرأس: يحتوي على العقل والمعلومات — لا يُرى من الخارج، لكنه يتحكم في كل شيء.<body>= الجسم: هو ما يراه الناس — وجهك، يديك، كل ما يظهر للعالم.
القاعدة الذهبية: أي شيء تريد أن يراه الزائر → ضعه في<body>. أي شيء يخص إعدادات الصفحة → ضعه في<head>.
خاصية lang — لماذا نكتب lang="ar"؟
لاحظت في المثال أننا كتبنا <html lang="ar">.
هذه الخاصية تخبر المتصفح ومحركات البحث أن لغة الصفحة هي العربية.
هذا مهم لثلاثة أسباب:
- يُحسّن ظهور صفحتك على جوجل عند البحث بالعربية
- يساعد أدوات قراءة الشاشة (للمكفوفين) على نطق النص بشكل صحيح
- يُفعّل خاصية الاتجاه من اليمين لليسار تلقائياً في بعض المتصفحات
lang="ar". وإذا كانت بالفرنسية اكتب lang="fr"، وبالإنجليزية lang="en". عادة عدم كتابتها لا يوقف الصفحة، لكنها ممارسة احترافية صحيحة.
وسم <meta charset> — سر عرض العربية بشكل صحيح
إذا فتحت يوماً صفحة HTML وظهرت لك حروف غريبة بدل النص العربي — فالمشكلة على الأغلب هي غياب وسم charset.
<!-- ✅ صحيح — يعرض العربية بشكل سليم -->
<meta charset="UTF-8">
<!-- ❌ بدون هذا الوسم قد تظهر ??? أو □□□ بدل النص العربي -->
UTF-8 هو ترميز عالمي يدعم العربية، الإنجليزية، الصينية، وكل لغات العالم في نفس الوقت. استخدمه دائماً.
أين تكتب كود HTML؟
كل ما تحتاجه لبدء الكتابة هو:
- محرر نصوص: مثل VS Code (الأفضل والمجاني) أو Notepad++ أو حتى Notepad العادي
- متصفح: Chrome أو Firefox أو Edge أو أي متصفح آخر
تكتب الكود في المحرر، تحفظ الملف بامتداد .html (مثلاً index.html)، ثم تفتحه في المتصفح. النتيجة تظهر فوراً.
index.html، انسخ المثال الأول من هذا الدرس، ثم افتحه في المتصفح. ستشاهد صفحتك الأولى تعمل!
هل يهم الترتيب؟ — نعم جداً!
الهيكل الأساسي لـ HTML لا يتغير أبداً. الترتيب الصحيح هو:
<!DOCTYPE html> ← أولاً دائماً
<html> ← يحتوي على كل شيء
<head> ← المعلومات والإعدادات
<title>...</title>
</head>
<body> ← المحتوى الذي يراه الزائر
...
</body>
</html> ← إغلاق نهائي
<body> أو يكتبون <body> قبل <head>. المتصفح قد يتسامح مع هذا، لكنه يُسبب مشاكل مع SEO والتنسيق. التزم بالترتيب الصحيح دائماً.
مثال عملي كامل — صفحة تعريفية بسيطة
إليك صفحة HTML كاملة تعرّف عن شخص ما:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحة بلال — مطور ويب مبتدئ</title>
</head>
<body>
<h1>مرحباً، أنا بلال!</h1>
<p>أنا مبتدئ في تطوير الويب وأتعلم HTML الآن.</p>
<p>هدفي: بناء موقعي الأول خلال شهر واحد.</p>
</body>
</html>
هذه الصفحة وإن كانت بسيطة فهي صحيحة 100% وستعمل في أي متصفح. المحتوى يكبر ويتطور مع الدروس القادمة — لكن الهيكل يبقى نفسه دائماً.
الأسئلة الشائعة — FAQ
هل يجب كتابة <!DOCTYPE html> في كل صفحة؟
نعم. هذا السطر ضروري في بداية كل ملف HTML. بدونه قد يدخل المتصفح في "وضع التوافق" القديم ويعرض الصفحة بشكل غير صحيح.
هل الوسوم حساسة لحالة الأحرف (كبيرة/صغيرة)؟
HTML لا تفرق بين <HTML> و<html>. لكن القاعدة المتفق عليها بين المطورين هي كتابة كل الوسوم بأحرف صغيرة — وهذا أيضاً ما تنصح به معايير HTML5.
ما هو الفرق بين <head> و<header>؟
<head> هو جزء من هيكل HTML الأساسي ويحتوي معلومات خفية عن الصفحة.
<header> هو وسم دلالي يستخدم داخل <body> لتمثيل رأس الصفحة المرئي (كالشعار والقائمة). سنتعلمه لاحقاً.
هل يجب إغلاق وسم <!DOCTYPE html>؟
لا. هذا الوسم استثناء — لا يحتاج إلى إغلاق على الإطلاق. إنه مجرد إعلان يُقرأ مرة واحدة في البداية.
ما الذي يحتويه <head> عادةً في مواقع حقيقية؟
في المواقع الحقيقية الاحترافية، يحتوي <head> على عشرات الأسطر: ملفات CSS، وصف الصفحة لجوجل، صورة المعاينة عند المشاركة، الأيقونة، وأكثر. سنتعلم هذا تدريجياً في الدروس القادمة.