الأقسام والمقالات
جزء من قسم 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..." للفقرات.
ورقة مرجعية
يحدد الوسم <section> قسماً في مستند لتجميع المحتوى ذو الصلة معاً:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>يحدد الوسم <article> محتوىً مستقلاً وبذاته يجب أن يكون له معنى بمفرده:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>جرّب بنفسك
<!DOCTYPE html>
<html>
<body>
<!-- اكتب الكود هنا -->
</body>
</html>يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Fundamentals
2النصوص والتنسيق
العناوينالفقراتفواصل الأسطرالنص العريض والمائلالنص العريض والمائل مجدداًمراجعة - التنسيق8النماذج والمدخلات - الجزء الأول
أساسيات النماذجمدخلات النصوصسمات المدخلاتحقل كلمة المرورتسميات المدخلاتملخص - نموذج أساسي11صفحة التسجيل في الفعالية
نظرة عامة على المشروعقسم الـ Header