تستعمل الصور في مختلف صفحات الويب ولأغراض مختلفة.
لادراج صورة يتم البدء بوسم <img ثم وضع سلاش / قبل اغلاق الوسم. وفي الوسط يتم موضع خاصية المصدر src (يخبر المتصفح بمكان وجود الصورة) مع رابط مصدر الصورة.
النتيجة
هناك أمور مهمة حول الصور وهي:
الصيغة: هناك صيغ كثيرة للصور، ما يهم هنا هو أن الصور التي تحتوي على الكثير من الألوان ويجب أن تكون واضحة ينصح باستعمال صيغة jpg . بينما الصور التي لا تهم جودتها مثل شعرا أو كرافيك يكفي استعمال png و gif .
العرض: يجب التحكم في عرض الصورة حتى تناسب تصميم الموقع
الحجم: من المهم دائما تصغير وضغط حجم الصور لأنها تبطئ من تحميل صفحات الويب.
Alt: النص البديل وهو ما يظهر مكان الصورة عندما لا يتم تحميلها
Title: العنوان يعطي معلومات حول الصورة
ليصبح الكود:
لادراج صورة يتم البدء بوسم <img ثم وضع سلاش / قبل اغلاق الوسم. وفي الوسط يتم موضع خاصية المصدر src (يخبر المتصفح بمكان وجود الصورة) مع رابط مصدر الصورة.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pE5ipCyxNShEw4P6zYNysjQ1JavqA0MsAbrpZxCsGZk7MRttbT7i_JBDhE5Zh4BbHyJzRTwzKRdkuiUCHMHFTNQweBdirNgEGpKC2Nok8G-lUMN1_-z5Mp9cXzXfs73dfK4yMRSvacI/s1600/logofooter.png"/>
النتيجة
هناك أمور مهمة حول الصور وهي:
الصيغة: هناك صيغ كثيرة للصور، ما يهم هنا هو أن الصور التي تحتوي على الكثير من الألوان ويجب أن تكون واضحة ينصح باستعمال صيغة jpg . بينما الصور التي لا تهم جودتها مثل شعرا أو كرافيك يكفي استعمال png و gif .
العرض: يجب التحكم في عرض الصورة حتى تناسب تصميم الموقع
الحجم: من المهم دائما تصغير وضغط حجم الصور لأنها تبطئ من تحميل صفحات الويب.
خاصيات اضافية للصور
يمكن اغناء الصور بالمزيد من المعلومات باضافة خاصيتي النص البديل والعنوانAlt: النص البديل وهو ما يظهر مكان الصورة عندما لا يتم تحميلها
Title: العنوان يعطي معلومات حول الصورة
ليصبح الكود:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pE5ipCyxNShEw4P6zYNysjQ1JavqA0MsAbrpZxCsGZk7MRttbT7i_JBDhE5Zh4BbHyJzRTwzKRdkuiUCHMHFTNQweBdirNgEGpKC2Nok8G-lUMN1_-z5Mp9cXzXfs73dfK4yMRSvacI/s1600/logofooter.png" alt="معلومات" title="معلومات"/>