المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

أعجبني موضوع الجداول في HTML، فوددت انتهاج نفس الطريقة في التحدث عن الصور.

سأتحدث في بضعة مقالات عن بعض الملاحظات بخصوص إدراج الصور في لغة HTML، ثم عن بعض الخواص التي لا يعرفها البعض بخصوص الصور في لغة HTML.

أساسيات إدراج صورة باختصار

لإدراج صورة في الصفحة، نستخدم وسم <img /> ونضع له الخاصية src التي تعني (source) وهي تحدد مسار الصورة المراد وضعها، ليكون الشكل النهائي له:

<img src="http://www.almashroo.com/مسار الصورة" />

هكذا نكون أنشأنا صورة يمكننا استخدامها كما نريد.

ملاحظة: الفرق بين HTML و XHTML في الصور هو أن وسم الصورة في HTML يكون هكذا:

<img src="http://www.almashroo.com/مسار الصورة">

وأما في XHTML فنقوم بإغلاقه قبل علامة نهاية الوسم، فيكون:

<img src="http://www.almashroo.com/مسار الصورة" />

لابدّ من تحديد alt

كثير من مطوري المواقع يستهينون بوضع خاصية alt في وسم الصورة، أو يضعونها فارغة هكذا:

<img src="http://www.almashroo.com/مسار الصورة" alt="" />

هكذا لن نستفيد من هذه الخاصية.

الخاصية alt تعني (alternative) أو (البديل)، ونضعها هكذا:

<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" />

ولنعرف وظيفتها، فلنفرض أن الصورة تعطّلت او اختفت من الويب لأي سبب، عندها لن تظهر الصورة أمام الزائر، وهنا يأتي دور البديل alt الذي سيظهر بدلاً من الصورة، وفي مثالنا هنا سيظهر النص “المسجد الحرام بمكة المكرمة” .

هل هي مهمة فعلاً؟

نعم، فالسبب الأول هو أنها ستكون بديلاً للصورة، وإليك سببين آخرين:

1. المتصفحات النصية: هناك متصفحات لا تدعم الصور وتظهر النصوص فقط مثل متصفح Lynx وغيره، وهذه المتصفحات يستخدمها كثير من أصحاب الهواتف عند تصفحهم للويب، وأيضاً من لديهم سرعات إنترنت بطيئة جداً أو لمن لا يحبون الصور (يوجد فعلاً هذا النوع من الناس)، هؤلاء جميعاً سيمرّون على الصورة ولن يعلموا بوجودها وإن علموا لن يعرفوا ما هي هذه الصورة، فالبديل alt سيوضّح لهم الصورة ومحتواها.
2. المكفوفين: يستخدم الكفيف متصفحات نصية (مثل Lynx الذي ذكرته)، حيث يقرأ لهم البرنامج كل محتويات الصفحة من نصوص، ولن يعلم بوجود صورة إذا لم تقم بتحديد alt لها!

أما بخصوص صور الاستايلات في المنتديات مثلاً من أجزاء الهيدر والإطارات، فهذه يجب أن تكون أصلاً على هيئة css في خلفيات ولا توضع كصور (هنا شرح للأخ ca2oom لطريقة تصميم استايل بالـcss)، ولكن إن كان ولابدّ من وضعها كصور في ترويسة الاستايل وبقية الأجزاء، فضع alt واجعل محتواه فارغاً هكذا:

<img src="http://www.almashroo.com/مسار الصورة" alt="" />

استخدم title للـ tool tips

في متصفح Internet Explorer، إذا وضعت alt للصورة ثم مررت المؤشر عليها سيظهر لك tool tip (البالون الأصفر) محتوياً على ما كتبته في الـalt، ولكنه لا يحدث في متصفح Firefox، ويظن البعض أن هذا خطأ Firefox والصواب هو عكس ذلك.
خاصية البديل alt هي لإظهار نص بديل للصورة المعطلة، وأما الخاصية المسؤولة عن إظهار الـtool tip فهي خاصية title، فإذا أردت أن يظهر الـtool tip في جميع المتصفحات فاستخدم خاصية title :

<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" title="المسجد الحرام بمكة المكرمة" />

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

ماذا إذا أردت وضع alt وعدم إظهار الـtool tip

حيث أنك لا تريد من Internet Explorer أن يظهر المستطيل الأصفر على الصورة، مع أنهم يريدون فعلاً وضع alt لها. الحل بسيط، وهو أن تضع الـalt كما تريد ثم تضع title فارغ هكذا:

<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" title="" />