HTML الصور

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

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


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

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

أنواع الصور التي تعمل على جميع أنواع المتصفحات المشهورة (Chrome, Edge, Firefox, Safari, Opera):
.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">
		

جرب الكود

الدورات

أدوات مساعدة

الأقسام

دورات
مقالات أسئلة مشاريع كتب