HTML Head Element
عنصر Head في لغة HTML
سوف تتعلم في هذا الدرس كل ما يتعلق بعنصر <head> في لغة HTML، بما في ذلك دوره في ضبط إعدادات صفحة الويب، والعنصر الوحيد المرئي فيه للمستخدمين وهو عنوان الصفحة Page title.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Head Element
عنصر Head في لغة HTML
</>
HTML head Element
عنصر head في لغة HTML
عنصر <head>: هو الجزء المسؤول عن إعدادات الصفحة وهو غير مرئي للمستخدمين. كل العناصر داخله غير مرئية، باستثناء محتوى عنصر <title> الذي يظهر في شريط العنوان للمتصفح. ويُعتبر عنصر <head> حاوية لمجموعة من العناصر التي تقدم معلومات مهمة لصفحة الويب، مما يساعد المتصفح ومحركات البحث في قراءة الصفحة بشكل صحيح.
عنصر <head> هو من نوع العناصر المتداخلة، له علامة فتح <head> وعلامة إغلاق <head/>.
العناصر التي تُكتب داخل عنصر <head> هي:
- <title>: يُضيف اسمًا لنافذة صفحة الويب في شريط العنوان للمتصفحات.
- <style>: يُستخدم لإضافة تنسيقات CSS مباشرة داخل ملف HTML.
- <meta>: يوفر معلومات وصفية هامة لصفحة الويب مثل لغة الصفحة، وتُستخدم في تحسين محركات البحث.
- <link>: يربط صفحة HTML بملفات CSS خارجية.
- <script>: يُستخدم لكتابة أوامر برمجية بلغة JavaScript داخل ملف HTML.
- <base>: يُحدد المصدر الأساسي للمسارات في الصفحة.
أين يُكتب عنصر head ؟
يُكتب عنصر <head> دائمًا قبل عنصر <body>، ولكل صفحة HTML عنصر <head> واحد فقط.
Head Element Syntax in HTML
يوضح هذا المثال كيفية كتابة عنصر <head> داخل صفحة HTML.
<head> </head>
ملاحظة
لا يعرض المتصفح أي شيء عند كتابة عنصر <head> فقط داخل مستند HTML.
</>
HTML title Element
عنصر title في لغة HTML
يُستخدم عنصر <title> لإضافة عنوان نصي يظهر في تبويب صفحة الويب على المتصفح، مما يساعد المستخدم على معرفة اسم الصفحة عند التنقل بين التبويبات المفتوحة.
عنصر <title> وعلاقته بصفحة HTML:
- عنصر <title> عنصر إجباري في مواصفات HTML، ويظهر نصه في تبويب المتصفح ليساعد المستخدمين على تمييز الصفحات عند التنقل بين التبويبات المفتوحة.
- يلعب عنصر <title> دورًا هامًا في تحسين ترتيب الموقع في نتائج محركات البحث.
- يجب أن يعبر نص <title> بوضوح عن محتوى الصفحة.
- عنصر <title> عنصر متداخل [nested]، له علامة فتح <title> وعلامة إغلاق <title/>.
- لا يسمح بكتابة أي عناصر HTML أخرى داخل عنصر <title>.
- عادةً ما تقرأ محركات البحث أول 55 إلى 60 حرفًا تقريبًا من نص <title>.
- يجب ألا يكون نص عنصر <title> مكررًا في صفحات أخرى ضمن نفس الموقع.
- يجب كتابة عنصر <title> دائمًا داخل عنصر <head> ولا يمكن تكراره داخل نفس الصفحة.
HTML title Element
لا يظهر النص الموجود داخل عنصر <title> في محتوى صفحة الويب، بل يظهر في شريط العنوان أو في تبويب الصفحة أعلى المتصفح.
<!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 تتحكم في مظهر عناصر صفحة الويب. يمكن استخدام عنصر <style> داخل صفحة HTML مباشرة، كما توجد طرق أخرى لإضافة CSS مثل الروابط الخارجية ستنعرف عليها لاحقاً.
عنصر <style> وعلاقته بصفحة HTML:
- يُستخدم عنصر <style> عادةً لكتابة أوامر وتنسيقات CSS داخل صفحة HTML.
- يحتوي عنصر <style> على علامة فتح <style> وعلامة إغلاق <style/>.
- لا يمكن كتابة عناصر HTML أخرى داخل عنصر <style>.
- يُكتب عنصر <style> داخل عنصر <head>.
- يمكن تكرار عنصر <style> داخل صفحة الويب عند الحاجة، لكن يُفضل تنظيم الكود باستخدام عنصر واحد أو عبر ملفات CSS خارجية عند زيادة التعقيد.
Style Element Syntax in HTML
يوضح هذا المثال كيفية كتابة عنصر <style> داخل صفحة HTML لإضافة تنسيقات CSS.
<head>
<style>
#CSS code
</style>
</head>
معلومة تهمك
لا داعي الآن للتعمق في أوامر لغة CSS التي تُكتب داخل عنصر [style]، ويكفي في هذه المرحلة معرفة مكان كتابة العنصر داخل صفحة HTML فقط.
</>
HTML link Element
عنصر link في لغة HTML
يُستخدم عنصر <link> لربط ملفات CSS أو ملفات أخرى [مثل أيقونة الموقع] مع صفحة HTML، وغالبًا يُكتب داخل عنصر <head>.
عنصر <link> وعلاقته بصفحة HTML:
- يُستخدم عنصر <link> عادةً لربط صفحة HTML بملفات خارجية، وأشهرها ملفات CSS أو أيقونة الموقع [favicon].
- عنصر <link> هو عنصر فارغ [empty element]، له علامة فتح <link> فقط ولا يحتوي على عناصر أخرى داخله.
- يجب كتابة عنصر <link> داخل عنصر <head>.
- يمكن تكرار عنصر <link> داخل صفحة الويب عدة مرات حسب الحاجة.
- يتم تحديد مسار الملف المراد ربطه باستخدام الخاصية [href].
- يتم تحديد علاقة الملف بصفحة HTML باستخدام الخاصية [rel]، وهي اختصار لكلمة [relationship] بالإنجليزية وتعني [علاقة].
- يمكن استخدام الخاصية [href] لربط ملف داخلي في نفس الموقع أو ملف خارجي من خادم آخر.
Link Element Syntax in HTML
يوضح هذا المثال كيفية كتابة عنصر <link> داخل صفحة HTML.
<link rel="stylesheet" href="mystyle.css">
</>
HTML script Element
عنصر script في لغة HTML
يُستخدم عنصر <script> لكتابة أوامر برمجية بلغة JavaScript داخل صفحة HTML أو لربط الصفحة بملف JavaScript خارجي.
عنصر <script> وعلاقته بصفحة HTML:
- يُستخدم عنصر <script> عادةً لكتابة أوامر JavaScript مباشرة داخل صفحة HTML أو لربطها بملفات JavaScript خارجية.
- عنصر <script> من نوع العناصر المتداخلة [nested elements] له علامة فتح <script> وعلامة إغلاق <script/>.
- لا يمكن كتابة عناصر HTML أخرى داخل عنصر <script>، بل تكتب فيه أوامر JavaScript فقط.
- يمكن كتابة عنصر <script> داخل عنصر <head> أو عنصر <body>.
- يمكن تكرار عنصر <script> داخل صفحة الويب أكثر من مرة حسب الحاجة.
- يتم تحديد مسار ملف JavaScript الخارجي باستخدام الخاصية [src].
- يمكن أن تشير الخاصية [src] إلى ملف JavaScript داخلي في نفس الموقع أو إلى ملف خارجي على خادم آخر.
Script Element Syntax in HTML
يوضح هذا المثال كيفية كتابة عنصر <script> لكتابة الأوامر البرمجية داخل صفحة HTML.
<script>
#JS Code here
</script>
Script Element to Link a JS File in HTML
يوضح هذا المثال كيفية ربط ملف JavaScript بصفحة HTML باستخدام الخاصية [src] في عنصر <script>.
<script src="js/script.js"></script>
</>
HTML base Element
عنصر base في لغة HTML
يُستخدم عنصر <base> لتحديد الرابط الأساسي [base URL] الذي تُحسب بناءً عليه جميع الروابط والصور النسبية داخل صفحة HTML، ويُكتب دائمًا داخل عنصر <head>.
عنصر <base> وعلاقته بصفحة HTML:
- يُستخدم عنصر <base> لتحديد الرابط الأساسي لجميع الروابط والصور النسبية في الصفحة.
- عنصر <base> هو عنصر فارغ [empty element] وله علامة فتح <base> فقط.
- لا يُسمح بكتابة عناصر HTML أخرى داخل عنصر <base>.
- يجب كتابة عنصر <base> داخل عنصر <head>، ولا يمكن تكراره داخل نفس الصفحة.
- يتم تحديد الرابط الأساسي باستخدام الخاصية [href].
- يمكن استخدام الخاصية [target] مع عنصر <base> لجعل جميع الروابط تفتح في نافذة أو تبويب جديد بشكل افتراضي.
- يمكن أن يكون الرابط في الخاصية [href] رابطًا داخليًا أو خارجيًا.
- يعمل عنصر <base> مع جميع الروابط والصور النسبية داخل الصفحة.
Base Element Syntax in HTML
يوضح هذا المثال كيفية كتابة عنصر <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>
Using target with the <base> Element
يوضح هذا المثال كيفية استخدام خاصية target مع عنصر <base> لجعل جميع الروابط في صفحة HTML تفتح في صفحة جديدة تلقائيًا.
<head> <base href="https://www.closetag.com" target="_blank"> <title>HTML base Element</title> </head>
ملاحظات هامة
- تُضاف قيمة الرابط الموجود في خاصية [href] لعنصر <base> تلقائيًا إلى جميع المسارات النسبية للصور والروابط في الصفحة، بحيث يتم تفسير هذه المسارات بناءً عليه بدلًا من مسار الصفحة الأصلي.
- يمكن استخدام رابط من خادم آخر في خاصية [href] لعنصر <base>. في هذه الحالة، تُحسب جميع المسارات النسبية في الصفحة نسبة إلى هذا الرابط، بشرط أن يسمح الخادم بذلك.
</>
HTML noscript Element
عنصر noscript في لغة HTML
يُستخدم عنصر <noscript> لإظهار رسالة أو محتوى بديل لمستخدمي صفحات الويب الذين قاموا بتعطيل جافاسكريبت في متصفحاتهم. حيث تقوم هذه الرسالة بأخبارهم أن الجافا سكريبت لا تعمل.
عنصر <noscript> وعلاقته بصفحة HTML:
- يُستخدم عنصر <noscript> لإظهار رسالة أو محتوى بديل إذا كانت جافاسكريبت معطلة على المتصفح.
- عنصر <noscript> عنصر متداخل، له علامة فتح <noscript> وعلامة إغلاق <noscript/>.
- يمكن كتابة محتوى نصي أو عناصر HTML بسيطة داخل عنصر <noscript>.
- يمكن كتابة عنصر <noscript> داخل عنصر <head> أو داخل عنصر <body>.
- يمكن تكرار استخدام عنصر <noscript> داخل صفحة الويب إذا دعت الحاجة.
- يظهر محتوى عنصر <noscript> فقط عند تعطيل جافاسكريبت أو إذا كان المتصفح لا يدعمها.
<Syntax of the <noscript> Element Inside <body
يوضح هذا المثال كيفية كتابة عنصر <noscript> داخل عنصر <body> في صفحة HTML.
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<Syntax of the <noscript> Element Inside <head
يوضح هذا المثال كيفية كتابة عنصر <noscript> داخل عنصر <head> في صفحة HTML.
<noscript>Sorry, your browser does not support JavaScript!</noscript>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
