العنصر Head

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

العنصر <head> هو في الأساس العنصرالمحتوي على جميع عناصر الرأس ، والتي توفر معلومات إضافية حول المستند (البيانات الوصفية) ، أو مرجع إلى الموارد الأخرى المطلوبة لعرض المستند في متصفح الويب بالشكل الصحيح.
تصف عناصر الرأس بشكل جماعي خصائص المستند مثل العنوان title ، وتوفر معلومات وصفية مثل مجموعة الأحرف character set ، وتوجه المتصفح إلى مكان العثور على أوراق الأنماط أو البرامج النصية التي تسمح لنا بتوسيع نطاق صفحة HTML بطرق نشطة وتفاعلية للغاية.
عناصر HTML التي يمكن استخدامها داخل عنصر <head> هي:
<title> ، <base> ، <link> ، <style> ، <meta> ، <script> وعنصر <noscript>.

العنصر Title

يحدد العنصر <title> عنوان المستند.
العنصر <title> مطلوب في جميع صفحات HTML و XHTML . يُسمح بعنصر <title> واحد فقط في المستند ويجب وضعه داخل عنصر <head>.
يحتوي العنصر<title> على نص عادي و يمكن استخدامه لأغراض مختلفة. فمثلا:

  • لعرض عنوان في شريط عنوان متصفح الويب وفي شريط المهام.
  • لتوفير عنوان للصفحة عند إضافتها إلى المفضلة أو وضع إشارة مرجعية عليها.
  • لعرض عنوان الصفحة في نتائج محرك البحث.

يوضح المثال التالي كيفية وضع العنوان في صفحة HTML.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>عنوان صفحة الويب</title>
  5. </head>
  6. <body>
  7. <p>Hello World!</p>
  8. </body>
  9. </html>
نصيحة:

يجب أن يكون العنوان الجيد قصيرًا ومحدّدًا لمحتوى صفحة الويب ، لأن محركات البحث تولي اهتمامًا خاصًا للكلمات المستخدمة في العنوان. بشكل مثالي يجب أن يكون طول العنوان أقل من 65 حرفًا.

العنصر Base

يتم استخدام العنصر <base> لتحديد عنوان URL أساسي لجميع الارتباطات النسبية Relative links الموجودة في صفحة الويب ، على سبيل المثال يمكنك تعيين عنوان URL الأساسي مرة واحدة أعلى صفحاتك ، وبعد ذلك ستستخدم جميع الروابط النسبية عنوان URL هذا كنقطة بداية. إليك مثال:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Defining a base URL</title>
  5. <base href="https://www.educationfactorys.com/">
  6. </head>
  7. <body>
  8. <p> <a href="HTML/html-head.php">HTML Head</a> </p>
  9. </body>
  10. </html>

سيقوم متصفح الويب بترجمة الارتباط التشعبي في المثال أعلاه إلى :
https://www.educationfactorys.com/HTML/html-head.php
بغض النظر عن عنوان URL للصفحة الحالية. وذلك لأن عنوان URL النسبي المحدد في الرابط: HTML/html-head.php يضاف إلى نهاية عنوان URL الأساسي: https://www.educationfactorys.com/.

نصيحة:

يجب أن يظهر عنصر <base> قبل أي عنصر يشير إلى مورد خارجي. تسمح لغة HTML بعنصر <base> واحد فقط لكل صفحة ويب.

العنصر Link

يحدد العنصر link العلاقة بين المستند الحالي والمستندات أو الموارد الخارجية.
الاستخدام الشائع لعنصر link هو ربط أوراق الأنماط الخارجية.

مثال
تشغيل
  1. <head>
  2. <title>Linking Style Sheets</title>
  3. <link rel="stylesheet" href="style.css">
  4. </head>

للتعرف على أوراق الأنماط style sheets بالتفصيل تفضل بزيارة دورة CSS

ملاحظة:

قد يحتوي عنصر <head> الخاص بصفحة HTML على أي عدد من عناصر <link>.
عنصر <link> من العناصر الفارغة يحتوي على سمات ، ولكن لا يحتوي على محتويات.

العنصر Style

يتم استخدام عنصر <style> لكتابة معلومات النمط المضمنة داخل صفحة HTML. تحدد قواعد النمط داخل عنصر <style> كيفية عرض عناصر HTML في متصفح الويب.

مثال
تشغيل
  1. <head>
  2. <title>Embedding Style Sheets</title>
  3. <style>
  4. body {
  5. color: #ff0000;
  6. }
  7. <style>
  8. </head>

العنصر Meta

يوفر عنصر <meta> بيانات وصفية حول صفحة HTML. البيانات الوصفية metadata هي مجموعة من البيانات التي تعطي معلومات حول البيانات الأخرى.

مثال
تشغيل
  1. <head>
  2. <title>Specifying Metadata</title>
  3. <meta charset="utf-8">
  4. <meta name="author" content="Murad">
  5. </head>

سيتم شرح العنصر <meta> بمزيد من التفصيل في الدرس القادم.

العنصر Script

يتم استخدام عنصر <script لتحديد البرنامج النصي من جانب العميل ما يعرف بـ client-side script ، مثل JavaScript في صفحات HTML.
سيعرض المثال التالي رسالة ترحيب في متصفح الويب بإستخدام لغة JavaScript:

مثال
تشغيل
  1. <head>
  2. <title>Adding JavaScript</title>
  3. <script>
  4. document.write("<h1>Hello World!</h1>")
  5. </script>
  6. </head>
« التالي السابق »