كيف تصف فكرتك للذكاء الاصطناعي بوضوح؟ (صياغة الطلب خطوة بخطوة)
طريقة عملية من 4 عناصر لكتابة طلبات واضحة يفهمها الذكاء الاصطناعي وينفذها بدقة
ماذا ستتعلم وتنجز في هذه الجلسة؟ (اضغط للعرض)▼
- إتقان الوسوم الدلالية: header, nav, main, section, article, footer
- فهم الفليكس بوكس (Flexbox) والغريد (CSS Grid) للتحكم في تموضع العناصر
النشاط 01: بناء الهيكل الدلالي لصفحة الهبوط (Semantic HTML5)
رتب أقسام موقعك باستخدام الوسوم الدلالية بدلاً من عناصر div العشوائية
أكتب هيكل HTML5 صحيح يحتوي على header و nav و main و section و footer مع تحديد العناوين h1 و h2 بصورة منطقية.
محركات البحث وقارئات الشاشة للمكفوفين تعتمد كلياً على الوسوم الدلالية لفهم محتوى موقعك وترتيبه في Google.
2. خطوات التنفيذ خطوة بخطوة:
استخدم <header> لقسم الرأس وشريط التنقل <nav>.
ضع المحتوى الأساسي داخل <main> وافصل كل قسم بوسم <section>.
استخدم عنواناً واحداً رئيسياً <h1> في صفحة الهبوط ثم <h2> للأقسام الفرعية.
هيكل HTML5 دلالي نظيف ومرتب وخالٍ من أخطاء الـ Div Soup.
📄 قالب البداية أو الكود المساعد (اضغط للعرض أو النسخ)▼
<header>
<nav>
<a href="/">شعار الموقع</a>
<!-- روابط التنقل -->
</nav>
</header>
<main>
<section id="hero">
<h1>العنوان الرئيسي البارز</h1>
<p>الوصف القصير</p>
</section>
<section id="products">
<h2>أبرز المنتجات</h2>
</section>
</main>
<footer>
<p>جميع الحقوق محفوظة © 2026</p>
</footer>تلميحات مساعدة (1)▼
- • 💡 لا تضع أكثر من وسم h1 واحد في الصفحة أبداً لضمان تصدر محركات البحث.
4. مساحة الحل وتسليم النتيجة عبر واتساب
اكتب إجابتك أو الكود أو رابط عملك في الصندوق أدناه. تُحفظ مسودتك تلقائيًا في متصفحك، وعند الضغط على «إرسال النتيجة عبر واتساب» سيتم حفظ الإجابة في سجل تقدمك وفتح رسالة واتساب جاهزة لإرسالها للمدرب (+90 538 201 50 72).