تعلم لغة html: الصور Images
تستعمل الصور في مختلف صفحات الويب ولأغراض مختلفة.
لادراج صورة يتم البدء بوسم <img ثم وضع سلاش / قبل اغلاق الوسم. وفي الوسط يتم موضع خاصية المصدر src (يخبر المتصفح بمكان وجود الصورة) مع رابط مصدر الصورة.
النتيجة
هناك أمور مهمة حول الصور وهي:
الصيغة: هناك صيغ كثيرة للصور، ما يهم هنا هو أن الصور التي تحتوي على الكثير من الألوان ويجب أن تكون واضحة ينصح باستعمال صيغة jpg . بينما الصور التي لا تهم جودتها مثل شعرا أو كرافيك يكفي استعمال png و gif .
العرض: يجب التحكم في عرض الصورة حتى تناسب تصميم الموقع
الحجم: من المهم دائما تصغير وضغط حجم الصور لأنها تبطئ من تحميل صفحات الويب.
Alt: النص البديل وهو ما يظهر مكان الصورة عندما لا يتم تحميلها
Title: العنوان يعطي معلومات حول الصورة
ليصبح الكود:
لادراج صورة يتم البدء بوسم <img ثم وضع سلاش / قبل اغلاق الوسم. وفي الوسط يتم موضع خاصية المصدر src (يخبر المتصفح بمكان وجود الصورة) مع رابط مصدر الصورة.
<img src="https://2.bp.blogspot.com/-RdvbRsqhbKY/Vs3TeB035EI/AAAAAAAAE6U/enFIO6yXwlY/s1600/logofooter.png"/>
النتيجة
هناك أمور مهمة حول الصور وهي:
الصيغة: هناك صيغ كثيرة للصور، ما يهم هنا هو أن الصور التي تحتوي على الكثير من الألوان ويجب أن تكون واضحة ينصح باستعمال صيغة jpg . بينما الصور التي لا تهم جودتها مثل شعرا أو كرافيك يكفي استعمال png و gif .
العرض: يجب التحكم في عرض الصورة حتى تناسب تصميم الموقع
الحجم: من المهم دائما تصغير وضغط حجم الصور لأنها تبطئ من تحميل صفحات الويب.
خاصيات اضافية للصور
يمكن اغناء الصور بالمزيد من المعلومات باضافة خاصيتي النص البديل والعنوانAlt: النص البديل وهو ما يظهر مكان الصورة عندما لا يتم تحميلها
Title: العنوان يعطي معلومات حول الصورة
ليصبح الكود:
<img src="https://2.bp.blogspot.com/-RdvbRsqhbKY/Vs3TeB035EI/AAAAAAAAE6U/enFIO6yXwlY/s1600/logofooter.png" alt="معلومات" title="معلومات"/>
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله