أوسمة رأس الصفحة Head Tags
في HTML ماذا نعني بأوسمة أو عناصر رأس الصفحة Head Tags ..؟؟!! فيما تستخدم أوسمة رأس الصفحة Head Tags و كيف يتم تضمينها في صفحة الويب…؟؟!!
أوسمة رأس الصفحة (Head Tags) هي عناصر مهمة في لغة (HTML) تستخدم لتحديد وتنسيق المعلومات الأساسية لصفحة الويب. توجد في قسم الـhead من مستند HTML وتوفر معلومات للمتصفحات ومحركات البحث حول المحتوى والتنسيق الخاص بالصفحة. في هذا المقال نتكلم عن جزء الـ head في صفحة الـ HTML وأهم الأوسمة Tags التي تستخدم في هذا الجزء من صفحة الويب، لنبدأ …
أوسمة رأس الصفحة The head tags
في مستند الـ HTML نعني بأوسمة رأس الصفحة تلك الأوسمة tags (العناصر ) التي يكون مكانها في جزء الـ head من صفحة الـ HTML. ,وتعتبر أوسمة رأس الصفحة (Head Tags) عناصر مهمة في بنية صفحات الويب حيث تلعب دورًا حاسمًا في تحسين تجربة المستخدم وتحسين ظهور الموقع في محركات البحث.
ذكرنا سابقاً في مقال مقدمة إلى HTML عن وسم <head> أن في هذا الجزء يتم تعريف معلومات صفحة الويب. عن طريق إدراج الاوسمة الخاصة بتعريف صفحة الويب حيث تقوم هذه الـ tags بعدد من الوظائف مثل إعطاء عنوان من بواسطة الوسم <title> و <meta> للإعلان عن ترميز الصفحة و <link> لربطها مع ملفات مثل ملفات CSS و JavaScript والعديد من الوظائف التي تكون في جزء الـ head من صفحة الويب، سنتعرف فيما يلي عن هذه الأوسمة مع شرح مثال لكل منها وهذه الأوسمة هي :
فيما يلي شرح لكل من هذه الأوسمة مع أمثلة على طريقة استخدمها تابعوا معنا..
الوسم <title>
عنوان صفحة الويب يكون جزء الـ head من صفحة الويب و<title> هو وسم ثنائي يلعن عن عنوان الصفحة ،يستخدم title لتحديد عنوان الصفحة، وتظهر في شريط عنوان المتصفح ولا ننعي بذلك عنوان الـ URL بل اسم الصفحة الظاهر تبويب الصفحة. يُعتبر العنوان عنصرًا مهمًا لتحسين تصنيف الصفحة في محركات البحث، ويجب أن يكون واضحًا وموجزًا ومتناسقًا مع محتوى الصفحة.ويكتب كالتالي:
<title>Page Title</title>الوسم <link>
يرتبط مستند الـ HTML مع مستندات من أنواع أخرى لأغراض تنسيق صفحة الويب أو البرمجة لهذا يستخدم الوسم <link> في جزء الـ head في جزء الـ head من صفحة الويب .وهو وسم مفرد يستخدم في ربط صفحة الويب مع ملفات أخرى مثل ملفات CSS كوظيفة أساسية لكن يمكن أن يستخدم مثلاً في :
1- يمكن استخدام Link لربط صفحة الويب مع مستند CSS كما هو موضح في المثال وبنفس الطريقة يستخدم linke مع مكتبات الـ CSS الموجودة على الانترنت.
<link rel="stylesheet" type="text/css" href="styles.css">2- كما يمكن استخدام link لعرض شعار الموقع على تبويب الصفحة بجانب اسم الصفحة. كما يوضح المثال التالي:.
<link rel="icon" href="Path of Image" type="image/gif"/> الوسم <meta>
يعتبر meta من أهم أوسمة رأس الصفحة فالصفحة الويب بيانات خاصة مثل نوع ترميز الصفحة و اسم المالك ووصف الصفحة والكلمات رئيسية الصفحة ، كل هذه البيانات تضاف الى صفحة الويب في جزء الـ head بواسطة الوسم <meta> هو وسم مفرد يمثل البيانات الوصفية ويستخدم مع سمات( Attributes ) لتعريفها والإعلان عن قيمها - مثلاً:
1- طريقة استخدام meta لتعريف ترميز صفحة الويب، تتضح في المثال التالي:
<meta charset="utf-8"/>2- إضافة الكلمات المفتاحية الخاصة بصفحة الويب: وهنا نستخدم meta لتحديد الكلمات الرئيسية (Keywords) التي تصف محتوى الصفحة. على الرغم من أن بعض محركات البحث لا تستخدم هذه الأوسمة بشكل فعال في تصنيف الصفحات، إلا أنها قد تكون مفيدة في بعض الحالات. ويوضح المثال التالي طريقة استخدام meta مع الكلمات الرئيسية:
<meta name = "keywords" content = "HTML, meta"/>3- إعطاء وصف مختصر لصفحة الويب: وهنا نستخدم meta لتوفير وصف موجز لمحتوى الصفحة. يتم عرض الوصف في نتائج محركات البحث، مما يساعد المستخدمين على فهم ما سيجدونه في الصفحة.و ينبغي أن يكون الوصف جذابًا ومحتواه ذو صلة ويحتوي على الكلمات الرئيسية المهمة. ويوضح المثال التالي طريقة استخدام meta لإعطاء وصف للصفحة:
<meta name = "description" content = "The description of the html document"/>4- إضافة اسم مؤلف الصفحة: يوضح المثال التالي طريقة اضافة اسم المالك للصفحة :
<meta name = "author" content="Author Name"/>5- التحديث واعادة التوجيهة : يستخدم الوسم <meta> في كود تحديث الصفحة أو التحويل التلقائي (إعادة التوجيهة) أي عند زيارة هذه الصفحة قم بتحويل المستخدم لصفحة معينة بعد مرور برهة من الزمن في المثال سيقوم الكود بالتحويل التلقائي إلى صفحة Google :
<meta http-equiv="refresh" content="5;url=http://www.google.com"/>الوسم <script>
تتيح الـ HTML إمكانية اضافة أكواد من لغات برمجة أخرى الى مستند الـ HTML ولهذا الغرض يستخدم الوسم <script>، وهو وسم ثنائي يمكن أن يوجد هذا الوسم في <heed> أو في <body> ويعلن عن وجود Script للغة برمجية أخرى مثل JavaScript ، كما يستخدم في نفس الوقت لتضمين ملفات برمجة من اللغات الأخرى الى صفحة الويب الحالية التي تكون موجودة ضمن ملفات المشروع او على الانترنت.
في المثال التالي قمنا بعمل رابط للمف jquery.main.js من JQuery وهي مكتبة الأكواد .JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
الوسم <style>
من الأوسمة التي توجد في رأس الصفحة head وسم التنسيق <style> ، وهو وسم ثنائي للإعلان عن كتابة تعليمات CSS .هناك 3 طرق لإضافة تعليمات CSS لصفحة الويب ذكرنا أحدها مسبقاً وهي استخدام وسم <link> لربط الصفحة مع ملف CSS خارجي وتسمى هذه الطريقة External وثاني طريقة باستخدام وسم <style> لإضافة كود الـ CSS و تسمى Internal .
و يظهر المثال التالي طريقة كتابة الوسم <style> في مسند الـ HTML
<style >
/***
Type the CSS code here
***/
</style>
إلى هنا ينتهي هذا المقال عن أوسمة رأس الصفحة head tags ، تعرفنا فيه على ما يعنيه جزء الـ head في صفحة الويب وماهي أهم الـ HTML tags الخاصة بجزء الـ head. وطريقة عمل كل من هذه الـ tags مع أمثلة عليها..