الوسم Head | مكونات لغة HTML | دروس HTML5

الوسم <head> | مكونات لغة HTML

في الدروس السابقة، تم تقديم شرح موجز عن علامة <head>، وفي هذا الدرس سنناقش هذا العنصر بالكامل.

الوسم <head> عبارة عن حاوية للبيانات الوصفية (بيانات) الواقعة بين علامتي <html> و <body>.

بيانات HTML الوصفية هي بيانات حول مستندات HTML. لا يتم عرض البيانات الوصفية.

تحدد البيانات الوصفية عادةً عناوين  المجلدات، والأحرف، والأنماط، والروابط، والبرامج النصية، وغيرها من المعلومات لمستندات HTML.

يتم تعريف البيانات الوصفية باستخدام العلامات التالية: <title> ، <style> ، <meta> ، <link> ، <script> و <base>.


 الوسم <title> في HTML

يحدد العنصر <title> عنوان مستند HTML وهو إلزامي في جميع مستندات HTML و XHTML.

 الوسم <العنوان>:

  • يحدد عنوانا لعلامة تبويب المتصفح.
  • يوفر عنوانًا للصفحة يتم استخدامه لاهتمامات المتصفحات.
  • يحدد عنوان الصفحة التي تظهر في نتائج محرك البحث.

 مستند HTML بسيط:

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>

 الوسم <style> في HTML

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

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

الوسم <link> في HTML

يُستخدم عنصر <link> للإشارة إلى صفحات الأنماط الخارجية:

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

الوسم <meta> في HTML

يتم استخدام  الوسم <meta> لتحديد أوصاف الصفحة والكلمات الرئيسية والمؤلف ومعلومات أخرى.

يتم استخدام البيانات الوصفية بواسطة المتصفحات (كيفية عرض المحتوى) ومحركات البحث (الكلمات الرئيسية) وخدمات الويب الأخرى.

تعريف الحرف المستخدم:

<meta charset="UTF-8">

تعريف توضيحي للصفحة:

<meta name="description" content="Free Web tutorials">

تحديد الكلمات الأساسية لمحركات البحث:

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

تعريف مؤلف الصفحة:

<meta name="author" content="John Doe">

أعد تحميل المستند كل 30 ثانية:

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

مثال على العلامات الوصفية:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

تعيين منفذ العرض للصفحة

طريقة تسمح لمصممي الويب بالتحكم في كيفية عرض الصفحة عبر علامة <meta> على أجهزة مختلفة.

تعد Viewport  سهلة الاستخدام على صفحة الويب والتي تختلف باختلاف الجهاز وتكون أصغر على أجهزة الجوال منها على الشاشات الرئيسية.

يجب عليك وضع علامة <meta> التالية في جميع صفحاتك:

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

توفر علامة <meta> لإطار العرض تعليمات حول كيفية عرض الصفحة وحجمها وحجمها للمتصفح.

ألق نظرة على المثالين التاليين، أحدهما يحتوي على علامة Viewport الوصفية والآخر بدونها، وشاهد كيف يتم عرضهما على الجهاز المحمول:

الوسم <head> | مكونات لغة HTML
                                                 بدون استخدام العلامة              باستخدام العلامة الوصفية 

الوسم <script> في HTML 

يُستخدم الوسم <script> لتعريف JavaScripts من جانب المستخدم.

كود JavaScript تحت العبارة "Hello JavaScript!" يضع عنصرًا بالمعرف "id =":

<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

الوسم <base> في HTML

يحدد العنصر <base> عنوان URL الأساسي والهدف لجميع عناوين URL ذات الصلة على الصفحات (لاحظ أنه إذا لم نستخدم القاعدة، فسيكون عنوان URL الأساسي هو نفسه اسم المجال الخاص بنا هنا: www.arabicness.com): 

<base href="http://www.arabicness.com/images/" target="_blank">

في المثال، سيبحث المتصفح عن صورة html5.gif على https://www.w3schools.com/images/.


إزالة علامات <html> و <head> و <body> من صفحة HTML.

استنادًا إلى معايير HTML5 ، يمكننا إزالة علامات <html> و <head> و <body> من الصفحة.

تعمل في المثال التالي بسلاسة:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>


كلمات مفتاحية: