HTML

HTML Head Element
عنصر Head في لغة HTML

سوف تتعلم في هذا الدرس كل ما يتعلق بعنصر head في لغة HTML، بالإضافة إلى علاقته بضبط صفحة الويب، والعنصر المرئي فيه للقراء.

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

12097

المواضيع

12
الشروحات chevron_left HTML Head Element chevron_left HTML

HTML Head Element
عنصر Head في لغة HTML

</> HTML head element
عنصر head في لغة HTML

عنصر <head> هو الجزء المسؤول عن إعدادات الصفحة وهو غير مرئي للمستخدمين، وتكون جميع العناصر داخله غير مرئية كذلك، باستثناء عنصر <title>.

إن عنصر <head> هو حاوية لمجموعة عناصر، تُضيف لصفحة الويب معلومات حساسة ومهمة من أجل المتصفح ومحركات البحث.

  • عنصر <head> هو عنصر nested مُتداخل، له open tag علامة بداية وله close tag علامة نهاية.


العناصر التي تُكتب داخل عنصر <head> هي:

  • <title> هو العنصر المسؤول عن إضافة اسم لنافذة صفحة الويب على المتصفحات، ويظهر للقراء والمستخدمين.
  • <style> هو العنصر المسؤول عن إضافة تنسيقات لغة CSS داخل ملف HTML.
  • <meta> هو العنصر المسؤول عن بعض المعلومات الهامة لصفحة الويب، مثل لغة الصفحة.
  • <link> هو العنصر المسؤول عن ربط صفحة HTML بصفحة CSS.
  • <script> هو العنصر المسؤول عن كتابة أوامر برمجية بلغة JavaScript داخل ملف HTML.
  • <base> هو العنصر المسؤول عن تحديد مصدر المسارات في الصفحة.


أين يُكتب عنصر head ؟

  • يُكتب عنصر <head> قبل عنصر body دوماً ولكل صفحة HTML عنصر <head> واحد فقط.
head element syntax

طريقة كتابة عنصر head في صفحة HTML.

<head>

</head>
لا يعرض المتصفح أي شيء عند كتابة عنصر head داخل مستند HTML.

</> HTML title element
عنصر title في لغة HTML

يُستخدم عنصر <title> لإضافة عنوان نصي لصفحة الويب على المتصفح، وذلك حتى يقرأ المستخدم أسماء tabs النوافذ المفتوحة على المتصفح عند التنقل بينهم.


عنصر <title> وعلاقته بصفحة HTML:

  • عنصر <title> إجباري لمساعدة المستخدمين في قراءة أسماء النوافذ.
  • عنصر <title> صديق محركات البحث، فهو أحد العوامل الهامة التي تحدد ترتيب الموقع في المحركات.
  • يجب تحديد نص <title> باسم متعلق بمحتوى الصفحة.
  • عنصر <title> من نوع nested مُتداخل، له open tag علامة بداية وله close tag علامة إغلاق.
  • لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <title>.
  • تقرأ محركات البحث عادةً أول 55-60 حرف فقط من النص المكتوب داخل عنصر <title>.
  • يجب عدم تكرار نفس النص لعنصر title داخل صفحات أخرى في نفس الموقع.
  • عنصر <title> يكتب دائماً داخل عنصر <head>.
  • عنصر <title> لا يمكن تكراره داخل صفحة الويب.
HTML title element

لا يظهر النص الموجود داخل عنصر <title> في صفحة الويب، ولكن يظهر في نافذة المتصفح في الأعلى بجوار علامة x الموجودة على صفحة الويب في المتصفحات الحديثة.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Title | Closetag</title>
</head>
<body>
  <h1>HTML Title </h1>
</body>
</html>
ملاحظة
يجب نسخ هذه الأوامر وحفظها على جهازك حتى تتمكن من قراءة النص المكتوب داخل عنصر title.

</> HTML style element
عنصر style في لغة HTML

يُستخدم عنصر <style> لإضافة تأثيرات على عناصر صفحة الويب بلغة CSS، سوف نتعرف الآن على طريقة كتابته فقط، حيث سوف نستخدمه كثيراً لاحقاً في CSS.


عنصر <style> وعلاقته بصفحة HTML:

  • عنصر <style> يستخدم عادة لكتابة أوامر وتنسيقات بلغة CSS ولكن استخدامه ليس ضرورياً حيث يوجد بدائل أخرى.
  • عنصر <style> من نوع nested مُتداخل، له open tag علامة بداية وله close tag علامة إغلاق.
  • لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <style>.
  • عنصر <style> يكتب دائماً داخل عنصر <head>.
  • عنصر <style> لا يمكن تكراره داخل صفحة الويب.
style syntax

طريقة كتابة عنصر style في صفحة HTML.

<head>
     <style>
       #CSS code
     </style>
 </head>
ليس عليك الآن الخوض والتعمّق في أوامر لغة CSS التي تكتب داخل عنصر style، حيث يكفي فقط معرفة مكانه داخل صفحة HTML.

</> HTML script element
عنصر script في لغة HTML

يُستخدم عنصر <script> لكتابة أوامر برمجية بلغة JavaScript داخل صفحة HTML أو لربط صفحات HTML مع ملف JavaScript.

عنصر <script> وعلاقته بصفحة HTML

  • يُستخدم عادة عنصر <script> لعمل ربط لصفحة HTML مع ملفات JavaScript.
  • عنصر <script> من نوع nested مُتداخل، له open tag علامة بداية وله close tag علامة إغلاق.
  • لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <script>.
  • يُكتب عنصر <script> داخل عنصر <head> أو عنصر <body>.
  • عنصر <script> يمكن تكراره داخل صفحة الويب أكثر من مرة.
  • عنصر <script> يحدد رابط الصفحة عن طريق خاصية src.
  • يمكن كتابة رابط داخلي أو رابط خارجي من server خادم آخر في خاصية src داخل عنصر <script>.
script syntax

طريقة كتابة عنصر script لكتابة الأوامر البرمجية داخل صفحة HTML.

<script>
    #JS Code here
</script>
script element to link js file

طريقة استدعاء ملف js داخل صفحة HTML حيث يمكن استدعاء الملفات من روابط داخلية أو روابط خارجية (server خارجي).

<script src="js/script.js"></script>

</> HTML base element
عنصر base في لغة HTML

يُستخدم عنصر <base> لتحديد base URL الرابط الأساسي لصفحة HTML داخل عنصر head.

عنصر <base> وعلاقته بصفحة HTML

  • يُستخدم عنصر <base> لتحديد base URL الرابط الأساسي لصفحة HTML بداخل عنصر head.
  • عنصر <base> هو عنصر empty غير مُتداخل له open tag علامة بداية فقط.
  • لا يُسمح بكتابة عناصر HTML أخرى داخل عنصر <base>.
  • عنصر <base> يٌكتب بداخل عنصر <head>.
  • عنصر <base> لا يمكن تكراره داخل صفحة الويب أكثر من مرة.
  • عنصر <base> يحدد رابط الصفحة عن طريق خاصية href.
  • يمكن استخدام خاصية target مع عنصر <base>لفتح جميع الروابط داخل صفحة HTML في نافذة جديدة مع الاحتفاظ بالصفحة الحالية مفتوحة على المتصفح.
  • يمكن كتابة رابط داخلي أو رابط خارجي (من server خادم آخر) في خاصية src في عنصر <base>.
  • يعمل عنصر <base> مع الروابط والصور.
base element syntax

طريقة كتابة عنصر base في صفحة HTML.

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.closetag.com">
  <title>HTML base Element</title>
</head>
<body>
  <h1>HTML base Element</h1>
  <img src="images/mountain.jpg" alt="mountain">
  <a href="images/mountain.jpg">HTML base Tag</a>
</body>
</html>
target with base

استخدام خاصية target مع عنصر <base> لفتح جميع الروابط الموجودة في صفحة HTML في صفحة جديدة.

<head>
  <base href="https://www.closetag.com"  target="_blank">
  <title>HTML base Element</title>
</head>
ملاحظات هامة
  • يتم كتابة الرابط الموجود داخل خاصية href لعنصر base لجميع الصور و links الروابط، قبل مسار الملف ولا تعمل المسارات المحلية حينها.
  • يمكن استخدام مسار داخل عنصر base من server خادم آخر لجلب جميع مسارات الملفات من هذا الخادم.

</> HTML noscript tag
عنصر noscript في لغة HTML

يُستخدم عنصر <noscript> لإظهار رسالة لمستخدمي صفحات الويب الذين قاموا بتعطيل لغة جافا سكريبت على متصفحاتهم، حيث تقوم هذه الرسالة بأخبارهم أن الجافا سكريبت لا تعمل.

عنصر <noscript> وعلاقته بصفحة HTML

  • يُستخدم عنصر <noscript> لإظهار رسالة لمستخدمي صفحات الويب إذا كانت لغة جافا سكريبت معطلة على متصفحاتهم.
  • عنصر <noscript> من نوع nested مُتداخل، له open tag علامة بداية وله close tag علامة إغلاق.
  • لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <noscript>.
  • يُكتب بداخل عنصر <noscript> محتوى نصي فقط.
  • يُكتب عنصر <noscript> داخل عنصر <head> ويمكن أن يُكتب في عنصر <body>.
  • لا يمكن تكرار عنصر <noscript> داخل صفحة الويب أكثر من مرة.
noscript tag in body syntax

طريقة كتابة عنصر noscript داخل عنصر body.

<noscript>Sorry, your browser does not support JavaScript!</noscript>
noscript tag in head syntax

طريقة كتابة عنصر noscript داخل عنصر head.

<noscript>Sorry, your browser does not support JavaScript!</noscript>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات