HTML Head Element
عنصر Head في لغة HTML
سوف تتعلم في هذا الدرس كل ما يتعلق بعنصر head في لغة 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>
</>
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>
ملاحظة
</>
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>
</>
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>