عنصر head في HTML هو حاوية للمعلومات الوصفية (الداتا حول الداتا) ويقع بين علامتيْ html و body.
المعلومات الوصفية في HTML: هي بيانات حول وثيقة HTML نفسها، ولا تظهر للمستخدم عند تصفح الصفحة.
استخدامات المعلومات الوصفية:
- تحديد عنوان الوثيقة.
- تعيين ترميز الأحرف المستخدم.
- إضافة أنماط CSS.
- تضمين أكواد جافا سكريبت.
- إضافة معلومات أخرى متطرفة.
أبناء عنصر head:
يحتوي عنصر head على العناصر التالية:
title: يحدد عنوان الصفحة الذي يظهر في شريط العنوان بالمستعرض.style: يضم أنماط CSS التي تتحكم في مظهر الصفحة.meta: تستخدم لتوفير معلومات إضافية حول الصفحة مثل ترميز الأحرف، الكلمات الفهرسة، ومحركات البحث.link: تستخدم لتوصيل الصفحة بموارد خارجية مثل أيقونات أو ملفات CSS خارجية.script: تضم أكواد جافا سكريبت التي تضيف تفاعلية للصفحة.base: تحدد URL الأساسي للصفحة، والذي يستخدم لتفسير الروابط النسبية بشكل صحيح.
عنصر title في HTML :
يعرّف عنصر title عنوان وثيقة HTML. يُكتب كنص صريح ويظهر في شريط عنوان المتصفح أو علامة التبويب الخاصة بالصفحة.
عنصر title ضروري في وثائق HTML!
محتوى عنوان الصفحة مهم جدًا لتحسين محركات البحث (SEO)! يستخدم محرك البحث خوارزميات لإدراج الصفحات في نتائج البحث، ويعتمد ذلك جزئيًا على عنوان الصفحة.
وظائف عنصر title:
- يعرض العنوان في شريط أدوات المتصفح.
- يضع عنوانًا للصفحة عند إضافتها إلى المفضلات.
- يظهر عنوانًا للصفحة في نتائج البحث بمُحركات البحث.
لذلك، حاول جعل العنوان دقيقًا وذو معنى قدر الإمكان!
مثال على وثيقة HTML بسيطة:
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
عنصر style في HTML :
يستخدم عنصر style لتحديد وتعيين أنماط CSS لصفحة HTML واحدة فقط. فهو بمثابة “قائمة من التعليمات” تحدد مظهر العناصر المختلفة وخطوطها وألوانها وغيرها من الخصائص البصرية.
مثال:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
عنصر link في HTML :
يستخدم عنصر link لتحديد العلاقة بين المستند الحالي (صفحة HTML) ومورد خارجي.
يستخدم رابط link غالبًا للربط بملفات CSS خارجية:
الاستخدامات الشائعة:
- ربط بملفات CSS خارجية لتطبيق أنماط مختلفة على الصفحة.
- تضمين أيقونات favicon في شريط عنوان المتصفح.
- تحديد ترميز الأحرف المستخدم في الصفحة.
- استخدم روابط خاصة أخرى مثل RSS feeds.
مثال:
<link rel="stylesheet" href="mystyle.css">
عنصر meta في HTML بالعربية:
يستخدم عنصر meta عادةً لتحديد ترميز الأحرف، ووصف الصفحة، والكلمات الرئيسية، ومؤلف المستند، وإعدادات عرض الصفحة على مختلف الأجهزة.
معلومات meta لن تظهر على الصفحة، لكنها تستخدم من قبل:
- المتصفحات: لتحديد كيفية عرض المحتوى أو إعادة تحميل الصفحة.
- محركات البحث: للبحث بناءً على الكلمات الرئيسية.
- خدمات الويب الأخرى: مثل مواقع التواصل الاجتماعي وغيرها.
أمثلة:
- تحديد ترميز الأحرف المستخدم:
HTML
<meta charset="UTF-8">يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
- تحديد كلمات رئيسية لمحركات البحث:
HTML
<meta name="keywords" content="HTML, CSS, JavaScript">يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
- إضافة وصف لصفحتك:
HTML
<meta name="description" content="دروس تعليمية مجانية للمواقع">يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
- تحديد مؤلف الصفحة:
HTML
<meta name="author" content="John Doe">يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
- إعادة تحميل الصفحة كل 30 ثانية:
HTML
<meta http-equiv="refresh" content="30">يُرجى استخدام الرمز بحذر. مزيد من المعلوماتcontent_copy
- ضبط عرض الصفحة لتظهر بشكل جيد على كل الأجهزة:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">مثال على مجموعة عناوين meta:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
ضبط مساحة العرض (Viewport)
منطقة العرض (Viewport) هي المساحة المرئية للمستخدم من صفحة الويب. هذه المساحة تختلف حسب الجهاز – فهي أصغر على الهاتف المحمول مقارنة بشاشة الكمبيوتر.
يوصى بتضمين علامة meta التالية في جميع صفحات الويب الخاصة بك:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">تعطي هذه التوجيهات للمتصفح كيفية التحكم في أبعاد الصفحة وتكبيرها.
width=device-width: يضبط عرض الصفحة وفقًا لعرض شاشة الجهاز المستخدم (والذي يختلف اعتمادًا على الجهاز).initial-scale=1.0: يضبط مستوى التكبير الافتراضي عند تحميل الصفحة لأول مرة في المتصفح.
فيما يلي مثال لصفحة ويب بدون علامة meta لعرض الصفحة ومثال مع وجودها:
- صفحة ويب بدون ضبط Viewport: link to example without viewport
- صفحة ويب مع ضبط Viewport: link to example with viewport
نصيحة: إذا كنت تتصفح هذه الصفحة باستخدام هاتف أو جهاز لوحي، يمكنك النقر على اللينكين أعلاه لرؤية الفرق.
هذه صفحه بدون ضبط
هذه صفحه تحتوي علي ضبط
عنصر script في HTML
يستخدم عنصر script لتضمين أكواد جافا سكريبت تعمل على المتصفح مباشرةً (جانب العميل). ويمكن استخدام هذه الأكواد لإضافة تفاعلية وديناميكية لصفحات HTML.
مثال:
يضيف كود جافا سكريبت التالي عبارة “مرحبا جافا سكريبت!” إلى العنصر ذي المعرف id="demo":
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
عنصر base في HTML :
يحدد عنصر base عنوان URL الأساسي و/أو الهدف لجميع الروابط النسبية في صفحة الويب. وهو بمثابة نقطة انطلاق لتصفح الروابط النسبية داخل الصفحة.
متطلبات عنصر base:
- يجب أن يحتوي على سمة
hrefأوtargetعلى الأقل، أو كليهما. - لا يمكن أن يكون هناك أكثر من عنصر
baseواحد في وثيقة HTML.
استخدامات عنصر base:
- تحديد عنوان URL الأساسي الذي تعتمد عليه الروابط النسبية.
- تعيين إطار هدف الافتراضي لفتح الروابط (مثل إطار جديد أو نافذة جديدة).
- تحسين تنظيم وتبسيط هيكل الروابط في الصفحة.
مثال:
تحديد عنوان URL الأساسي وفتح جميع الروابط في الإطار الحالي:
<head>
<base href="https://example.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
ملخص الفصل:
- عنصر
head: حاوية للمعلومات الوصفية (داتا عن الداتا) وتقع بين علامتيْhtmlوbody. - عنصر
title: ضروري ويحدد عنوان الوثيقة التي تظهر في شريط عنوان المتصفح. - عنصر
style: يستخدم لتحديد أنماط CSS لصفحة HTML واحدة. - رابط
link: يستخدم غالبًا للربط بملفات CSS خارجية لتطبيق أنماط مختلفة. - عنصر
meta: يستخدم لتحديد ترميز الأحرف، ووصف الصفحة، والكلمات الرئيسية، ومؤلف المستند، وإعدادات عرض الصفحة. - عنصر
script: يستخدم لتضمين أكواد جافا سكريبت تعمل على المتصفح مباشرةً. - عنصر
base: يحدد عنوان URL الأساسي و/أو الهدف لجميع الروابط النسبية في الصفحة.
