تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

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

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

سعر الإعلان 3$ فى اليوم الواحد

الوسوم الأساسية للغة HTML

كما قلنا من قبل ان لغة html وظيفتها هي وصف المحتوى للمُتصفح وذكرنا مثال المقال الذي يتكون من :

ولكن إذا ارانا ان نضيف صورة الى الموقع او فيديو او مقطع صوتي او عمل مكونات اخرى للموقع مثل header, footer, sidebar الذي ذكرناهم في هذا الدرس . فما هو الوسم المناسب لكل عنصر؟!

وهذه الوسوم الأساسية للغة html وفى الشرح القادم سنشرح باقي وسوم لغة html

الوسوم الأساسية للغة html

ولكن قبل الشرح يجب معرفة هذه المعلومة جيداً


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

1

html !DOCTYPE

<!DOCTYPE html>

  • هذا هو اول سطر في اكواد لغة html ويكون دائما هو اول سطر قبل جميع الاكواد
  • هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html
  • هذا ليس case sensitive (تعبير ذكرناه في هذا الدرس ) ويعنى انه يمكننا كتابتها كالتالي ولن يحدث خطأ :
    • < DOCTYPE html! >
    • < DocType html! >
    • < Doctype html! >
    • < doctype html! >
2

HTML <html> tag

<html> </html>

  • هذا العنصر يحتوي على جميع عناصر html ماعدا طبعا <!DOCTYPE html> ولكن يأتى بعده مباشرة وهو أيضا يُخبر المتصفح ان هذه الاكواد هي اكواد لغة html
3

HTML head tag

<head> </head>

وهذا العنصر يكون بداخلة مجموعة من العناصر التي تحتوي على معلومات خاصة بالصفحة ولكن لا تظهر بشكل مباشر للمُستخدم العادي؛ أمثله على هذه العناصر:

  • <title> </title> سيتم شرحها في الأسفل
  • <style> </style> ويتم وضع اكواد لغة CSS بداخل هذا العنصر
  • < base > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
  • < link > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
  • < meta > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
  • <script> </script> ويتم وضع اكواد لغة JavaScript بداخل هذا العنصر
4

HTML title tag

<title> </title>

  • هذا العنصر يكون داخل عنصر ال <head> </head>
  • جميع صفحات الويب تحتوي على هذا العنصر لأنه هو الذي يحدد عنوان الصفحة
  • والمحتوى بداخله هو الذي يظهر في شريط أدوات المتصفح (browser toolbar) كما هو موضح بالصورة:
    شرح الفرق بين html element و html tag
  • وأيضا المحتوى الذي بداخله هو الذي يظهر في نتائج مُحركات البحث
5

HTML body tag

<body> </body>

  • وبداخل هذا العنصر نضع العناصر التي تصف المحتوى للمتصفح مثل عنوان المقال ومحتوى المقال والصور والفيديوهات
  • والمُحتوى بداخل هذا العنصر هو الذي يظهر للمستخدم العادي الذي يتصفح الموقع
6

HTML h1:h6 tags

<h1> </h1>

  • هذا العنصر الذي يصف عنوان الصفحة داخل الموقع الذي يراه زائر الموقع
  • وانا كان لدينا أكثر من عنوان داخل الصفحة ف اننا نستخدم الاتي حسب أهمية العنوان:
    • <h1> </h1> بداخل هذا العنصر نضع اهم عنوان في الصفحة
    • <h2> </h2>
    • <h3> </h3>
    • <h4> </h4>
    • <h5> </h5>
    • <h6> </h6> بداخل هذا العنصر نضع العنوان الأقل اهميه في الصفحة
7

HTML p tag

<p> </p>

  • حرف ال p وهو اختصار ل paragraph وترجمتها هي مقال قصير (فقرة) وبالتالي هذا العنصر يكون بداخله مقال قصير.
8

HTML br tag

<br />

  • br اختصار ل break وترجمتها فاصل وتُستخدم لعمل فواصل بين الجُمل
  • مثال على ذلك عندما تقوم بكتابة مقال ف إنك تقوم بكتابة اول جملة ثم تريد ان تكون الجملة التأليه من السطر القادم ف إنك تستخدم هذا الوسم بين الجملتين
  • ويمكن أيضا ان تُكتب <br > او </ br >
  • وكما تلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
9

HTML hr tag

<hr />

  • hr اختصار ل horizontal rule ويُستخدم للفصل بين فقرتين مثلاً؛ بخط أفقي.
  • ويمكن أيضا ان تُكتب <hr > او </ hr >
  • وكما تلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
10

HTML <!-- ... --> tag

<!-- ... -->

  • المحتوى بداخل هذا العنصر يكون شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة فقط يظهر للمبرمج الذي يقوم بكتابة اكواد الموقع
  • ويستخدم عندما يكتب المبرمج بعض الاكواد المعقدة او لعمل شرح للأكواد لكي يسهل على المبرمج الذي سيقوم بالتعديل او تحديث الموقع في المستقبل

المُلخص

هذا المثال يحتوى على جميع الوسوم التى تم ذكرها فى هذا الشرح


 
<!DOCTYPE html>
<html>
   <head>
      <title>Courses 4 Arab</title>
   </head>
   <body>
      <!-- المقدمة -->
      <h1>أهم لغات برمجة المواقع</h1>
      <p>
         يوجد العديد من لغات برمجة المواقع ولكن اهمهم
         <br /> html لغة
         <br /> css لغة
      </p>
      <hr />
      <!-- المقال الاول -->
      <h2>html لغة</h2>
      <p>.... هى ليست لغة برمجة وهى اختصار ل</p>
      <hr />
      <!-- المقال الثانى -->
      <h2>css لغة</h2>
      <p>وهى ليست لغة برمجة ولكن هى المسؤلة عن شكل العنصر</p>
   </body>
</html> 

وهذه هى النتيجة النهائية التى سوف تَظهر ل زائر الموقع


مثال كود html


نصيحة من أخوك 😍

بعد ما تقرأ الشرح ده افتح برنامج VS code وطبق الأكواد دى بنفسك يا صاحبى 😘

لأن الشرح البسيط ده هو أساس لغة html والى جاى بعد كده مَبنى على الشرح ده

المصادر

w3.org

  1. w3.org DOCTYPE
  2. w3.org html tag
  3. w3.org head tag
  4. w3.org title tag
  5. w3.org body tag
  6. w3.org h1:h6 tags
  7. w3.org p tag
  8. w3.org br tag
  9. w3.org hr tag
  10. w3.org !-- ... -- tag

w3schools.com

  1. w3schools.com DOCTYPE
  2. w3schools.com html tag
  3. w3schools.com head tag
  4. w3schools.com title tag
  5. w3schools.com body tag
  6. w3schools.com h1:h6 tags
  7. w3schools.com p tag
  8. w3schools.com br tag
  9. w3schools.com hr tag
  10. w3schools.com !-- ... -- tag
😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡