HTMLالصور

أهمية الصور و أنواعها

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

في هذا الدرس سنتعرف على الوسم المخصص لإضافة صور في الصفحة بالإضافة إلى الخصائص التي يمكن وضعها لها.

أنواع الصور التي يمكن عرضها

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

أنواع الصور التي تعمل على جميع أنواع المتصفحات المشهورة مثل كروم، فايرفوكس، إيدج و أوبرا هي:
.png - .apng - .gif - .jpg - .jpeg - .ico - .cur -.jfif - .pjpeg - .pjp - .svg

أحجام الصور و حقوق النشر

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

إضافة صورة في الصفحة

بشكل عام نستخدم الوسم <img> على هذا النحو <img src="url"> لعرض صورة في الصفحة.
مكان الكلمة url نضع مسار الصورة التي نريد عرضها.

في المثال التالي قمنا بإضافة صورة في الصفحة باستخدام الوسم <img>.

<img src="https://harmash.com/tutorials/html/images/html-5-icon.PNG">

وضع نص بديل للصورة

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

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

لوضع نص بديل للصورة نضيف الخاصية alt و نمرر لها النص الذي سيظهر في حال لم يتم عرض الصورة.

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

<img src="my-photo.PNG">

في المثال التالي قمنا بإضافة صورة في الصفحة مسارها غير صحيح عمداً و قمنا بوضع نص بديل حتى يظهر مكانها.

<img src="my-photo.PNG" alt="Mhamad Harmush">

تحديد حجم الصورة

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

في العادة حجم الصور نقوم بتحديده بواسطة كود CSS لأنها توفر طرق سهلة و أفضل لذلك و لكن بما أننا ندرس لغة HTML سنركز على الخصائص التي توفرها لنا لغة HTML لتحديد حجم الصور:

• width نستخدمها لتحديد عرض الصورة التي سيتم عرضها بالبكسل.
• height نستخدمها لتحديد طول الصورة التي سيتم عرضها بالبكسل.

أهمية تحديد حجم الصورة

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

لذلك قم دائماً بتحديد حجم الصور التي تنوي عرضها في الصفحة سواء حددت ذلك بواسطة خصائص HTML أو كود CSS.

في المثال التالي قمنا بإضافة صورة مع تحديد أن عرضها 200 بيكسل و طولها 200 بيكسل أيضاً.

<img src="https://harmash.com/tutorials/html/images/mhamad-harmush.PNG" width="200" height="200">