الإعلام الآلي — HTML5 و CSS3: تصميم ويب متجاوب — الثالثة ثانوي (شعب علمية) — بكالوريا — المنهاج الجزائري

HTML و CSS هما أساس تصميم صفحات الويب. الإصدارات الحديثة HTML5 و CSS3 توفر إمكانيات متقدمة للتصميم المتجاوب.

1. بنية صفحة HTML5

HTML5 يستخدم عناصر دلالية: header, nav, main, section, article, aside, footer.

2. مزايا CSS3

CSS3 يضيف: border-radius (زوايا دائرية)، box-shadow (ظل)، gradient (تدرجات لونية)، transition (انتقالات)، animation (تحريك).

مثال: div { border-radius: 10px; box-shadow: 0 2px 5px gray; }

3. التصميم المتجاوب (Responsive Design)

يستخدم Media Queries لتكييف التصميم حسب حجم الشاشة:

@media (max-width: 768px) { body { font-size: 14px; } }

@media (max-width: 480px) { .menu { display: none; } }

4. Flexbox للتخطيط

Flexbox يسهل توزيع العناصر: display: flex; justify-content: space-between; align-items: center;

5. مثال بكالوريا

أنشئ صفحة HTML5 مع CSS3 تعرض معرض صور (3 صور) باستخدام Flexbox مع تصميم متجاوب.

    
    
    
    


    
معرض الصور
    

        
        
        
    

بكالوريا 2022: اشرح دور الخاصية flex-wrap: wrap في الكود أعلاه.

الحل: flex-wrap: wrap تسمح للعناصر بالانتقال إلى سطر جديد عندما لا تتسع في السطر الحالي، مما يجعل المعرض متجاوباً مع جميع أحجام الشاشات.