خصائص الصور في لغة HTML

 واحده من أهم وسوم لغة HTML وسم الصور هذا الوسم ستتعامل معه بشكل يومي لن تجد موقع أو صفحة انترنت تكون بدون هذا الوسم بل ربما مكرر في الصفحة عدة مرات .

كنا تكملنا عن طريقة كتابة وسوم HTML  وتكلمنا أن كل وسم له كود فتح وإغلاق لكن هناك استثناءات هناك الوسوم أو العناصر الفارغة وهي عناصر لا يضاف بها شئ فلا يوجد بها وسم إغلاق فوسم الفتح والإغلاق متضمن في كود واحد.

 

 كيف يتم كتابة عنصر الصور في HTML ؟

<img src="*" alt="نص بديل" title="عنوان ظاهر" border="0" width="800px" height="600px">

 مكونات الكود

 [[src]] هذا اختصار لكلمة source أو مصدر وفي الجزء الخاص به يضاف رابط الصورة يستبدل رمز * بالرابط

 

[[alt]] وهو اختصار alternate أو بديل , وهذا خاص بالنص البديل هذا نص يصف الصور أو عن ماذا تتكلم ووظيفته إن لم تعمل الصورة لأى سبب يظهر هو ليفهم القارئ ما المراد منها طالما هي لا تظهر له كذلك هو يؤثر في أدوات قراءة الشاشة Screen Readers , التي يستخدمها المكفوفين فيقرأ لهم هذا النص بدلا من الصورة ليفهموا المراد منها , كذلك هو مهم في عملية أرشفة الصورة.

 

[[title]] هو عنوان للصورة أو معلومة إضافية للصورة تظهر عند التمرير بالماوس 

 

 [[width]] عرض الصورة وهذا العرض لو حذفته ستأخذ الصورة عرضها الإفتراضي هو وسيلة للتحكم وكذلك في المستقبل ستتعلم كيف تتحكم به من أكواد CSS 

 

[[height]] الإرتفاع وما ينطبق على العرض ينطبق عليه

 

[[border]] يخص اطار الصورة لو اعطيته رقم أعلى من 0 سيكون للصورة إطار وأيضاً التحكم به أفضل في الـ CSS

 

 هل يجب أن تكون تلك المكونات بهذا الترتيب ؟

 لا ليس هناك ترتيب يمكن أن يكون alt قبل height او بعده أو اى جزء آخر الترتيب لن يفرق في شئ

 

الصور في بلوجر

ستجد كود الصورة في بلوجر نفس الشئ لكن قد تجد به بعض الإختلافات

<img alt="نص بديل" border="0" data-original-height="630" data-original-width="1200"  src="#" title="عنوان الصورة" />

 هذا كود صورة من بلوجر , ستجد مثلاً اختلاف في width مكتوبة [[data-original-width="1200"]] نفس الشئ بالنسبة لـ height

هذه ليست أكواد HTML يمكنك أن تستخدم الأكواد العادية أيضاً فيها لكن هذه أكواد خاصة ببلوجر وتحديدا للمواضيع هم من تحتاج أن تضيفها أنت لأنهم منها يتحكمون في العرض والإرتفاع المتغير الذي يقدمونه سواء في الإعدادات أو تحكمهم هم في الصورة لكن تكون عندك المعلومة حتى لا تحتار , وتفهم الهدف منها

 

ملحوظة هامة : ستجد أن الصورة في بلوجر الكود ينتهي بـ [[ />]] في حين في كود HTML بدون [[/]] في النهاية

في كلا الحالتين الأمر صحيح بل الموصى به في أحدث اصدارات HTML5 استخدام الرمز في النهاية .

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