انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: عناصر Picture وSVG في لغة HTML

Responsive Images and Picture Element الصور المتجاوبة وعنصر picture

احترف عناصر Picture و SVG في HTML: التوجيه الفني للصور المتجاوبة، استعلامات media، تبديل الصيغ AVIF و WebP، رسم أشكال SVG وتنسيقها بالـ CSS والتعقيم الأمني ضد ثغرات XSS.
4 صفوف تعليمية
لغة HTML
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يُمثل تقديم صورة واحدة فائقة الأبعاد والدقة لكافة الزوار هدراً كبيراً لبيانات مستخدمي الهواتف الذكية وبطئاً في التحميل. يقدم معيار HTML5 عنصر الحاوية المتجاوبة <picture>، وهو عنصر ذكي يتيح تزويد المتصفح بعدة خيارات بديلة للملفات ليختار الأنسب منها تلقائياً وفقاً لحجم الشاشة أو سرعة الاتصال.
الصف 2 كود برمجي
HTML 
<picture>
  <source media="(min-width: 800px)"
          srcset="images/examples/workspace-wide.webp">
  <source media="(min-width: 480px)"
          srcset="images/examples/workspace-tablet.webp">
  <img src="images/examples/workspace-mobile.webp"
       alt="Modern developer workstation">
</picture>
جرّب بنفسك
الصف 3 شرح توضيحي
داخل عنصر <picture>، يضع المطور واحداً أو أكثر من وسوم المصادر <source> متبوعة إلزامياً بوسم الصورة العادي <img> في النهاية. يقوم المتصفح بفحص المصادر ثم يعرض الملف المطابق مباشرة داخل صندوق <img> الموحد دون أي تكرار في شجرة DOM.
الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (عناصر Picture وSVG في لغة HTML)