شرح عناصر HTML الأساسية والوسوم الفارغة للمبتدئين بطريقة بسيطة

ازيكم يا أصحابي عاملين ايه؟ معاكم م صموئيل غالي، وفي موضوع النهاردة هنتعرف على العناصر في لغة HTML أو الـ HTML Elements، وهنفهم يعني إيه عناصر ووسوم، وإيه الفرق ما بين العناصر الكاملة والعناصر الفارغة، وده من كورس البرمجة العملي للمبتدئين.

مقدمة

في HTML كل حاجة بتشوفها على الصفحة هي عبارة عن "عنصر" (Element)، والعناصر دي بتتكتب باستخدام وسوم (Tags). كل وسم بيبدأ بعلامة فتح وبينتهي بعلامة غلق، وبعض العناصر بتبقى فاضية بدون وسم غلق.

مثال على عنصر HTML كامل:

<p>دي فقرة عادية في HTML</p>

في المثال ده عندنا:

<p> ده وسم الفتح (Opening tag).
المحتوى هو النص اللي بيظهر للمستخدم.
</p> ده وسم الغلق (Closing tag).

يعني الشكل العام لأي عنصر بيكون كده:

<اسم_العنصر>المحتوى هنا</اسم_العنصر>

إيه هي العناصر الفارغة؟

فيه عناصر ملهاش محتوى ولا وسم إغلاق، ودي بنسميها "عناصر فارغة" زي:

<br>
<img src="image.jpg" alt="صورة">

<br> بيعمل سطر جديد في الصفحة.
<img> بيستخدم لعرض الصور.

وفي بعض الحالات ممكن تكتب العناصر الفارغة بالطريقة دي:

<br />
<img src="image.jpg" alt="صورة" />

الفرق بسيط، ودي بتكون كتابة متوافقة مع XHTML، لكن HTML5 بيقبل الطريقتين.

نصائح مهمة:

اتأكد إنك بتكتب الوسوم بشكل صحيح.
كل عنصر لازم يكون مفتوح ومقفول، إلا لو هو عنصر فارغ.
نظم كودك باستخدام المسافات والتبويبات.
جرب الأكواد بإيدك باستخدام SPCK Editor أو أي محرر HTML بسيط.

الخاتمة

وبكده نكون فهمنا يعني إيه عناصر HTML، وإزاي نكتبها بالشكل الصحيح، وكمان الفرق بين العناصر الكاملة والعناصر الفارغة.

لو شايف إنك استفدت من الشرح، متنساش تدوس لايك وتشترك في القناة، وتفعل الجرس علشان توصلك باقي فيديوهات الكورس أول بأول.

كان معاكم م صموئيل غالي، أشوفكم في الدرس الجاي بإذن الله ✌️