رأس الصفحة HTML - The Head Element

رأس الصفحة HTML - The Head Element
عنصر <head> عبارة عن حاوية للعناصر التالية: <title> و <style> و <meta> و <link> و <script> و <base>.
العنصر <head>
عنصر <head> عبارة عن حاوية للبيانات الوصفية (metadata) ويتم وضعه بين علامة <html> وعلامة <body>.
بيانات HTML الوصفية هي بيانات حول مستند HTML. لا يتم عرض البيانات الوصفية.
تحدد البيانات الوصفية عادةً عنوان الصفحة ومجموعة الأحرف character والأنماط styles والبرامج النصية scripts ومعلومات التعريف الأخرى.

عنصر <title> في HTML
يحدد عنصر <title> عنوان الصفحة. يجب أن يكون العنوان نصيًا فقط ، ويظهر في شريط عنوان المتصفح أو في علامة تبويب الصفحة.
عنصر <title> مطلوب في صفحات HTML!
تعتبر محتويات عنوان الصفحة مهمة جدًا لتحسين محرك البحث (SEO)! يتم استخدام عنوان الصفحة بواسطة خوارزميات محرك البحث لتحديد الترتيب عند سرد الصفحات في نتائج البحث.
عنصر <title>:

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

لذا ، حاول أن تجعل العنوان دقيقًا وذا معنى قدر الإمكان!
مستند HTML بسيط:
مثال

<!DOCTYPE html>
<html>
<head>
<title> عنوان صفحة ذو مغزى </title>
</head>
<body>
<p> يتم عرض محتوى عنصر النص في نافذة المتصفح. </ p>
<p> يتم عرض محتوى عنصر العنوان في علامة تبويب المتصفح ، في المفضلة ونتائج محرك البحث. </ p>
</body>
</html>

عنصر <style>
يُستخدم عنصر <style> لتعريف معلومات style لصفحة HTML واحدة:
مثال

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>هذا عنوان</h1>
<p>هذه فقرة.</p>
  
<p>يتم عرض محتوى عنصر النص الأساسي في نافذة المتصفح.</p>
<p>يتم عرض محتوى عنصر العنوان في علامة تبويب المتصفح ، في المفضلة ونتائج محرك البحث.</p>

</body>
</html>

عنصر <link>
يحدد العنصر <link> العلاقة بين المستند الحالي والمورد الخارجي.
غالبًا ما تُستخدم علامة <link> للارتباط صفحات css الخارجية:
مثال

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

عنصر <meta>
يُستخدم عنصر <meta> عادةً لتحديد مجموعة الأحرف character ووصف الصفحة والكلمات الأساسية keywords ومؤلف الصفحة وإعدادات منفذ العرض.
لن يتم عرض البيانات الوصفية على الصفحة ، ولكن يتم استخدامها بواسطة المتصفحات (كيفية عرض المحتوى أو إعادة تحميل الصفحة) ومحركات البحث (الكلمات الرئيسية) وخدمات الويب الأخرى.
أمثلة
حدد مجموعة الأحرف المستخدمة the character set used:

<meta charset="UTF-8">

تحديد الكلمات الأساسية لمحركات البحث keywords for search engines:

<meta name="keywords" content="HTML , CSS , JavaScript">

حدد وصفًا لصفحة الويب الخاصة بك description of your web page:

<meta name="description" content="دروس ويب مجانية">

حدد مؤلف الصفحة the author of a page:

<meta name = "author" content = "mohamed waali radji">

قم بتحديث المستند كل 30 ثانية Refresh document every 30 seconds:

<meta http-equiv="Refresh" content="30">

تعيين منفذ العرض لجعل موقع الويب الخاص بك يبدو جيدًا على جميع الأجهزة:

<meta name="viewport" content="width=device-width،
  initial-scale = 1.0">

مثال على علامات <meta>:
مثال

<head>
<meta charset="UTF-8">
<meta name="description"content = "دروس ويب مجانية">
<meta name="keywords" content="HTML ، CSS ، JavaScript">
<meta name="author" content="mohamedwaali radji"></head>

إعداد منفذ العرض Setting The Viewport
منفذ العرض هو المنطقة المرئية للمستخدم لصفحة الويب. يختلف باختلاف الجهاز - سيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.
يجب عليك تضمين عنصر <meta> التالي في جميع صفحات الويب الخاصة بك:

<meta name="viewport" content="width=device-width،
  initial-scale=1.0">

يوفر هذا إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها .
يحدد width=device-width عرض الصفحة لمتابعة عرض شاشة الجهاز (والذي سيختلف اعتمادًا على الجهاز).
يضبط الجزء initial-scale=1.0 مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.

عنصر <script>
يُستخدم عنصر <script> لتعريف JavaScripts من جانب العميل.
JavaScript التالية تكتب "Hello JavaScript!" في عنصر HTML بالمعرف (id) = "demo":
مثال

<!DOCTYPE html>
<html>
<head>
  <title>عنوان الصفحة يضهر لمحرك البحث</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "مرحبا JavaScript!";
  }
  </script>
</head>
<body>

<h1>صفحة الويب الخاصة بي</h1>
<p id="demo">فقرة</p>
<button type="button" onclick="myFunction()">اضغط هنا</button>

</body>
</html>

عنصر <base>
يحدد العنصر <base> عنوان URL الأساسي أو الهدف لجميع عناوين URL ذات الصلة في الصفحة.
يجب أن تحتوي العلامة <base> على سمة href أو سمة target ، أو كلاهما.
يمكن أن يكون هناك عنصر واحد فقط من <base> في الصفحة!
مثال
حدد عنوان URL افتراضيًا وهدفًا target افتراضيًا لجميع الروابط على الصفحة:

<!DOCTYPE html>
<html>
<head>
  <base href="https://itqan7.blogspot.com/" target="_blank">
</head>
<body>

<h1>The base element</h1>
 
<p><a href="search/label/html">HTML base tag</a> - لاحظ أن الرابط يفتح في نافذة جديدة ، حتى لو لم يكن به target="_blank" ينسب. هذا بسبب تعيين السمة target للعنصر الأساسي على "_blank".</p>

</body>
</html>

ملخص الفصل

العنصر <head> عبارة عن حاوية للبيانات الوصفية (بيانات حول البيانات)
يتم وضع عنصر <head> بين علامة <html> وعلامة <body>
عنصر <title> مطلوب ويحدد عنوان المستند
يتم استخدام عنصر <style> لتعريف معلومات النمط لصفحة واحدة
غالبًا ما تُستخدم علامة <link> للارتباط بصفحات css الخارجية
يُستخدم عنصر <meta> عادةً لتحديد مجموعة الأحرف ووصف الصفحة والكلمات الأساسية ومؤلف الصفحة وإعدادات منفذ العرض
يُستخدم عنصر <script> لتعريف JavaScripts من جانب العميل
يحدد العنصر <base> عنوان URL الأساسي و / أو الهدف لجميع عناوين URL ذات الصلة في الصفحة

الدرس السابق الدرس التالي