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