HTML - The Head Element

-

في هذه المقالة، بنتعرف على Head في HTML، بالإضافة الى كيفية تنفيذها من خلال الأمثلة. وشو هي الفائدة منهم وماذا يحتوي.

Head عبارة عن حاوية container لمجموعة من البيانات (metadata) التي تستخدم في الصفحات والمواقع. ومكانه بكون بعد html> tag> وقبل body> <tag

ما هي metadata:

هي عبارة عن بيانات وصفيه عن الصفحة لا يتم عرضها في المتصفحات. وعادتا تحتوي على وصف الصفحة ، character set ، كلمات مفتاحيه keywords ، المؤلف Author ،و viewport settings

من الأشياء المهمة في هذا الجزء هي keywords والسبب ان هاي الكلمات الأساسية يتم استخدامه في محركات البحث للوصول الى الصفحة. 

امثلة :

استخدام character set (الترميز الخاص بالصفحة)

<meta charset="UTF-8">

شو هي charset="UTF-8"

في هذا الجزء يتم تحديد مجموعه الرموز للصفحة حتي يتمكن المتصفح من التعامل معها وعرضها بشكل صحيح و في UTF-8:

  • UTF-8 مطابق لـ ASCII للقيم من 0 إلى 127.
  • لا يستخدم UTF-8 القيم من 128 إلى 159.
  • UTF-8 مطابق لكل من ANSI و 8859-1 للقيم من 160 إلى 255.
  • يستمر UTF-8 من القيمة 256 بأكثر من 10000 حرف مختلف.

طيب وشو هي ASCII : هي باختصار :

  • يستخدم ASCII القيم من 0 إلى 31 (و 127) ل control characters.
  • يستخدم ASCII القيم من 32 إلى 126 ل letters, digits, symbols.
  • لا يستخدم ASCII القيم من 128 إلى 255.

استخدام keywords 

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

معلومات ووصف الصفحة

<meta name="description" content="Introduction to HTML">

معلومات عن المؤلف

<meta name="author" content="hatem al-talafha">

في هذا الكود نعمل refresh للصفحة كل 60 ثانيه

<meta http-equiv="refresh" content="60">

في هذا الكود بنعمل الصفحه تتعدل بشكل يناسب حجم الشاشة المستخدمة (viewport settings)

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

نفهم شو هي viewport settings

Viewport :  هي الجزء من  الشاشة للمستخدم (منطقة العرض المرئية للمستخدم في صفحات الويب ) واكيد الحجم مختلف حسب حجم الجهاز (في حال العرض عن طريق الموبايل او الكمبيوتر او اللاب توب وغيرها). فا بناء على حجم الشاشة اكيد طريقة العرض بتكون مختلفة وحتي نضمن تكون الصفحه متناسقة مع جميع الاحجام بنستخدم الكود: 

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

لاحظ ان حددنا في هذا السطر العرض width والي بكون بحجم عرض الجهاز المستخدم device-width. بينما الامر initial-scale بعمل تحديد لحجم التكبير المبدئي عن تحميل الصفحة للمرة الأولى.

حتى نفهم الموضوع بشكل احسن طبق الكود التالي في صفحة HTML 


<!DOCTYPE html>
<html>
<head>
    <title>حكم وامثال</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    body {background-color: powderblue;}
    h2 {color: red;}
    p {color: blue;}
  </style>
<body>
<h2 id="wisdomh2" >حكم وامثال</h2>
<img src="BMW.jpg">
<p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا .العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p>
</body>
</html>

النتيجة

الان خلونا نحذف الكود المحدد بخلفيه اصفر وشوف النتيجة.

النتيجة

وحتي تشوف الفرق بشكل واضح لازم تعمل طريقة العرض في المتصفح باستخدام الموبايل وحتي نعملها:

انقر يمين في أي مكان في الشاشة وبعدها ختار inspect 


وبعدها بختار العرض باستخدام الموبايل (العلامة بالأحمر)

طيب نفهم شو هو <Title> 
العنوان هو اسم الصفحة، وبكون نص فقط، بتم عرضه في الصفحة في شريط العنوان Title Bar في page tab
عنوان الصفحة مهم جدا خصوصا لمحركات البحث (SEO)، وهي واحد من الطرق الي بتمكن حركات البحث من الوصول الى الصفحات الخاصة بك.
نطبق مثال حتي نفهم الموضوع. 
طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<head>
    <title>حكم وامثال</title>
</head>
<body>
<h2 id="wisdomh2" >حكم وامثال</h2>
</body>
</html>
النتيجة صورة
الكتابة ممكن تكون عربي او انجلش او أي لغة ثانيه.

<Style> 
حكينا سابقا عن style في الصفحات، ومن خلال ال style يمكن تطبيق مجموعه من الخصائص على صفحات HTML ممكن نعطي مواصفات ل HTML element لتغير خصائصا مثل تغير الألوان color ، الحواف Border، الهوامش Margin ... الخ.
مثال :

<!DOCTYPE html>
<html>
<head>
    <title>حكم وامثال</title>
</head>
<style>
    body {background-color: powderblue;}
    h2 {color: red;}
    p {color: blue;}
  </style>
<body>
<h2 id="wisdomh2" >حكم وامثال</h2>
<p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.</p>
</body>
</html>
في المثال السابق قمنا بإضافة كود في Style section مباشرة وهاذي الطريقة تسمى inline CSS. 
كيف ممكن نضيف ملف CSS في صفحات HTML
ممكن نعمل ملفات CSS منفصله ومستقله (ممكن الصفحة تحتوي اكثر من ملف CSS ). 
لإضافة هذه الملفات الى صفحات HTML بنستخدم 
<Link> element 
تمام التمام طريقة الإضافة للملفات بتكون:
<link rel="stylesheet" href="mystyle.css">
في href حددنا اسم الملف واكيد لازم يكون المسار الكامل للملف حسب مكان التخزين عندك.

استخدام script> element> 
يستخدم script> element> لتعريف الكود الخاص ب JavaScripts وهو من نوع client-side ويعني ان التنفيذ بتم في جهاز المستخدم ولا حاجة الى ارسال طلب ل server لمعالجة الطلب، واكيد هذا الاشي بساعد في سرعة التنفيذ.
حتي نفهم الموضوع نطبق المثال التالي :

<!DOCTYPE html>
<html>
<head>
  <title>My fisrt Javascript Function</title>
  <script>
  function myFunction() {
    document.getElementById("MyName").innerHTML = "Hello My Name is : Lareen al-talafha";
  }
  </script>
</head>
<body>
<button type="button" onclick="myFunction()">Print My Name</button>
<p id="MyName"></p>
</body>
</html>
شغل الصفحة وضغط على button بتكون النتيجة عرض الاسم. 
في الكود السابق عملنا function في JavaScript لعرض الاسم في p> element>. في JavaScript حتي نوصل لأي HTML element عن طريق id الخاص بهاذ element بنستخدم الكود: 
document.getElementById("HTML Element Id")
بعد هيك عرضنا القيمة المطلوبة في هذا element  باستخدام  innerHTML . 
تم استدعاء هذا function عند النقر فوق button  باستخدام الكود:
onclick="myFunction()"

استخدام base> element> 
base> element> هو تحديد عنوان افتراضي في الصفحة بحيث يكون جميع URL’s في الصفحة مربوطة مع هذا العنوان. وفي حال كان عندنا في الصفحة Href وما الو رابط محدد بتم فتح الرابط الافتراضي بدل ما يفتح صفحة مش موجوده ويرجع خطأ.
طريقة الكتابة 
<head>
<base href="https://www.devkum.com/" target="_blank">
</head>
اجباري تحديد href في <base> وال target الافتراضي دائما صفحة جديده حتى لو ما كتبناها هون. بمعن ان الوضع الافتراضي أي رابط بفتح بصفحه ثانيه الا إذا حددننا غير ذلك