الكورس

Advertisements

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 حرفًا.


Advertisements

 

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>

script> فى نهاية مستند الـ HTML قبل قفلة وسم الـ لأسباب كثيرة ، تم شرحها فى فصل HTML Scripts.


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Head Element” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.





الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements