X

اتش.تي.إم.إل الدلالية

٨. إنشاء مركز فعاليات

مختبر

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

قصص المستخدم :

١. يجب أن يكون لديك عنصر header.

٢. يجب أن يكون لديك داخل عنصر header عنصر h1 يحتوي على النص مركز فعاليات، وعنصر nav.

٣. يجب أن يحتوي عنصر التنقل nav على قائمة غير مرتبة unordered list من عنصرين، كل عنصر يحتوي على رابط link إلى قسم مختلف من الصفحة. يجب أن يحتوي العنصر الأول على النص الفعاليات القادمة، بينما يحتوي العنصر الثاني على النص الفعاليات السابقة.

٤. يجب أن يتم تمثيل كل رابط بواسطة عنصر a مع سمة href التي تربط بالقسم المقابل من الصفحة، upcoming-events# و past-events# على التوالي.

٥. يجب أن يكون لديك عنصر main يحتوي على الأقسام المختلفة The different sections للصفحة.

٦. يجب أن يكون لديك عنصران section داخل العنصر main.

٧. يجب أن يحتوي عنصر section الأول على سمة id بقيمة upcoming-events .

٨. داخل قسم upcoming-events# ، يجب أن تجد ما يلي:

  • عنصر h2 يحتوي على النص الفعاليات القادمة .
  • عنصران article. يجب أن يُمثل كل مقال حدثًا، وأن يتضمن ما يلي:
    • عنصر h3 لعنوان الحدث.
    • عنصر p لوصف الحدث. يمكنك إضافة التاريخ في الأسفل إذا رغبت.

٩. يجب أن يحتوي عنصر section الثاني على سمة id بقيمة past-events .

١٠. يجب أن تجد داخل قسم past-events# ما يلي:

  • عنصر h2 يحتوي على النص الفعاليات السابقة .
  • عنصران article . يجب أن يُمثل كل عنصر من عناصر المقالة حدثًا ماضيًا، ويجب أن يتضمن ما يلي:
    • An h3 element for the event title.
    • عنصر p لوصف الحدث. يمكنك إضافة التاريخ في الأسفل إذا رغبت.
    • عنصر img يحتوي على السمة src التي تشير إلى ملف صورة والسمة alt التي تحتوي على وصف للصورة.

ملاحظة: يمكنك استخدام أي نص لوصف الفعاليات وتواريخها. كما يمكنك استخدام روابط الصور التالية إذا رغبت:

  • https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg.
  • https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg.

التطبيق :

الحل :


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مركز فعاليات</title>
 </head> 

 <body>
  <header>
   <h1>مركز فعاليات</h1>
   <nav>
    <li><a href="#upcoming-events">الفعاليات القادمة</a></li>
    <li><a href="#past-events">الفعاليات السابقة</a></li>
   </nav>
  </header>

  <main>
   <section id="upcoming-events">
    <h2>الفعاليات القادمة</h2>
    <article>
	 <h3>مؤتمر الذكاء الاصطناعي والتعلم الآلي 2024</h3>
	 <p>انضموا إلينا في رحلة معمقة لاستكشاف أحدث التطورات في مجال الذكاء الاصطناعي والتعلم الآلي. سيشارك رواد الصناعة رؤاهم ودراسات الحالة حول كيفية إحداث الذكاء الاصطناعي تحولاً جذرياً في مختلف القطاعات.</p>
	 <p><time datetime="2024-08-10">التاريخ: 10 أغسطس 2024</time></p>
	</article>
	<article>
	 <h3>معسكر تدريبي لتطوير مواقع الويب</h3>
	 <p>فعالية تركز على أحدث التوجهات والتهديدات في مجال الأمن السيبراني. ناقش الخبراء استراتيجيات حماية البيانات وضمان الخصوصية في عالم رقمي متزايد.</p>
	 <p><time datetime="2024-09-05">التاريخ: 5 سبتمبر 2024</time></p>
	</article>
   </section>
   <section id="past-events">
    <h2>الفعاليات السابقة</h2>
    <article>
	 <h3>قمة الأمن السيبراني 2024</h3>
	 <p>فعالية تركز على أحدث التوجهات والتهديدات في مجال الأمن السيبراني. ناقش الخبراء استراتيجيات حماية البيانات وضمان الخصوصية في عالم رقمي متزايد.</p>
	 <p><time datetime="2024-06-15">التاريخ: 15 يونيو 2024</time></p>
	 <img src="https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg" alt="Computer"/>
	</article>
	<article>
	 <h3>معرض بلوك تشين 2024</h3>
	 <p>حدث شامل يغطي مستقبل تقنية البلوك تشين. وشملت المواضيع التمويل اللامركزي (DeFi) والعقود الذكية وتأثير البلوك تشين على مختلف الصناعات.</p>
	 <p><time datetime="2024-07-20">التاريخ: 20 يوليو 2024</time></p>
	 <img src="https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg" alt="Blockchain"/>
	</article>
   </section>
  </main>
 </body>

</html>