الدرس السادس: إضافة الصور في HTML

مقدمة

الصور هي جزء أساسي من أي صفحة ويب، حيث تضيف عناصر بصرية تجعل المحتوى أكثر جاذبية وتفاعلية. في HTML، يتم إدراج الصور باستخدام وسم <img>. في هذا الدرس، سنتعرف على كيفية إضافة الصور باستخدام هذا الوسم، وسنستعرض السمات الأساسية مثل src, alt, width, و height، بالإضافة إلى كيفية تحسين الوصولية باستخدام الصور.

كيفية إضافة الصور باستخدام <img>

وسم <img> يُستخدم لإدراج الصور في صفحة HTML. هذا الوسم لا يحتوي على عنصر إغلاق، ويُحدد مصدر الصورة باستخدام سمة src.

بنية الوسم الأساسي لإضافة صورة

<img src="path/to/image.jpg" alt="وصف الصورة">

في المثال أعلاه:

• src="path/to/image.jpg": يحدد مسار الصورة الذي سيتم عرضه في الصفحة. يمكن أن يكون المسار مسارًا محليًا أو عنوان URL خارجي.
• alt="وصف الصورة": يحدد نصًا بديلاً يعرض عند عدم تحميل الصورة، أو في حال استخدام القارئات الصوتية.

شرح السمات الأساسية

سمة src

سمة src تُستخدم لتحديد مصدر الصورة. يجب أن تكون هذه السمة موجودة دائمًا لأن الصورة لن تُعرض بدونها. يمكنك تحديد المسار إلى الصورة سواء كان مسارًا محليًا في المشروع أو عنوان URL خارجي.

مثال:

<img src="images/logo.png" alt="شعار الموقع">

سمة alt

سمة alt توفر نصًا بديلاً للصورة. هذا النص يُستخدم عندما لا يمكن عرض الصورة لأسباب تقنية (مثل تعطل الصورة أو ضعف الاتصال بالإنترنت) أو لتمكين المستخدمين الذين يعتمدون على القارئات الصوتية للوصول إلى محتوى الصورة. تأكد من أن النص في alt يكون وصفًا دقيقًا ومفيدًا.

مثال:

<img src="images/logo.png" alt="شعار موقعنا مع نص توضيحي">

سمة width و height

تستخدم سمات width و height لتحديد أبعاد الصورة. يمكن استخدام هاتين السمتين لتحديد عرض وارتفاع الصورة بالبيكسل. من المهم ملاحظة أن تغيير الأبعاد باستخدام هذه السمات قد يؤدي إلى تشويه الصورة إذا كانت النسب غير صحيحة.

مثال:

<img src="images/logo.png" alt="شعار الموقع" width="200" height="100">

تحسين الوصولية باستخدام الصور

تحسين الوصولية يتطلب أن تكون الصور مفهومة ومفيدة لجميع المستخدمين، بما في ذلك الأشخاص ذوي الاحتياجات الخاصة. إليك بعض النصائح لتحسين الوصولية باستخدام الصور:

1. استخدام سمة alt بشكل فعّال

تأكد من كتابة نصوص بديلة وصفية لكل صورة. يجب أن يعكس النص في سمة alt محتوى الصورة ووظيفتها. إذا كانت الصورة تحتوي على معلومات مهمة، يجب أن يكون النص البديل واضحًا ومفصلًا.

مثال:

<img src="images/infographic.jpg" alt="رسم بياني يوضح نمو المبيعات على مدى السنوات الخمس الماضية">

2. تجنب استخدام الصور فقط للنصوص

إذا كانت الصورة تحتوي على نص، حاول استخدام نصوص HTML بدلاً من الصور لنقل المعلومات. هذا يسهل على القارئات الصوتية والأدوات المساعدة قراءة النص.

مثال:

بدلاً من:

<img src="images/important-message.jpg" alt="مهمة مهمة">

استخدم:

<p>مهمة مهمة</p>

3. توفير وصف للنصوص المتحركة أو التفاعلية

إذا كانت الصورة تحتوي على عناصر تفاعلية أو متحركة، تأكد من توفير وصف جيد يساعد المستخدمين على فهم وظيفة الصورة.

مثال:

<img src="images/animated-button.gif" alt="زر تفاعلي: اضغط هنا للتسجيل">

4. تقديم معلومات إضافية عند الحاجة

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

مثال:

<img src="images/interactive-map.jpg" alt="خريطة تفاعلية للمدينة" usemap="#citymap">
<map name="citymap">
  <area shape="rect" coords="34,44,270,350" alt="المنطقة السياحية" href="tourist.html">
</map>

الخاتمة

في هذا الدرس، تعلمنا كيفية إدراج الصور في صفحات HTML باستخدام وسم <img>, وشرحنا السمات الأساسية مثل src, alt, width, و height. كما استعرضنا أهمية تحسين الوصولية باستخدام الصور لضمان تجربة مستخدم شاملة لجميع الزوار.

في الدرس القادم، سنتناول كيفية استخدام الجداول في HTML لتنظيم البيانات وعرضها بشكل منظم، وكيفية تنسيق الجداول باستخدام CSS لجعلها أكثر جاذبية وسهولة في القراءة.