5- وسم البداية والنهاية – العناصر (Elements) والوسوم (Tags) – المستوى الأول: الأساسيات
📌 وسم البداية والنهاية في HTML
🔹 ما هو الوسم (Tag)؟
-
الوسم هو تعليمة (Instruction) بيستخدمها المبرمج علشان يحدد للمتصفح وظيفة جزء معين من المحتوى.
-
الوسوم بتكون محاطة بـ أقواس زاوية: < >.
-
مثال:
-
🔹 تركيب الوسم
-
وسم البداية (Opening Tag):
-
يحدد بداية العنصر.
-
يكتب بالشكل: <اسم_الوسم>
-
مثال: <p> يعني بداية فقرة.
-
-
المحتوى (Content):
-
النص أو العناصر اللي موجودة بداخل الوسم.
-
مثال: هذه فقرة.
-
-
وسم النهاية (Closing Tag):
-
يحدد نهاية العنصر.
-
يكتب بالشكل: </اسم_الوسم> (لاحظ وجود /).
-
مثال: </p> يعني نهاية الفقرة.
-
-
🔹 مثال كامل
🔎 التحليل:
-
<p> = وسم البداية.
-
مرحبًا بكم في أول درس HTML = المحتوى.
-
</p> = وسم النهاية.
➡️ النتيجة: المتصفح يعرض النص على شكل فقرة.
🔹 ملاحظات مهمة
-
كل وسم له بداية ونهاية (مع بعض الاستثناءات اللي هنشوفها لاحقًا).
-
وسوم البداية ممكن تحتوي على خصائص (Attributes)، زي:
-
-
<a> = وسم البداية.
-
href=”https://www.google.com” = خاصية بتحدد رابط الوجهة.
-
اذهب إلى جوجل = المحتوى.
-
</a> = وسم النهاية.
-
-
لو نسيت تكتب وسم النهاية، أحيانًا المتصفح يحاول يفهم الكود ويصلحه، لكن ده خطأ ويخلي الصفحة غير منظمة.
🔹 وسوم لا تحتاج نهاية (Self-Closing Tags)
بعض الوسوم لا تحتوي على محتوى بداخلها، لذلك ما تحتاجش وسم نهاية، مثال:
-
كسر السطر:
-
إدراج صورة:
إدراج خط فاصل:
📌 دي اسمها: Empty Elements أو Self-Closing Tags.
🔹 تشبيه مبسط
-
اعتبر الوسم زي صندوق:
-
وسم البداية <p> = فتحنا الصندوق.
-
المحتوى = الحاجة اللي حطيناها جوه الصندوق.
-
وسم النهاية </p> = قفلنا الصندوق.
-
🔹 خلاصة
-
وسم البداية: <tagname>
-
المحتوى: نص أو عناصر داخلية
-
وسم النهاية: </tagname>
-
بعض الوسوم استثنائية وتُكتب وحدها (Self-Closing).
Call now
Contact WhatsApp
