9- كورس HTML للمبتدئين – الصور Images وإضافتها بشكل صحيح

ما هي الصور وكيفية استخدامها في المواقع الإلكترونية

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

إضافة الصور بالطريقة الصحيحة تتطلب مراعاة عدة عوامل، منها حجم الصورة، نوع الملف، والنص البديل (alt text). يجب ضغط الصور قبل رفعها إلى الموقع لتقليل حجم الملف دون التأثير بشكل كبير على الجودة. استخدام الصيغ المناسبة مثل JPEG للصور الفوتوغرافية وPNG للرسومات والشعارات يُساعد في الحفاظ على توازن جيد بين الجودة والحجم. النص البديل يُستخدم لتحسين الوصولية، حيث يوضح محتوى الصورة للأشخاص الذين يستخدمون قارئات الشاشة أو في حال عدم تحميل الصورة بشكل صحيح.

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

لإضافة الصور في صفحات الويب باستخدام HTML، نستخدم وسم ``. يتطلب هذا الوسم تحديد مسار الصورة باستخدام السمة `src`، ويوصى دائمًا باستخدام السمة `alt` لتوفير وصف نصي للصورة. يمكن أيضًا التحكم في أبعاد الصورة باستخدام السمات `width` و`height` لضبط حجم العرض بما يتناسب مع تصميم الصفحة.

مثال:
<img src=\"path/to/image.jpg\" alt=\"وصف للصورة\" width=\"500\" height=\"300\">

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

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