الدرس 2: تشريح ملف HTML.. ما الذي يراه المتصفح حقيقةً؟
تعلم البنية التشريحية لملف HTML. اكتشف أهمية DOCTYPE، والفرق الجوهري بين وسوم الرأس (head) والجسم (body)، وتعرف على الوسوم ذاتية الإغلاق في كودك.
تخيل ملف الـ HTML كأنه "رسالة" مرسلة إلى المتصفح. لكي يتمكن المتصفح من قراءتها وتنفيذ أوامرك بدقة، يجب أن تكون هذه الرسالة منظمة وفق هيكل محدد وثابت.
1. الكلمة الافتتاحية: <!DOCTYPE html>
أول سطر ستراه دائماً في أي ملف HTML احترافي هو هذا الوسم.
ما هو؟ هو إعلان (Declaration) وليس وسماً برمجياً عادياً.
لماذا هو مهم؟
هو يخبر المتصفح: "انتبه، هذا الملف مكتوب بلغة HTML5 (أحدث إصدار)". بدون هذا السطر، قد يقرأ المتصفح صفحتك بطريقة قديمة تؤدي إلى ظهور التصميم بشكل خاطئ أو "مشوه".
2. الحاوية الكبرى: وسوم <html lang="ar">
هذا الوسم هو "الأب" لكل شيء في الصفحة. هو الذي يخبر المتصفح أين يبدأ الكود وأين ينتهي.
نصيحة من "الشيفرة":
دائماً أضف خاصية lang="ar" لإخبار محركات البحث أن محتوى موقعك باللغة العربية، مما يحسن ظهورك في نتائج البحث المحلية.
3. الفرق الجوهري: الرأس <head> والجسم <body>
هنا يقع أغلب الخلط لدى المبتدئين. لنتفق على قاعدة بسيطة:
الرأس <head> (خلف الكواليس):
هو "عقل" الصفحة. كل ما يوضع هنا لا يراه المستخدم مباشرة داخل الصفحة، بل يراه المتصفح ومحركات البحث. مثل: (عنوان الصفحة في التبويب، وصف الموقع، الروابط بملفات CSS).
الجسم <body> (ساحة العرض):
هو "قلب" الصفحة. كل شيء تضعه هنا هو ما يراه الزائر فعلياً (النصوص، الصور، الأزرار، الفيديوهات).
4. الوسوم الذاتية (Self-closing Tags)
أغلب الوسوم في HTML تأتي كـ "زوج" (وسم فتح ووسم إغلاق)، مثل: <p>نص</p>. لكن هناك متمردون في عالم HTML!
هناك وسوم تسمى ذاتية الإغلاق، وهي التي لا تحتوي على نص بداخلها، بل تقوم بمهمة محددة وتنتهي، مثل:
<br>: للنزول سطراً جديداً.
<img>: لإضافة صورة.
<meta>: لإضافة معلومات للمتصفح.
<hr>: لإضافة خط أفقي فاصل.
5. التشريح الكامل للكود
لنطبق الآن ما تعلمناه في "الشيفرة" العملية:
مثال برمجى الدرس الثاني
💡 تحدي "الشيفرة"
قم بفتح ملفك السابق، وحاول إضافة وسم <hr> بين العنوان والفقرة، ثم أضف وسم <br> داخل الفقرة نفسها.
ماذا لاحظت؟ هل احتجت لكتابة وسم إغلاق لهذه العناصر؟ شاركنا ملاحظتك في قسم التعليقات!