مكونات لغة 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>

الفيديو الخاص ب مكونات لغة HTML

شرح الاكواد

1.1 Doctype html شرح <!DOCTYPE html>

هذا هو اول سطر في اكواد لغة HTML ويكون دائما هو اول سطر برمجي في الصفحة وكلمة doctype تتكون من

doc وهى اختصار ل document
type وترجمتها نوع
HTML وهى نوع اللغة المُستخدمة

وبالتالي هذا الكود وظيفته ان يُخبر المتصفح ان الاكواد التالية هي اكواد لغة HTML

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

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

Element وهو العنصر وكما ترى في السطر الثاني بداية العنصر <html >ونهاية هذا العنصر في اخر سطر وهو <html />وبداخلهم مجموعة من الاكواد
tag وترجمته وَسم
- والعنصر يتكون من start tag وهو <html >
- ويتكون أيضا من end tag وهو <html />

ونلخص ذلك ان العنصر هو </html><html>و العنصر يتكون من

بداية التاج
ونهاية التاج
والمُحتوى داخل التاج

1.2 HTML head tag <head>...</head>: والان نشرح اول مُكون من مكونات لغة html وهو عنصر ال head ويكون بداخلة معلومات عن الصفحة والتي غالبا لا تظهر للمُستخدم العادي
1.3 HTML title tag <title>...</title>: وفى هذا المثال عنصر ال head يحتوي على عنصر اخر هو ال title والمُحتوى بداخل هذا العنصر يظهر في هذا المكان كما هو موضح بالصورة

2 <body>

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

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

المُلخص

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

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

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