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

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

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

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

  • عنوان المقال الذي يجب ان نستخدم له هذا العنصر <h1> </h1>
  • محتوى المقال الذي يجب ان نستخدم له هذا العنصر <p> </p>

ولكن إذا ارانا ان نضيف صورة الى الموقع او فيديو او مقطع صوتي او عمل مكونات اخرى للموقع مثل 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 والى جاى بعد كده مَبنى على الشرح ده