حلول مصر

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

شرح رأس الصفحة HTML

شرح الوسم <head> (رأس الصفحة)

في جميع الدروس السابقة (من الدرس الثالث حتى الرابع عشر)، كان تركيزنا منصباً بالكامل على الوسم <body>. لقد تعلمنا كيف نبني "الجسم" المرئي للصفحة: العناوين، الفقرات، القوائم، الصور، الجداول، النماذج، وحتى الحاويات الهيكلية مثل <div> و <section>.

الآن، حان الوقت للعودة إلى الهيكل الأساسي الأول الذي تعلمناه، وإلقاء نظرة فاحصة على "الجزء الخفي" من الصفحة. كما نتذكر، تنقسم صفحة HTML إلى قسمين رئيسيين داخل <html>: القسم <head> (الرأس)، والقسم <body> (الجسم).

هذا الدرس مخصص بالكامل لشرح الوسم <head>. سنتعلم ما هي "البيانات الوصفية" (Metadata)، ولماذا هذا القسم هو "عقل" الصفحة، وكيف نستخدمه لإضافة العنوان، والوصف، ودعم اللغة العربية، والأهم من ذلك، كيف نستخدمه لربط ملفات التنسيق (CSS) وملفات البرمجة (JavaScript) التي تمنح الصفحة مظهرها وتفاعليتها.

ما هو الوسم <head>؟ (العقل الخفي)

الوسم <head> (الرأس) هو "حاوية" (Container) مزدوجة (<head>...</head>) تأتي "دائماً" كأول ابن مباشر للوسم <html> (يسبق الوسم <body>).

وظيفته الأساسية هي احتواء "البيانات الوصفية" (Metadata) للمستند. البيانات الوصفية هي "بيانات تصف البيانات" (Data about Data).

يمكن تشبيه <head> بـ "غرفة التحكم" أو "الكواليس" لصفحة الويب. الزائر (الجمهور) لا يرى ما بداخل هذه الغرفة مباشرة، ولكنه يرى "تأثير" ما بداخلها.

فبينما <body> هو "المسرح" الذي يظهر عليه المحتوى المرئي، فإن <head> هو الذي يحتوي على "النص" (Script) الذي يحدد عنوان المسرحية، و "مهندس الإضاءة" (CSS)، و "مهندس المؤثرات الخاصة" (JavaScript).

الفرق الجوهري: <head> مقابل <body>

هذا هو الفرق الأهم الذي يجب أن يفهمه المبتدئ:

  • <body> (الجسم):
    • يحتوي على: كل المحتوى "المرئي" للمستخدم.
    • مثال: العناوين <h1>، الفقرات <p>، الصور <img>.
    • النتيجة: تُعرض مباشرة على الصفحة البيضاء للمتصفح.
  • <head> (الرأس):
    • يحتوي على: "معلومات" و "إعدادات" للمتصفح ومحركات البحث.
    • مثال: <title>, <meta>, <link>, <style>.
    • النتيجة: "لا تُعرض" على الصفحة البيضاء للمتصفح (باستثناء <title> الذي يظهر في شريط التبويب).

الخطأ الشائع للمبتدئين هو وضع وسوم المحتوى (مثل <h1> أو <p>) داخل <head>. هذا خطأ هيكلي فادح، وحتى لو "حاول" المتصفح تصحيحه، فإنه يكسر القواعد الدلالية للغة.

العنصر المرئي الوحيد: الوسم <title>

الوسم <title> (العنوان) هو وسم مزدوج (<title>...</title>) وهو العنصر "الإلزامي" الوحيد داخل <head> (في المعايير القديمة).

إنه العنصر "شبه المرئي" الوحيد في <head>. هو لا يظهر على الصفحة نفسها، ولكنه يظهر في ثلاثة أماكن حيوية:

  1. شريط التبويب (Browser Tab): هو النص الذي تراه في أعلى نافذة المتصفح.
  2. المفضلة (Bookmarks): هو الاسم الافتراضي الذي يتم حفظ الصفحة به عندما يضيفها المستخدم إلى مفضلته.
  3. نتائج محركات البحث (SERPs): هو "العنوان الأزرق" الكبير القابل للنقر الذي تراه في نتائج بحث جوجل.

لهذه الأسباب، يُعد الوسم <title> مهماً للغاية لتجربة المستخدم (UX) ولتهيئة محركات البحث (SEO).

مثال (1): التأثير العملي للوسم <title>

يوضح هذا المثال ملف HTML أساسي، مع التركيز على مكان <title>.

مثال (1): استخدام الوسم <title> 

<!DOCTYPE html>
<html>
    <head>
        <!-- هذا النص سيظهر في شريط التبويب -->
        <title>درس الوسم Head - صفحتي الأولى</title>
    </head>
    
    <body>
        <h1>مرحباً بالعالم</h1>
        <p>هذا المحتوى يظهر على الصفحة.</p>
    </body>
</html>

مقدمة عن الوسم <meta> (البيانات الوصفية)

الوسم <meta> هو الوسم الرئيسي لاحتواء "البيانات الوصفية" (Metadata). إنه وسم "فارغ" (ذاتي الإغلاق) يستخدم لنقل معلومات متنوعة إلى المتصفح أو محركات البحث.

هناك العديد من وسوم <meta> (الكثير منها متقدم)، ولكننا سنركز فقط على أهم اثنين للمبتدئين.

أهم وسم <meta>: charset="UTF-8" (لدعم العربية)

هذا هو الوسم الأهم على الإطلاق لأي مطور يتحدث باللغة العربية.

ما هو؟
charset هو اختصار لـ "Character Set" (مجموعة الأحرف). إنه يخبر المتصفح "بكيفية" قراءة الرموز والأحرف في الملف.

لماذا UTF-8؟
هو معيار ترميز عالمي (Unicode) يدعم "جميع" اللغات في العالم، بما في ذلك اللغة العربية (بحروفها المتصلة والمنفصلة)، والإنجليزية، والصينية، والرموز التعبيرية (Emojis).

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

القاعدة: يجب أن يكون <meta charset="UTF-8"> هو "أول" عنصر تضعه داخل <head> (تحت <title> أو حتى قبله) لضمان أن يقرأ المتصفح الصفحة بالترميز الصحيح من البداية.

مثال (2): أهمية <meta charset>

هذا هو الهيكل "الصحيح" الأدنى لأي صفحة باللغة العربية.

مثال (2): إضافة charset لدعم العربية 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>صفحة تدعم اللغة العربية</title>
    </head>
    
    <body>
        <h1>أهلاً وسهلاً</h1>
        <p>هذا النص سيظهر بشكل صحيح.</p>
    </body>
</html>

الوسم <meta>: الوصف (description)

هذا هو الوسم الثاني الأهم للمبتدئين، وهو الوسم الذي أشرت إليه بـ "الوصف".

يُستخدم هذا الوسم لإعطاء "محركات البحث" (مثل جوجل) "وصفاً" موجزاً ومخصصاً لمحتوى الصفحة.

الصيغة: <meta name="description" content="هنا تضع وصفاً جذاباً للصفحة...">

  • name="description": يُخبر المتصفح أننا نُعرّف "الوصف".
  • content="...": يحتوي على "النص" الفعلي للوصف (عادة حوالي 150-160 حرفاً).

أين يظهر هذا؟
هذا النص "لا يظهر" في صفحتك. ولكنه يظهر في "نتائج بحث جوجل" كنص أسود صغير "تحت" العنوان الأزرق (<title>). إنه بمثابة "إعلان" صغير لصفحتك لجذب المستخدمين للنقر.

مثال (3): إضافة وصف (description) 

<head>
    <meta charset="UTF-8">
    <title>متجر الأزياء الحديثة - ملابس للجميع</title>
    
    <!-- هذا الوصف سيظهر في جوجل -->
    <meta 
        name="description" 
        content="اكتشف أحدث صيحات الموضة في متجرنا. نقدم ملابس رجالية ونسائية وأطفال بأسعار تنافسية."
    >
</head>

تنبيه هام: كيف يرتبط <head> بلغة CSS؟

كما أشرت في طلبك، هذا هو أحد أهم أدوار <head>. حتى الآن، كل صفحاتنا تبدو "بسيطة" (خلفية بيضاء، خط أسود افتراضي).

لغة CSS هي المسؤولة عن إضافة "الألوان"، "الخطوط"، "التخطيطات"، و "الجماليات" للصفحة.

ولكن، يجب على ملف HTML أن "يعرف" أين يجد تعليمات CSS هذه. الوسم <head> هو المكان الذي نضع فيه هذه التعليمات.

أنت "لست بحاجة" لفهم "كيف" تُكتب CSS الآن، ولكنك "بحاجة" لفهم "كيف" نربطها. هناك طريقتان أساسيتان.

الطريقة الأولى (المُثلى): ربط CSS خارجي بالوسم <link>

هذه هي الطريقة الاحترافية والموصى بها بنسبة 99% من الوقت.

الفكرة هي كتابة "كل" أكواد CSS في ملف منفصل تماماً (بامتداد .css، مثل style.css)، ثم نأمر ملف HTML بـ "ربط" (Link) هذا الملف وقراءة التعليمات منه.

نستخدم لهذا الغرض الوسم <link>، وهو وسم "فارغ" (ذاتي الإغلاق) يوضع داخل <head>.

يتطلب هذا الوسم خاصيتين أساسيتين:

  • rel="stylesheet": (اختصار "Relationship"). هذا يخبر المتصفح أن العلاقة بين هذا الملف والصفحة هي "صفحة أنماط" (Stylesheet).
  • href="style.css": (اختصار "Hypertext Reference"). هذا يحدد "مسار" ملف CSS (تماماً مثلما نفعل مع <a> أو <img>).

الميزة الكبرى: يمكنك ربط "نفس" ملف style.css بـ 100 صفحة HTML. وعندما تريد تغيير لون (مثلاً) جميع العناوين في موقعك، فإنك تعدل "ملفاً واحداً" (style.css)، فيتغير المظهر في الـ 100 صفحة تلقائياً. هذا هو مبدأ "فصل الاهتمامات".

مثال (3): هيكل ربط ملف CSS خارجي

مثال (3): ربط ملف CSS (خارجي) 

<head>
    <meta charset="UTF-8">
    <title>صفحة ذات تنسيق</title>
    <meta name="description" content="صفحة تستخدم CSS خارجي.">
    
    <!-- 
      هذا السطر يخبر المتصفح:
      "اذهب، ابحث عن ملف اسمه style.css، وقم بتطبيق كل التنسيقات الموجودة به على هذه الصفحة."
    -->
    <link rel="stylesheet" href="style.css">
</head>

الطريقة الثانية (للتجربة): كتابة CSS داخلي بالوسم <style>

هذه هي الطريقة التي أشرت إليها (أن "CSS يُكتب بداخله").

الوسم <style> هو وسم "مزدوج" (<style>...</style>) يوضع أيضاً داخل <head>.

يسمح لك هذا الوسم بكتابة أكواد CSS "مباشرة" داخل ملف HTML.

متى نستخدمه؟
يُستخدم غالباً "للتجارب السريعة" أو إذا كان لديك تنسيق "خاص جداً" ينطبق على "هذه الصفحة الواحدة فقط" ولا ينطبق على أي صفحة أخرى في الموقع.

عيوبه:
يجعل ملف HTML فوضوياً وضخماً. كما أنه "يكسر" مبدأ فصل الاهتمامات. إذا كان لديك 10 صفحات، وكتبت <style> في كل واحدة، فستضطر لتعديل 10 ملفات لتغيير لون واحد.

مثال (4): هيكل كتابة CSS داخلي

(ملاحظة: كما طلبت، لن نشرح كود CSS نفسه، ولكن سنوضح "أين" يُكتب).

مثال (4): كتابة CSS (داخلي) 

<head>
    <meta charset="UTF-8">
    <title>صفحة ذات تنسيق داخلي</title>
    
    <!-- 
      هنا نكتب أكواد CSS مباشرة.
      (سيتم شرح هذه الأكواد في دروس CSS)
    -->
    <style>
        
        /* (مثال: body { background-color: lightblue; } )
           (سيتم شرح هذه القواعد لاحقاً) 
        */
        
    </style>
</head>

عناصر أخرى شائعة: <link rel="icon"> (الأيقونة المصغرة)

بالإضافة لربط CSS، يُستخدم الوسم <link> لأغراض أخرى.

أحد الاستخدامات الشائعة هو تحديد "الأيقونة المصغرة" (Favicon) للصفحة. هذه هي الأيقونة الصغيرة جداً التي تراها في "شريط التبويب" (Browser Tab) بجوار <title>.

مثال (5): إضافة Favicon 

<head>
    <meta charset="UTF-8">
    <title>موقعي</title>
    
    <!-- هذا السطر يربط ملف الأيقونة -->
    <link rel="icon" href="images/favicon.png" type="image/png">
</head>

الوسم <script> (لربط JavaScript)

أخيراً، الوسم <head> هو المكان (التقليدي) الذي نربط فيه ملفات JavaScript.

JavaScript هي اللغة التي تضيف "التفاعلية" (Interactivity) إلى الصفحة (مثل: النوافذ المنبثقة، الـ Sliders، التحقق من النماذج).

مثل CSS، يمكن ربطه خارجياً (الأفضل) أو كتابته داخلياً:

  • خارجي: <script src="main.js"></script> (لاحظ أنه وسم مزدوج ويحتاج إغلاق).
  • داخلي: <script> ...أكواد جافاسكريبت هنا... </script>

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

مثال (6): تجميع <head> كامل للمبتدئين

هذا المثال يجمع كل ما تعلمناه في <head> واحد نموذجي لموقع ويب حديث.

مثال (6): <head> متكامل 

<head>
    <!-- (إلزامي لدعم العربية) -->
    <meta charset="UTF-8">
    
    <!-- (إلزامي للـ SEO وتجربة المستخدم) -->
    <title>عنوان الصفحة الجذاب</title>
    
    <!-- (مهم للـ SEO) -->
    <meta name="description" content="وصف موجز ودقيق لمحتوى هذه الصفحة.">
    
    <!-- (مهم للتجاوب - سنتناوله لاحقاً) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- (الطريقة المُثلى لربط CSS) -->
    <link rel="stylesheet" href="css/main-styles.css">
    
    <!-- (لإضافة أيقونة التبويب) -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    
    <!-- (لربط ملف JavaScript) -->
    <script src="js/main.js"></script>
</head>

(ملخص الدرس):
1. <head> هو "عقل" الصفحة الخفي؛ محتواه "لا يظهر" على الصفحة (باستثناء <title>).
2. <title> (إلزامي) يحدد عنوان الصفحة في "شريط التبويب" و "نتائج البحث".
3. <meta charset="UTF-8"> (إلزامي) لضمان عرض "اللغة العربية" بشكل صحيح.
4. <meta name="description" ...> (مهم) يحدد "الوصف" الذي يظهر في جوجل.
5. <head> هو المكان الذي نربط فيه ملفات CSS (للتصميم) و JavaScript (للتفاعلية).
6. تنبيه هام: القوة الحقيقية لـ <head> تكمن في كونه "بوابة" لـ CSS. بدون الوسوم <link> أو <style> الموجودة هنا، ستظل جميع صفحاتك بلا تنسيق (خلفية بيضاء وخط أسود). ستدرك أهميته الكاملة عند بدء دروس CSS.