🧱 العناصر (Elements): لبنات بناء الويب الأساسية 🧱

مرحباً بك في درس أساسي جداً من دروس HTML! إذا كنت تتخيل صفحة ويب كمنزل، فإن عناصر HTML هي الطوب أو اللبنات التي يُبنى بها هذا المنزل. كل شيء تراه على صفحة ويب – العنوان، الفقرة، الصورة، الرابط – هو في الحقيقة عنصر HTML. فهمك للعناصر هو الخطوة الأولى لإتقان لغة HTML.

📖 ما هو عنصر HTML؟

ببساطة، عنصر HTML هو مكون فردي يستخدم لإضافة وتنظيم المحتوى على صفحة الويب. يتم تمييز كل عنصر باستخدام وسوم (Tags) خاصة تخبر المتصفح بنوع المحتوى المعروض.

فكر في الأمر كما لو كنت تعطي تعليمات للمتصفح: "هنا ابدأ عنوان رئيسي"، "هنا ضع فقرة نصية"، "هنا اعرض صورة".

🔍 تشريح عنصر HTML: الأجزاء الرئيسية

يتكون أي عنصر HTML قياسي من ثلاثة أجزاء رئيسية:

  1. وسم الفتح (Opening Tag): يحدد بداية العنصر. يُكتب اسم الوسم بين علامتي <> أصغر من وأكبر من.
    • مثال: <p> هذا وسوم لبداية فقرة.
  2. المحتوى (Content): هذا هو النص أو الوسائط التي تظهر للمستخدم فعلياً على الصفحة.
  3. وسم الإغلاق (Closing Tag): يحدد نهاية العنصر. يشبه وسوم الفتح، لكنه يضم شرطة مائلة / قبل اسم الوسم.
    • مثال: </p> هذا وسوم لنهاية الفقرة.

لنضع هذه الأجزاء معاً في مثال بسيط:

<p>هذه فقرة نصية بسيطة كتبتها بلغة HTML.</p>
  • <p> → وسم الفتح.
  • هذه فقرة نصية... → المحتوى.
  • </p> → وسم الإغلاق.

نتيجة العرض في المتصفح: هذه فقرة نصية بسيطة كتبتها بلغة HTML.

⚠️ عناصر بدون محتوى (وسوم ذاتية الإغلاق)

بعض عناصر HTML لا تحتوي على محتوى ولا تحتاج إلى وسوم إغلاق منفصلة. تسمى هذه الوسوم الذاتية الإغلاق (Self-Closing Tags) أو الوسوم الفارغة.

يتم كتابتها ببساطة بوسم فتح واحد، وتنتهي بشرطة مائلة / قبل > مباشرة. من أشهر الأمثلة عليها وسوم إدراج الصور (<img>) ووسوم فتح السطور (<br>).

<br>

هذا الكود يقوم بإنشاء فاصل سطر (مثل ضغط زر Enter). لا يوجد له محتوى ولا يحتاج لوسم إغلاق.

ملاحظة: كتابتها كـ <br /> صحيحة أيضاً وتعتبر أفضل ممارسة للتوافق مع معايير XHTML، لكن <br> تعمل بشكل مثالي في HTML5.

🧩 السمات (Attributes): معلومات إضافية للعناصر

السمات هي معلومات إضافية توضع داخل وسم الفتح لتحديد خصائص العنصر أو تعديل سلوكه. لا تستخدم مع وسوم الإغلاق.

تركيبة السمة: اسم_السمة="قيمة_السمة"

لنأخذ مثالاً على عنصر الصورة (<img>). لكي تعرض صورة، تحتاج إلى إخبار المتصفح بمكان وجود ملف الصورة. هنا نستخدم السمة src (مصدر الصورة).

<img src="cat.jpg" alt="صورة لقطة لطيفة">

في هذا المثال:

  • <img> → هو الوسم الذاتي الإغلاق لعنصر الصورة.
  • src="cat.jpg" → السمة src تخبر المتصفح أن يحمل الصورة من ملف cat.jpg.
  • alt="صورة لقطة لطيفة" → السمة alt توفر نصاً بديلاً يظهر إذا لم تتمكن الصورة من التحميل، وهو مهم جداً لإمكانية الوصول (للأشخاص ضعاف البصر).

✍️ دعونا نطبق: بناء صفحة بسيطة

لنجمع ما تعلمناه في مثال عملي. سننشئ صفحة تحتوي على عنوان رئيسي، فقرة، وفاصل سطر.

<!DOCTYPE html>
<html>
<head>
    <title>صفحتي الأولى</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1> <!-- هذا عنوان رئيسي كبير -->
    <p>هذه هي أول صفحة ويب أقوم ببنائها.</p> <!-- هذه فقرة نصية -->
    <br> <!-- هذا فاصل سطر -->
    <p>أشعر بالإثارة لتعلم المزيد!</p> <!-- فقرة نصية أخرى -->
</body>
</html>

شرح الكود:

  • استخدمنا العنصر <h1> لعنوان رئيسي كبير.
  • استخدمنا العنصر <p> مرتين لإنشاء فقرتين نصيتين.
  • استخدمنا العنصر <br> لإنشاء مسافة بين الفقرتين.

🧠 ملخص سريع

  • العناصر هي اللبنات الأساسية لأي صفحة ويب.
  • يتكون العنصر القياسي من وسم فتح، محتوى، و وسم إغلاق.
  • بعض العناصر ذاتية الإغلاق مثل <br> و <img>.
  • السمات توفر معلومات إضافية للعناصر وتُكتب داخل وسوم الفتح.