Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLالوسم <head>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

يعتبر الوسم <head> من الأقسام الرئيسية في الصفحة لأنه يستخدم لإعلام المتصفح بكيفية عرض محتوى الصفحة بالإضافة إلى إمكانية تضمين ملفات التصميم، سكربتات الصفحة، أيقونة الموقع و غيرها من الأشياء المهمة فيه.

بشكل عام، كل ما يوضع بداخل هذا الوسم الهدف منه ليس أن يظهر بشكل مباشر في الصفحة بل أن يحسّن طريقة ظهور محتوى الصفحة الموضوع في الوسم <body>.

دعم المتصفحات

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة وسم <style> في الوسم <head> و بداخله قمنا بوضع كود CSS بهدف تحديد طريقة ظهور عناصر الصفحة.

المثال الأول

<head>
    <style>
        h1 {
            color: red;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>This is a red heading</h1>
    <p>This is a blue paragraph.</p>
</body>
جرب الكود

في المثال التالي قمنا بإضافة وسم <script> في الوسم <head> و فيه وضعنا كود بلغة جافاسكربت يقوم بعرض رسالة ترحيب حين يتم تنفيذه. و بالمبدأ سيتم تنفيذ هذا الكود حين يتم النقر على الزر الموضوع في الصفحة.

المثال الثاني

<head>
    <script>
        function displayMessage()
        {
            alert('Hello User!');
        }
    </script>
</head>
<body>
    <button onclick="displayMessage()">Click Me!</button>
</body>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

head {
    display: none;
}

نصائح و ملاحظات

الصفحة يجب أن تحتوي على <head> واحد فقط مع الإشارة إلى أنه يمكن إضافة الوسوم التالية بداخله:

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>