الأقسام والمقالات
جزء من قسم Fundamentals في رحلة HTML على Coddy. الدرس 28 من 60.
في HTML، تُستخدم علامتا <section> و<article> لتنظيم المحتوى إلى أجزاء منطقية.
يُعرِّف الوسم <section> قسمًا في المستند، مثل الفصول أو الرؤوس أو التذييلات أو أي أقسام أخرى في المستند. وهو طريقة لتجميع المحتوى المرتبط معًا. على سبيل المثال، يمكنك استخدام <section> لتقسيم صفحة إلى مقدمة ومحتوى ومعلومات اتصال.
إليك كيفية استخدام وسم <section>:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>تحدّد علامة <article> محتوى مستقلاً ومكتفياً ذاتياً. وينبغي أن يكون مفهوماً بمفرده، وأن يكون من الممكن قراءته بشكل مستقل عن بقية موقع الويب. ومن أمثلة المواضع التي يمكن استخدام عنصر <article> فيها: منشور في منتدى، أو تدوينة، أو خبر، أو تعليق.
إليك كيفية استخدام وسم <article>:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>التحدي
سهلأنشئ مستند HTML يستخدم علامتَي <section> و<article> لهيكلة صفحة ويب. ضمّن الأقسام التالية:
- قسم
<main>لاحتواء المحتوى الرئيسي للصفحة. - داخل
<main>، أنشئ قسمًا<section>مع عنوان (<h2>) يقول "Upcoming Events". - داخل
<section>، أنشئ عنصرَي<article>. - يجب أن يحتوي كل عنصر
<article>على عنوان (<h3>) وفقرة (<p>) تتضمن بعض النصوص الوهمية. استخدم "Event 1" و"Event 2" للعناوين، و"Event 1 details..." و"Event 2 details..." للفقرات.
جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Headerتدرّب بنفسك: Playground لـ Web