5- وسم البداية والنهاية – العناصر (Elements) والوسوم (Tags) – المستوى الأول: الأساسيات

بواسطةahmed

📌 وسم البداية والنهاية في HTML

🔹 ما هو الوسم (Tag)؟

  • الوسم هو تعليمة (Instruction) بيستخدمها المبرمج علشان يحدد للمتصفح وظيفة جزء معين من المحتوى.

  • الوسوم بتكون محاطة بـ أقواس زاوية: < >.

  • مثال:

  • 🔹 تركيب الوسم

    1. وسم البداية (Opening Tag):

      • يحدد بداية العنصر.

      • يكتب بالشكل: <اسم_الوسم>

      • مثال: <p> يعني بداية فقرة.

    2. المحتوى (Content):

      • النص أو العناصر اللي موجودة بداخل الوسم.

      • مثال: هذه فقرة.

    3. وسم النهاية (Closing Tag):

      • يحدد نهاية العنصر.

      • يكتب بالشكل: </اسم_الوسم> (لاحظ وجود /).

      • مثال: </p> يعني نهاية الفقرة.

🔹 مثال كامل

🔎 التحليل:

  • <p> = وسم البداية.

  • مرحبًا بكم في أول درس HTML = المحتوى.

  • </p> = وسم النهاية.

➡️ النتيجة: المتصفح يعرض النص على شكل فقرة.

🔹 ملاحظات مهمة

  1. كل وسم له بداية ونهاية (مع بعض الاستثناءات اللي هنشوفها لاحقًا).

  2. وسوم البداية ممكن تحتوي على خصائص (Attributes)، زي:

    • <a> = وسم البداية.

    • href=”https://www.google.com” = خاصية بتحدد رابط الوجهة.

    • اذهب إلى جوجل = المحتوى.

    • </a> = وسم النهاية.

  2. لو نسيت تكتب وسم النهاية، أحيانًا المتصفح يحاول يفهم الكود ويصلحه، لكن ده خطأ ويخلي الصفحة غير منظمة.

🔹 وسوم لا تحتاج نهاية (Self-Closing Tags)

بعض الوسوم لا تحتوي على محتوى بداخلها، لذلك ما تحتاجش وسم نهاية، مثال:

  • كسر السطر:

  • إدراج صورة:

إدراج خط فاصل:

📌 دي اسمها: Empty Elements أو Self-Closing Tags.

🔹 تشبيه مبسط

  • اعتبر الوسم زي صندوق:

    • وسم البداية <p> = فتحنا الصندوق.

    • المحتوى = الحاجة اللي حطيناها جوه الصندوق.

    • وسم النهاية </p> = قفلنا الصندوق.

🔹 خلاصة

  • وسم البداية: <tagname>

  • المحتوى: نص أو عناصر داخلية

  • وسم النهاية: </tagname>

  • بعض الوسوم استثنائية وتُكتب وحدها (Self-Closing).

★ ★ ★ ★ ★
التقييم: 0 من 0 تصويت

موضوعات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *