الدرس الثالث: العناصر والعناصر الفارغة في HTML

مقدمة

في هذا الدرس، سنتناول أنواع العناصر في HTML وكيفية استخدام كل منها لتصميم وتنسيق صفحات الويب. سنركز على نوعين رئيسيين من العناصر: العناصر ذات المستوى الكتلي (block-level elements) و العناصر ذات المستوى الداخلي (inline-level elements). كما سنستعرض أيضًا بعض العناصر الفارغة التي لا تحتوي على محتوى نصي، مثل <br> و <img>، ونتعرف على كيفية استخدامها في تحسين تنسيق المحتوى.

العناصر ذات المستوى الكتلي (Block-Level Elements)

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

أمثلة على العناصر ذات المستوى الكتلي:

1. وسم <div>: يُستخدم <div> كعنصر حاوي لتجميع عناصر أخرى، ويساعد في تنظيم المحتوى في الصفحة. يُعتبر <div> من العناصر ذات المستوى الكتلي الأكثر استخدامًا لتنسيق الصفحة، خاصة عند استخدام CSS.<div> <h1>العنوان الرئيسي</h1> <p>هذه فقرة ضمن عنصر <code>&lt;div&gt;</code>.</p> </div>
2. وسم <p>: يُستخدم لكتابة فقرات نصية. كل فقرة تُعرض على سطر جديد ويُترك مساحة بينها وبين الفقرة السابقة.<p>هذه فقرة نصية تُعرض على سطر جديد.</p>
3. وسم <h1> إلى <h6>: تُستخدم لتحديد العناوين في الصفحة. <h1> هو أكبر عنوان ويُستخدم عادةً للعناوين الرئيسية، بينما <h6> هو أصغر عنوان ويُستخدم للعناوين الفرعية.<h1>عنوان رئيسي</h1> <h2>عنوان فرعي</h2>
4. وسم <ul> و <ol>: تُستخدم لإنشاء قوائم. <ul> يُستخدم لإنشاء قائمة غير مرتبة (قائمة نقطية)، بينما <ol> يُستخدم لإنشاء قائمة مرتبة (قائمة رقمية).<ul> <li>عنصر قائمة 1</li> <li>عنصر قائمة 2</li> </ul> <ol> <li>عنصر قائمة 1</li> <li>عنصر قائمة 2</li> </ol>

العناصر ذات المستوى الداخلي (Inline-Level Elements)

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

أمثلة على العناصر ذات المستوى الداخلي:

1. وسم <span>: يُستخدم لتطبيق تنسيق أو أسلوب معين على جزء صغير من النص. لا يؤثر على تخطيط الصفحة.<p>هذا نص <span style="color: red;">ملون بالأحمر</span> داخل الفقرة.</p>
2. وسم <a>: يُستخدم لإنشاء الروابط التشعبية. يمكن ربط النص بصفحات ويب أو مواقع أخرى.<a href="https://example.com">زيارة Example.com</a>
3. وسم <strong> و <em>: يُستخدم لتنسيق النص ليبدو أكثر قوة أو تأكيد. <strong> يجعل النص يظهر عريضًا، بينما <em> يجعل النص مائلًا.<p><strong>نص مهم</strong> و <em>نص مائل</em>.</p>

العناصر الفارغة في HTML

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

أمثلة على العناصر الفارغة:

1. وسم <br>: يُستخدم لإدراج فاصل أسطر في النص. يُضيف سطرًا جديدًا دون بدء فقرة جديدة.<p>سطر أول<br>سطر ثاني بعد الفاصل.</p>
2. وسم <img>: يُستخدم لعرض الصور في صفحة الويب. يتطلب هذا الوسم تحديد خاصية src لتحديد مصدر الصورة، و alt لتوفير نص بديل في حال عدم تحميل الصورة.<img src="example.jpg" alt="وصف الصورة">
3. وسم <hr>: يُستخدم لإدراج خط أفقي في الصفحة، والذي يمكن استخدامه للفصل بين أجزاء مختلفة من المحتوى.<p>محتوى أول</p> <hr> <p>محتوى ثاني بعد الخط الأفقي.</p>

الخاتمة

في هذا الدرس، قمنا بالتعرف على الفرق بين العناصر ذات المستوى الكتلي والعناصر ذات المستوى الداخلي في HTML، وفهمنا كيفية استخدامها لبناء هيكل صفحات الويب وتنظيم المحتوى. كما استعرضنا بعض العناصر الفارغة التي لا تحتوي على محتوى نصي ولكنها تلعب دورًا مهمًا في تنسيق وتصميم الصفحة.

في الدرس القادم، سنقوم باستكشاف كيفية استخدام CSS لتنسيق وتنسيق العناصر في صفحات HTML، وكيفية دمج CSS مع HTML لتحسين مظهر صفحات الويب وجعلها أكثر جاذبية وتفاعلية.