❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals 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>
<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> <script> function displayMessage() { alert('Hello User!'); } </script> </head> <body> <button onclick="displayMessage()">Click Me!</button> </body>

جرب الكود

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

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

head {
display: none;
}
head { display: none; }

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

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

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>
عودة للدرس❯ ❮عودة للدرس