HTML Head Element | In Arabic
HTML Head Element – فى هذا الفصل هنتعرف على العنصر head. فيما يٌستخدم؟ وكيفية إستخدامة؟ وكل المعلومات حوله هذا العنصر، مع بعض الأمثلة التوضيحية.
HTML Head Element
عنصر الـ <head> هو حاوية لبيانات صفحة الـ HTML، لا يتم عرض البيانات التى بداخل وسم <head> فى المتصفح.
يتم وضع وسم الـ <head> بعد فتحة وسم الـ <html> وقبل فتحة وسم الـ <body>.
مثال للتوضيح
Head Element
Test head element!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Head Element</title>
</head>
<body>
<h2>Head Element</h2>
<p>Test head element!</p>
</body>
</html>
Head Element
Test head element!
بعض العناصر التى تُستخدم داخل وسم الـ <head>
1. title
يحدد عنصر الـ <title> العنوان الرئيسي لصفحة أو موقع الويب الذى يظهر فى الـ tab.
مثال للتوضيح:
<title>HTML Head Element</title>
الـ title الجيد يجب أن يكون قصيرًا ومحدّدًا لمحتوى المستند ، لأن برامج زحف الويب لمحرك البحث تولي اهتمامًا خاصًا للكلمات المستخدمة في العنوان، ويجب أن يكون طول العنوان أقل من 65 حرفًا.
2. link
العنصر <link> يحدد العلاقة بين المستند document الحالي والمستندات الخارجية. من الشائع استخدامة مع ملف الـ style الخاص بتنسيق عناصر الـ HTML.
مثال للتوضيح:
<head> <link rel="stylesheet" href="style.css"> </head>
3. style
يتم استخدام عنصر الـ <style> لتعريف معلومات style المضمنة لمستند HTML.
كما قُلت من قبل، يُحدد عنصر الـ <style> كيفية عرض عناصر HTML في المستعرض من حيث سُمك ولون الخط – الخلفية الخاصة بالعناصر – ارتفاع وعرض الصور – ..والكثير من الأشياء.
مثال للتوضيح:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Head Element</title>
<style>
.demo {
color: blue;
}
</style>
</head>
<body>
<h2 class="demo">Head Element</h2>
<p>Test head element!</p>
</body>
</html>
Head Element
Test head element!
يجب استخدام وسم الـ <style> عندما يكون تصميم لمستند واحد فريد، إذا كان نفس التصاميم مُستخدمة فى أكثر من مستند HTML فمن الأفضل إستخدام ملف خارجى.
4. meta
يوفر العنصر <meta> بيانات تعريف حول مستند HTML مثل:
- نوع الأحرف.
- وصف للصفحة.
- اسم صاحب الصفحة.
- الكلمات الرئيسية للصفحة لفهرسة الصفحة فى محرك البحث Google، والكثير ..
مثال على وسوم الـ <meta>:
<!-- Meta --> <meta charset="UTF-8"> <!-- Set Character --> <meta name="description" content="Learning Programming"> <!-- description your web page --> <meta name="author" content="Hamed Essam"> <!-- author of page --> <meta name="keywords" content="HTML,CSS,JavaScript, PHP"> <!-- keywords for search engines --> <meta http-equiv="refresh" content="10"> <!-- for refresh page every 10s -->
توضيح المثال السابق:
- (“charset=”UTF-8): تحدد مجموعة الأحرف character المستخدمة و UTF إختصار لـ Unicode Transformation Format و رقم 8 يعني أنه يستخدم (8 bit) لتمثيل الحرف.
- (“name=”description): تحدد وصفًا لصفحتك على الويب.
- (“name=”author): لتحدد كاتب الصفحة.
- (“name=”keywords): لتحدد الكلمات الرئيسية لمحركات البحث.
- (“http-equiv=”refresh): لتحديث المستند كل 10 ثانية.
5. base
يٌستخدم عنصر <base> لتحديد عنوان URL أساسي لجميع الروابط Relative URLs الموجودة في المستند.
على سبيل المثال يمكنك تعيين عنوان URL الأساسي مرة واحدة أعلى صفحتك ، وبعد ذلك ستستخدم جميع الروابط اللاحقة عنوان URL هذا كنقطة بداية. كالتالى:
<base href="https://www.albashmoparmeg.com/">
يجب ان يظهر عنصر <base> قبل اي عنصر يشير إلى ملفات خارجية مثل ملف الـ style أو اى ملفات اخرى، وتسمح لغة الـ HTML بعنصر base واحد فقط لكل مستند.
6. script
عنصر <script> يُستخدم لتحديد البرنامج النصي من جانب العميل ، مثل لغة JavaScript في مستندات HTML.
مثال بسيط (يعرض رسالة “Hello Programmer”):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Head Element</title>
<script>
document.getElementById('demo').innerHTML = "Hello Programmer!";
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
قَيم نفسك – Mini quiz
قُم بإجراء هذا الإختبار القصير على درس “HTML Head Element” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!