HTML

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

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

التاريخ

03 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

9854

المواضيع

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 link element
عنصر link في لغة HTML

يُستخدم عنصر <link> لربط صفحات CSS مع صفحة HTML داخل عنصر head أو لربط ملفات أخرى كأيقونة النافذة بجوار عنوان الصفحة.


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

  • يستخدم عادة عنصر <link> لعمل ربط لصفحة HTML مع ملفات أخرى وأشهرها ملفات لغة CSS.
  • عنصر <link> من نوع empty غير مُتداخل، له open tag علامة بداية فقط.
  • لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <link>.
  • عنصر <link> يكتب دائماً داخل عنصر <head>.
  • عنصر <link> يمكن تكراره داخل صفحة الويب عدّة مرات.
  • عنصر <link> يحدد رابط الصفحة عن طريق خاصية src.
  • يتم تحديد علاقة عنصر <link> بصفحة HTML عن طريق خاصية rel.
  • يمكن كتابة رابط داخلي أو رابط خارجي من server خادم آخر في خاصية src داخل عنصر <link>.
Link syntax

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

<link rel="stylesheet" href="mystyle.css">

</> 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>
مصطلحات الدرس
Head
Head

قمة

Element
Element

عنصر

Title
Title

عنوان

Tabs
Tabs

نوافذ

Style
Style

نمط أو شكل

Link
Link

رابط

Meta
Meta

عنصر HTML

Viewport
Viewport

شكل العرض

Character Set
Character Set

مجوعة الأحرف

Keywords
Keywords

كلمات

Author
Author

المالك أو المؤلف

Refresh
Refresh

تحديث

Script
Script

سيناريو

Java Script
Java Script

لغة برمجة موجهة للكائنات

Base
Base

عنصر HTML

Target
Target

الهدف

External Links
External Links

روابط خارجية

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
CSS
CSS

Cascading Style Sheets

صفحات التنسيق المتتالية
link
URL
URL

Uniform Resource Locator

عنوان الموقع أو محدد الموقع الموحد
link
Href
Href

Href Hypertext Reference

مرجع النص التشعبي
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.