WEP.X
مرحبا بكم في موقع (WEP.X) موقع متخصص في علوم التكنولوجيا والبرمجة نقدم محتوي تعليمي عن لغات البرمجة وتكنولوجيا الحاسوب
الدرس الثالث في سلسلة تعلم (HTML)
المحتوي
- المقدمة
- العنصر img
- خصائص العنصر img
- الروابط الصورية
(المقدمة)
متصفحات الويب هي التي تقدم مواقع الويب حاملة جميع ملفات الصفحات الخاصة بالموقع مثل عناصر الفيديو والصوتيات والصور والاطارات التي تضمن برمجيات اخري او فيديوهات ايضا وتحمل معها بالطبع اكواد الصفحة من اكواد html و css و js او jqure كل هذه الملفات تحمل من قبل المتصفح دفعة واحدة لكن كل هذه الملفات يمكن ان تبطأ تحميل الصفحة لكن كيف نتفادي هذه المشكلة
سوف نقدم شرح توضيحي للعنصر <img> مع تفادي حل مشكلة بطئ تحميل الصفحة
العنصر (img)
العنصر <img> في html عنصر خاص لتضمين الصور ضمن صفحة الويب وهو عنصر منفرد بمعني لا يوجد له قوس غلق
العناصر المنفردة مثل <img> و <br> و <hr> هي عناصر ليس لها محتوي ليتم عرضة في المتصفح بمعني ان العنصر img ليس له نص سيعرض في المتصفح هو يحتوي علي مسار الصورة في مساحة التخزين فقط ثم يعرضها في المتصفح
مثال
- <img src="source.jpg">
تظهر في المتصفح
ويتم التحكم في الصورة من خلال خصائص العنصر
خصائص (img)
عنصر الصور لديه بعض الخصائص التي تتحكم في كيفية عرض الصورة
مثل
اولا الخاصية src التي تحمل عنوان الصورة في مساحة التخزين
- <img src="source.jpg">
الخاصية width و height الذي يحددان عرض وارتفاع الصورة وتأخذ قيم رقمية فقط
- <img src="source.jpg"
width="200" height="300">
الخاصي alt هي خاصية مهمة جدا لتحسين SEO فأنها تأخذ قيمة نصية تعرض عند تعذر تحميل الصورة من المتصفح او عند قرائة الشاشة من قبل البرامج
- <img src="source.jpg"
width="200" height="300" alt="تعذر تحميل الصفحة">
الخاصية loading التي تحدد طريقة تحميل ملف الصفحة تأخذ القيمة lazy لتحميل الصورة فقط عند الاقتراب منها اذا كانت في نهاية او منتصف الصفحة وهذه مفيدة لتسريع التحميل البدائي للصفحة والقيمة eager تستخدم للتحميل الفوري للصورة
- <img src="source.jpg"
width="200" height="300" loading="lazy">
العنصر img يقبل صور من نوع
(png , jpg , jpeg , gif , webp)
الروابط الصورية
ذكرنا في مقال العنصر a السابق أننا نضع القيمة النصية التي تظهر للمستخد بين وسم البداية والنهاية
يمكننا استبدال هذا النص الذي سيوجه المستخدم إلي صفحة اخري ونضع مكانة العنصر img لجعل الصورة هي التي ستوجه المستخدم إلي صفحة اخري عند الضغط علي الصورة
مثال
- <a href="www.google
.com"><img src="source.jpg"
width="200" height="300"></a>
فيديو شرح
الخاتمة:-
هكذا اتممنا شرح العنصر img وكل ما يخصة من خصائص
ملحوظة::العنصر img مدعوم تقريبا من معظم المتصفحات الحديثة