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

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

مكونات لغة HTML

تتكون صفحة لغة HTML من عنصرين أساسيين هم

1- head

2- body

1 head

مثال على ذلك عندما ذكرنا في شرح سابق ان لغة HTML هي التي تصف مُحتوى الموقع للمُتصفح وذكرنا مثال المقال الذي يتكون من :

  • عنوان المقال
  • مُحتوى المقال

والان نريد ان نُطبق هذا المثال: فتخيل معنى أنك تُريد ان تكتب مقال عن (تَعلم لغة HTML ) ويظهر على الانترنت؛ ف أنك تحتاج التالي :

  • برنامج تكتب بداخله هذه الاكواد البرمجية (سوف نتحدث عنه في الشرح القادم)
  • ان تتعلم هذه الاكواد البرمجية التي ستُمكنك من ذلك

وهذا هيكل بسيط للغة HTML


<!DOCTYPE html>

<html>

  <head>
      <title>Document</title>
  </head>

  <body>
      <h1> html تعلم لغة  </h1>
      <p> .......................مُحتوى المقال </p>
  </body>

</html>

شرح الاكواد

1.1Doctype html شرح
<!DOCTYPE html>
هذا هو اول سطر في اكواد لغة HTML ويكون دائما هو اول سطر برمجي في الصفحة وكلمة doctype تتكون من
  • doc وهى اختصار ل document
  • type وترجمتها نوع
  • HTML وهى نوع اللغة المُستخدمة
وبالتالي هذا الكود وظيفته ان يُخبر المتصفح ان الاكواد التالية هي اكواد لغة HTML

الفرق بين HTML Element و HTML tag

قبل شرح باقي الاكواد يجب معرفة مُصطلحين مهمين هما

  1. Element وهو العنصر وكما ترى في السطر الثاني بداية العنصر < html > ونهاية هذا العنصر في اخر سطر وهو < html /> وبداخلهم مجموعة من الاكواد
  2. tag وترجمته وَسم
    • والعنصر يتكون من start tag وهو < html >
    • ويتكون أيضا من end tag وهو < html />
ونلخص ذلك ان العنصر هو </html> <html> و العنصر يتكون من
  • بداية التاج
  • ونهاية التاج
  • والمُحتوى داخل التاج
شرح الفرق بين html element  و html tag
1.2HTML head tag
<head>...</head>
والان نشرح اول مُكون من مكونات لغة html وهو عنصر ال head ويكون بداخلة معلومات عن الصفحة والتي غالبا لا تظهر للمُستخدم العادي
1.3HTML title tag
<title>...</title>
وفى هذا المثال عنصر ال head يحتوي على عنصر اخر هو ال title والمُحتوى بداخل هذا العنصر يظهر في هذا المكان كما هو موضح بالصورة
شرح الفرق بين html element  و html tag

2<body>

وننتقل الى العنصر التالي وهو عنصر ال body وبداخل هذا العنصر نَكتب المُحتوى الذى يظهر الى المستخدم العادي الذى يتصفح الموقع ونلاحظ ان بداخلة مجموعة من العناصر التي تصف مُحتوى الصفحة

2.1HTML h1 tag
<h1>...</h1>
<h1>هذا التاج يكون بداخلة عنوان المقال لان هذه الطريقة الصحيحة لوصف عنوان المقال الى المُتصفح
حرف ال h اختصار ل heading يعنى العنوان
2.1Html p tag
<p>...</p>
<p>هذا التاج يكون بداخلة مُحتوى المقال لان هذه الطريقة الصحيحة لوصف مُحتوى المقال الى المُتصفح وحرف ال p هو اختصار ل paragraph وتعنى فقرة مقال

المُلخص

هو ان هذه الاكواد


<!DOCTYPE html>

<html>

  <head>
      <title>Document</title>
  </head>

  <body>
      <h1> html تعلم لغة  </h1>
      <p> .......................مُحتوى المقال </p>
  </body>

</html>

تُعطى هذه النتيجة

شرح الفرق بين html element  و html tag