حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

فهم الهيكل الأساسي للصفحة | HTML

فهم الهيكل الأساسي لصفحة HTML

النهاردة، إحنا هنرجع لـ "القالب الأساسي" اللي شفناه في أول درس خالص. القالب ده اللي كان فيه أوامر غريبة زي <!DOCTYPE> و <head> و <body>. جه الوقت إننا نفهم كل واحد من دول وظيفته إيه بالظبط، وليه هو موجود في مكانه ده تحديداً. الدرس ده هو تشريح للهيكل الأساسي اللي "لازم" يكون موجود في أي صفحة HTML هتعملها في حياتك.

ما هو السطر الأول: <!DOCTYPE html>؟

أول سطر بنشوفه دايمًا في أي صفحة HTML هو السطر الغريب ده: <!DOCTYPE html>.

السطر ده مهم جدًا جدًا، رغم إنه مش "وسم" (Tag) زي باقي الحاجات اللي اتعلمناها.

خلينا نحلله واحدة واحدة:

  • علامة <!: دي علامة مميزة (لاحظ علامة التعجب !) بتقول للمتصفح "انتبه! ده مش وسم عادي، ده "إعلان" (Declaration) أو "بيان" مهم".
  • DOCTYPE: دي اختصار لـ "Document Type" يعني "نوع المستند".
  • html: دي الكلمة اللي بتقول للمتصفح إن نوع المستند ده هو "HTML".

فالسطر ده كله على بعضه عبارة عن رسالة بسيطة ومباشرة للمتصفح، زي ما تكون بتبدأ كلامك معاه وبتقوله: "يا متصفح، الملف اللي إنت هتقراه ده مكتوب بأحدث إصدار من لغة HTML (اللي هو حالياً HTML5)".

لازم، وأكرر، لازم السطر ده يكون "أول سطر" في الملف. مينفعش ييجي قبله أي حاجة، ولا حتى مسافة فاضية. لو حطيت أي حاجة قبله، المتصفح هيتجاهله وممكن يدخل في مشاكل.

(قاعدة صارمة):
السطر <!DOCTYPE html> لازم "دايمًا" يكون أول سطر في الملف.

لماذا هذا السطر "إعلان" وليس "وسم"؟ (مهم)

دي نقطة مهمة جدًا عشان نفهم الفرق. إحنا اتفقنا في الدرس اللي فات إن "الوسوم" (Tags) هي "الأوامر" اللي بتبني الصفحة.

واتفقنا إن الوسوم نوعين:

  1. وسوم مزدوجة (حاوية): زي <p>...</p>. ليها فتحة وقافلة عشان "تحتوي" حاجة جواها (زي نص الفقرة).
  2. وسوم فارغة (ذاتية الإغلاق): زي <br>. ملهاش قافلة لأنها مش بتحتوي حاجة، هي مجرد أمر (زي "انزل سطر").

الـ DOCTYPE بقى حاجة تالتة خالص. هو "إعلان" (Declaration).

الفرق إيه؟

  • الوسم (Tag): هو جزء من "هيكل" الصفحة. هو اللي بيبني الصفحة نفسها. زي الوسم <p> اللي بيبني "فقرة" نصية بتظهر للزائر.
  • الإعلان (Declaration): هو "معلومة" للمتصفح "قبل" ما يبدأ يبني الصفحة أصلاً. هو مش جزء من الهيكل، هو مجرد "إرشاد" أو "تعليمات" لكيفية قراءة الهيكل اللي جاي بعده.

خصائص الإعلان (DOCTYPE)

عشان هو "إعلان" مش "وسم"، فهو:

  • مالوش وسم إغلاق: لأنه مش بيحتوي على حاجة. هو مجرد معلومة وخلاص. مينفعش تكتب </DOCTYPE> دي خالص.
  • مش حساس لحالة الأحرف: يعني لو كتبته <!doctype html> (بحرف d صغير) هيشتغل عادي. لكن العرف العالمي بين كل المبرمجين إننا بنكتب DOCTYPE بحروف كبيرة (Uppercase) عشان نميزه ويبقى شكله واضح إنه الإعلان اللي بنبدأ بيه.

مثال (1): ملف بدون DOCTYPE (وماذا يحدث)

طيب، إيه اللي يحصل لو إنت كسلت تكتب السطر ده؟ هل الدنيا هتبوظ والصفحة مش هتشتغل؟

الإجابة: الصفحة هتشتغل، بس "غلط" أو "بشكل مش مضمون".

المتصفحات (زي كروم وفايرفوكس) برامج معقدة جدًا، ومطلوب منها إنها تعرض مواقع قديمة جداً (مكتوبة من التسعينات) ومواقع جديدة (مكتوبة النهاردة).

في الماضي، كان فيه إصدارات كتيرة من HTML (زي HTML 4.01, XHTML 1.0)، وكل إصدار كان ليه قواعده. لو إنت مكتبتش السطر ده، المتصفح بيدخل في "وضع التخمين" أو (وضع الفوضى - Quirks Mode).

ما هو "وضع الفوضى" (Quirks Mode)؟

ده معناه إن المتصفح بيحاول يخمن إنت كاتب بأي إصدار قديم، وبيبدأ يطبق قواعد غريبة عشان "يحاول" يخلي شكل الصفحة زي ما كان بيتعرض أيام زمان (أيام متصفح "نتسكيب" مثلاً).

ده بيسبب كوارث في التصميم، خصوصاً مع الـ CSS. هتلاقي نفسك بتقول للـ CSS "خلي الصندوق ده عرضه 100 بيكسل"، فتلاقي المتصفح مخلي عرضه 120 بيكسل، وتفضل تلف حوالين نفسك مش عارف الغلط فين، ويكون السبب كله إنك نسيت سطر الـ DOCTYPE.

لما إنت بتحط السطر <!DOCTYPE html>، إنت بتريحه وبتقوله: "متخمنش حاجة، اشتغل بـ (وضع المعايير القياسية - Standards Mode)"، يعني اتبع أحدث القواعد المظبوطة زي ما الكتاب بيقول.

(نصيحة):
اعتبر السطر ده زي "بسم الله الرحمن الرحيم" قبل ما تبدأ تكتب الكود. لازم تبدأ بيه عشان المتصفح يفهمك صح.

الوسم الجذري (الأم): <html>

خلاص، كتبنا السطر الأول <!DOCTYPE html> والمتصفح عرف إنه هيتعامل مع ملف HTML5.

دلوقتي بيبدأ يدور على "الهيكل" نفسه.

أول وسم حقيقي بيقابله، والوسم اللي "بيحتوي كل حاجة تانية"، هو الوسم <html>.

الوسم ده بنسميه "العنصر الجذري" (Root Element). بالبلدي كده، ده "الوسم الأُم" اللي بيلم كل وسوم الصفحة جواه.

تشبيه: الصندوق الكبير (الكونتينر)

تخيل إن صفحة الويب بتاعتك عبارة عن شحنة كبيرة جدًا. الـ <html> هو "الكونتينر" (Container) أو الصندوق الضخم اللي بنحط جواه كل حاجة.

كل الوسوم التانية (اللي هنشرحها كمان شوية) لازم تكون "متداخلة" (Nested) جوه الوسم ده.

هو وسم مزدوج (حاوي) طبعًا، لأنه بيحتوي كل الصفحة:

  • بيبدأ بـ <html> (دايمًا بعد سطر الـ DOCTYPE).
  • وبينتهي بـ </html> (دايمًا في آخر سطر في الملف).

مينفعش تكتب أي وسم "بره" الصندوق ده (باستثناء الـ DOCTYPE طبعًا).

مثال (تدريب): هيكل ملف فارغ

ده شكل ملف HTML "صحيح" ولكنه "فارغ" تماماً:

مثال (تدريب): هيكل ملف فارغ 

<!DOCTYPE html>
<html>
    
    <!-- كل الأكواد هتتكتب هنا -->
    
</html>

(ملاحظة: السطر <!-- ... --> ده اسمه "تعليق" (Comment)، المتصفح بيتجاهله، وإحنا بنستخدمه عشان نكتب ملاحظات لنفسنا. هنشرحه بالتفصيل في المستقبل).

الوسم <head>: مخ الصفحة (المعلومات الخفية)

دلوقتي إحنا فتحنا الصندوق الكبير <html>.

جوه الصندوق ده، الصفحة بتتقسم "قسمين" اتنين بس مفيش غيرهم. زي جسم الإنسان بالظبط:

  1. الـ <head> (الرأس أو المخ)
  2. الـ <body> (الجسم)

خلينا نتكلم عن القسم الأول: <head>.

الـ <head> هو "المخ" بتاع الصفحة، أو "الكواليس" بتاعتها. ده المكان اللي بنحط فيه كل "المعلومات الوصفية" (Metadata) عن الصفحة.

نقطة مهمة جدًا جدًا: كل حاجة بتتحط جوه الـ <head> (ما عدا استثناء واحد هنقوله كمان شوية) لا تظهر للزائر في الجزء الأبيض من الصفحة.

طيب بنحط فيه إيه طالما مش بيظهر؟

بنحط فيه معلومات "للمتصفح" و "لمحركات البحث" عشان تفهم صفحتنا صح. زي:

  • عنوان الصفحة (<title>): ده الاستثناء الوحيد اللي بيظهر (هنشرحه لوحده).
  • ترميز الحروف (<meta charset="UTF-8">): ده أمر مهم جدًا عشان المتصفح يقرأ الكلام العربي (أو أي لغة تانية) بشكل مظبوط وميطلعش "رموز غريبة" أو "علامات استفهام". هنشرحه بالتفصيل بعدين.
  • ملفات الـ CSS: الأوامر اللي بتدي الصفحة "الألوان" و "الخطوط" و "التصميم". (هنعرف إزاي نستدعيها في المستقبل).
  • ملفات الـ JavaScript: الأوامر اللي بتعمل "الحركة" و "التفاعلات" في الصفحة. (برضه هنعرف إزاي نستدعيها في المستقبل).
  • معلومات لمحرك البحث: زي "وصف" الصفحة اللي بيظهر تحت العنوان في جوجل.

الوسم <title>: عنوان الصفحة (في التاب)

ده بقى هو "الاستثناء" اللي قلنا عليه فوق.

الـ <title> (العنوان) هو وسم مزدوج (ليه فتحة وقافلة) بيتحط "جوه" الـ <head>، وهو ده الحاجة الوحيدة اللي جوه الـ <head> اللي الزائر بيشوفها.

بيشوفها فين بالظبط؟

  • في شريط التاب (Tab): الاسم اللي بيظهر فوق في المتصفح.
  • في المفضلة (Bookmarks): لما حد بيحفظ موقعك في المفضلة، الاسم ده هو اللي بيتسجل.
  • في نتائج بحث جوجل: ده العنوان الأزرق الكبير اللي الناس بتدوس عليه عشان تدخل موقعك.

مثال (تدريب): إضافة عنوان لملف

تعالَى نطور الهيكل بتاعنا ونحطله عنوان. لاحظ التداخل (Nesting) عامل إزاي: الـ <title> "ابن" للـ <head>، والـ <head> "ابن" للـ <html>.

مثال (تدريب): إضافة عنوان لملف 

<!DOCTYPE html>
<html>
    <head>
        <title>دي صفحتي الأولى</title>
    </head>
</html>

لو حفظت الملف ده وفتحته في المتصفح، الصفحة هتكون "بيضا" تماماً (عشان لسه مكتبناش حاجة في الجسم)، بس التاب اللي فوق هيكتب فيه "دي صفحتي الأولى".

(خطأ شائع):
أوعى تحط وسم الـ <title> جوه الـ <body>. مكانه "دايمًا" وأبدًا جوه الـ <head>. هو وسم إجباري في كل صفحة مينفعش تستغنى عنه.

مثال (2): أهمية <title> لمحركات البحث (SEO)

زي ما قلنا، العنوان ده هو اللي بيظهر في جوجل. عشان كده، الوسم ده هو واحد من أهم عوامل الـ "SEO" (تهيئة محركات البحث).

جوجل بيبص على العنوان ده عشان "يفهم" الصفحة دي بتتكلم عن إيه. لو العنوان بتاعك مكتوب كويس وبيوصف المحتوى بدقة، جوجل هيحبه وهيظهره للناس اللي بتبحث عن الموضوع ده.

تدريب: عنوان جيد مقابل عنوان سيء

تخيل عندنا 3 صفحات، شوف الفرق بين العناوين:

  • عنوان سيء جدًا: <title>صفحة جديدة 1</title>
    (ده عنوان ملوش أي معنى، لا الزائر هيفهمه ولا جوجل هيفهمه. لو الزائر حفظ الصفحة دي في المفضلة، عمره ما هيعرف يلاقيها تاني).
  • عنوان سيء: <title>الرئيسية</title>
    (رئيسية إيه؟ رئيسية موقع أخبار ولا موقع طبخ؟ ده عنوان عام جدًا ومش بيوصف حاجة).
  • عنوان جيد: <title>أفضل وصفات الكيك بالشوكولاتة - موقع مطبخي</title>
    (واضح، مباشر، بيحتوي على الكلمة المفتاحية اللي الناس بتبحث عنها، وفي الآخر اسم الموقع).

دايمًا اهتم بكتابة <title> وصفي ودقيق. ده أول خطوة في الاحتراف.

الوسم <body>: جسم الصفحة (كل المحتوى المرئي)

دلوقتي إحنا خلصنا القسم الأول (الكواليس <head>).

القسم التاني والأخير اللي جوه الـ <html> هو الـ <body> (الجسم).

الوسم ده بييجي "بعد" قفلة الـ </head>، ولازم يتقفل </body> "قبل" قفلة الـ </html>.

الـ <body> هو "المسرح".

ده أهم وسم بالنسبة للمحتوى. أي حاجة إنت عايز الزائر "يشوفها" بعينه في الصفحة البيضا، لازم تتحط جوه الـ <body>.

إيه هي الحاجات دي؟

  • العناوين (زي <h1>, <h2>)
  • الفقرات النصية (<p>)
  • الصور (<img>)
  • الروابط (<a>)
  • الجداول (<table>)
  • القوائم (<ul>, <ol>)
  • ... كل شيء مرئي للزائر.

مثال (3): الفرق بين Head و Body (تشبيه المسرح)

عشان المعلومة تثبت، خلينا ناخد التشبيه ده ونكرره.

تخيل إن صفحة الويب بتاعتك عبارة عن "مسرحية":

  • الـ <head> هو "الكواليس":
    الجمهور (الزائر) مش شايف إيه اللي بيحصل في الكواليس. لكن الكواليس دي هي اللي فيها "المخرج" اللي بيدي التعليمات، وفيها "مهندس الإضاءة" (ملفات الـ CSS)، وفيها "مهندس المؤثرات الخاصة" (ملفات الـ JavaScript)، وفيها "اسم المسرحية" (الـ <title>) اللي مكتوب على التذكرة وبره المسرح. لو الكواليس دي مش موجودة، المسرحية هتبوظ.

  • الـ <body> هو "خشبة المسرح":
    ده المكان اللي الجمهور شايفه بعينه. ده اللي بيظهر عليه "الممثلين" (الـ <h1> والنصوص <p>) و "الديكور" (الـ <img>).

تدريب: ماذا لو وضعنا ممثل في الكواليس؟

إيه اللي يحصل لو غلطت وحطيت وسم <h1> (عنوان مرئي) جوه الـ <head> (الكواليس)؟

مثال (تدريب): كود خاطئ (وضع وسم مرئي في الـ head) 

<!-- كود خاطئ جداً -->
<head>
    <title>صفحة غلط</title>
    <h1>ده عنوان المفروض يظهر</h1>
</head>

النتيجة: المتصفحات الحديثة "ذكية". هي هتشوف الـ <h1> وهتقول "ده مش مكانه هنا"، وفي الغالب هتتصرف من نفسها "وتنقل" الوسم ده وتحطه في الـ <body> بالنيابة عنك عشان تصلح غلطتك.

بس أوعى تعتمد على ده! ده سلوك غير قياسي وممكن يخلي الصفحة "تضرب" في متصفحات تانية أو يخلي ملفات الـ CSS والـ JavaScript تشتغل غلط.

القاعدة: المحتوى المرئي مكانه الـ <body>. المعلومات الخفية مكانها الـ <head>.

تجميع الهيكل بالكامل (مع المسافات البادئة)

تعالَى بقى نجمع كل اللي قلناه ده في شكل الكود الكامل، ونشوف التداخل (Nesting) الصح عامل إزاي.

لاحظ إننا بنستخدم "مسافات بادئة" (Indentation) عشان نخلي الكود مقروء. يعني الحاجة اللي "جوه" حاجة، بندخلها شوية بالمسطرة أو بالتاب. ده مش إجباري عشان الكود يشتغل، لكنه "إجباري" عشان تكون مبرمج شاطر ونضيف والكود بتاعك يتفهم.

الهيكل الأساسي الثابت (index.html) 

<!DOCTYPE html>

<html> <!-- الأب الكبير أو الجذر -->

    <head> <!-- الابن الأول: الكواليس (المخ) -->
        
        <!-- المعلومات الخفية للمتصفح -->
        <title>عنوان صفحتي اللي بيظهر في التاب</title>
        
    </head>

    <body> <!-- الابن الثاني: المسرح (الجسم) -->
        
        <!-- كل المحتوى المرئي هيتحط هنا -->
        <h1>أهلاً بك في موقعي</h1>
        <p>ده أول درس في الهيكل الأساسي.</p>
        
    </body>

</html> <!-- قفلة الأب الكبير -->

تحليل الهيكل ده (علاقة الأب والابن)

فهم علاقات التداخل دي (مين جوه مين) هو أهم حاجة في الـ HTML:

  • الـ <html> هو "الأب" (Parent) لكل حاجة.
  • الـ <head> والـ <body> هما "أبناء" (Children) للـ <html>. وهما "إخوات" (Siblings) في نفس المستوى (ده بييجي الأول وده بييجي التاني).
  • الـ <title> هو "ابن" للـ <head>.
  • الـ <h1> والـ <p> هما "أبناء" للـ <body>.

مينفعش الـ <title> (الحفيد) ييجي مباشرة جوه الـ <html> (الجد). لازم ييجي جوه أبوه الـ <head>.

(خلاصة الدرس):
1. <!DOCTYPE>: إعلان بيقول للمتصفح "إحنا HTML5". بييجي أول سطر.
2. <html>: الصندوق الكبير اللي بيلم كل الوسوم.
3. <head>: الكواليس. فيها المعلومات الخفية (زي الـ CSS) والعنوان (<title>).
4. <body>: المسرح. فيه كل المحتوى المرئي (العناوين، الصور، النصوص).
5. الترتيب: لازم الـ <head> ييجي الأول (ويتقفل)، وبعدين الـ <body> ييجي بعده (ويتقفل).