منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

شرح جميع الوسوم داخل عنصر head

يَتكون ملف لغة html من قسميين اساسين هما head وbody كما شرحناهنا
وفى هذا الشرح سوف نقوم ب شرح جميع الوسوم داخل القسم الأول وهو عنصر ال head.

1

html head tag

<head> </head>

لقد قمنا بشرح عنصر ال head مُسبقاً في هذاالشرح

2

html title tag

<title> </title>

لقد قمنا بشرح عنصر ال title مُسبقاً في هذاالشرح

3

html style tag

<style> </style>

هذا العُنصر يكون بداخله اكواد لغة CSS التي تقوم بتنسيق العنصر مثل تكبير وتصغير الخط وتغيير لونه ... الخ
وهذا العنصر يُمكن ان يكون داخل قسم ال head او body
مثال على ذلك
يُفضل وضع هذا العنصر داخل ال head حتى يتم تنفيذ اكواد لغة css اولا

4

html base tag

<base>او<base />

هذا العنصر ليس له نهاية وسم (closing tag) و يُمكن ان يُكتب <base /> او <base>
Base ترجمتها قاعدة او أساس وبالتالي هذا العنصر يحتوى على لينك أساسي وهذا اللينك الأساسي يكون اللينك الافتراضي للعنصر<a href=" " >
وهو يحتوى على attribute مهم جدا هو:

  • href : وتكون قيمته عبارة عن اللينك الأساسي او الافتراضي للعنصر<a>

مثال على ذلك:

<!DOCTYPE html>
<html>
  <head>
    <base href="https://courses4arab.com/" target="_blank" />
  </head>

  <body>
    // اللينك الأول
    <a href=" ">courses 4 arab</a>

    // اللينك الثاني
    <a href="html/introduction-to-html">learn HTML</a>
  </body>
</html>

ونلاحظ في هذا المثال ان الينك الأساسي او الافتراضي هو courses4arab.com وبالتالي عند الضغط على اللينك الأول فإننا نذهب مباشرة الى اللينك الافتراضي وهو www.courses4arab.com
ولكن عند الضغط على اللينك الثاني فإننا نذهب الى www.courses4arab.com/html/introduction-to-html
ونلاحظ ان كل لينك يفتح في نافذه خاصه به لأن العنصر <base>يحتوي على attribute يُسمى target وقيمته _blank

5

html link tag

<link>او<link />

لقد قمنا بشرح عنصر ال link مُسبقاً في هذاالشرح

6

html meta tag

<meta>او<meta />

هذا الوسم دائما يكون داخل عنصر ال head وليس له نهاية وسم (closing tag).
و يُمكن ان يُكتب <meta /> او <meta>
وهو المسئول عن إضافة معلومات للصفحة وهذه المعلومات لا تظهر لزائر الصفحة.
وله العديد من ال attributes الخاصة به:

  • Charset : وتكون قيمته عبارة عن نوع التشفير الذى سوف يستخدمه المُتصفح لقراءة الاكواد البرمجية الخاصة بصفحة الويب. ودائما تكون قيمته UTF-8 وهذا التشفير يستخدمه جميع المتصفحات لقراءة الاكواد البرمجية.
  • name=" " و content=" " يُمكن ان تكون القيم الخاصة ب ال name كالتالي:
    • application-name : ونستخدمه في حالة اذا كان الموقع من نوع dynamic ونكتب اسم الموقع في الجزء الخاص بال content
    • author : وترجمتها كاتب او مؤلف وبالتالي نَكتب اسم كاتب الصفحة او المقال في الجزء الخاص بال content
    • description : وترجمتها وصف وبالتالي نكتب وصف للصفحة في الجزء الخاص بال content
    • Keywords : وترجمتها الكلمات المفتاحية وبالتالي نكتب قائمة بالكلمات الرئيسية ذات الصلة بالصفحة لإخبار محركات البحث بموضوع الصفحة في الجزء الخاص بال content
    • viewport : ونضع في ال content هذا الكود width=device-width, initial-scale=1.0 حتى لا تظهر مشاكل اثناء عرض الصفحة على جميع احجام الشاشات المختلفة مثل شاشات الهاتف او شاشات الكمبيوتر.
  • http-equiv=" " و content=" " ونستخدم هذه ال attributes عندما نُريد عمل refresh للصفحة كل عدد ثواني معين. وتكون قيمة ال http-equiv هي refresh وقيمة ال content عبارة عن عدد الثواني.

مثال على ذلك:

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">

      <meta name="application-name" content="courses 4 arab">
      <meta name="author" content="Ali Hassan">
      <meta name="description" content="with us you will learn html and javascript">
      <meta name="Keywords" content="html, css, javascript">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

      <title>courses 4 arab</title>
  </head>

  <body>

      <script src="main.js"></script>
  </body>

</html>
7

html script tag

<script> </script>

هذا العُنصر يُمكن ان يكون داخل قسم ال head او قسم ال bodyويُفضل ان يكون هو اخر سطر في قسم ال body
ويكون بداخل هذا العنصر اكواد لغة JavaScript ولكن إذا ارنا كتابة اكواد JavaScript في ملف خارجي ونُريد ربطها بملف ال html فإننا نُضيف لهذا العنصر attribute يُسمى src وتكون قيمته عبارة عن اسم ومسار ملف ال JavaScript

8

html noscript tag

<noscript> </noscript>

المحتوى بهذا العنصر يظهر فقط عندما يكون المتصفح لا يدعم اكواد لغة JavaScript
ويمكن استخدام هذا العنصر داخل ال body او ال head ويفضل استخدام هذا العنصر في اخر سطر في قسم ال body


مثال على ذلك:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML script, noscript tags</title>
  </head>

  <body>
    <h1>Learn HTML</h1>

    <script>
      document.write("Hello World!");
    </script>
    <noscript>JavaScript للأسف يا صاحبى المتصفح بتاعك لايدعم ال </noscript>
  </body>
  
</html>