شرح العنصر img من لغة HTML

شرح العنصر img من لغة HTML

 ماهو عنصر <img> وماهي خاصياته ؟ 

عنصر <img> يعتبر من اهم عناصر لغة HTML وهذا العنصر يمثل الصور ويكون بهذا الشكل 

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjr5nPfTO6maqOjjMifP9kmP6Tnt1IEg45c2Mex0xhOHJdK0JUWXS4E9i4v0gCnVDTm1E7Ru1JYQaKnWrfn_LB3VyE1C4VGbasvOrzdFijYQCn9RPCxGYRtiYS9fffY1Nzw5ydZWt9g5h/s320/%25D8%25A7%25D9%2584%25D8%25AD%25D8%25B5%25D9%2588%25D9%2584-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A8%25D8%25A7%25D9%2583-%25D9%2584%25D9%258A%25D9%2586%25D9%2583+%25281%2529.webp" alt="mrbloggger" />

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXAiSMiC7fVCwpdnG5ui9w4m_BhkL6RBo3fiwdx6B55KQZsQIL99yczq7VFExs1y-SrMWxr2myhodaSYshikzY1TPSeG-iv1tNKMNkN-HZJ9bWVZUZuX9Y___TlBX_mObqmO6HW-8LjCd/s800/mrblooger.webp" alt="mrbloggger" />

هذا الكود به رابط الصورة رابط ادراج الصورة هو < img src= وعنصر Alt هو النص البديل للصورة , 

وممكن ايضا وضع رابط للصورة عند الضغط عليها عن طريق هذا الكود 

<a href="رابط الموقع">

وهذا مثال علي الكود بــ الرابط 

 <a href="https://mrbloggger1.blogspot.com/2020/10/strong-backlink.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjr5nPfTO6maqOjjMifP9kmP6Tnt1IEg45c2Mex0xhOHJdK0JUWXS4E9i4v0gCnVDTm1E7Ru1JYQaKnWrfn_LB3VyE1C4VGbasvOrzdFijYQCn9RPCxGYRtiYS9fffY1Nzw5ydZWt9g5h/s320/%25D8%25A7%25D9%2584%25D8%25AD%25D8%25B5%25D9%2588%25D9%2584-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A8%25D8%25A7%25D9%2583-%25D9%2584%25D9%258A%25D9%2586%25D9%2583+%25281%2529.webp" alt="mrbloggger"></a>

 <a href="https://mrbloggger1.blogspot.com/2020/10/strong-backlink.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjr5nPfTO6maqOjjMifP9kmP6Tnt1IEg45c2Mex0xhOHJdK0JUWXS4E9i4v0gCnVDTm1E7Ru1JYQaKnWrfn_LB3VyE1C4VGbasvOrzdFijYQCn9RPCxGYRtiYS9fffY1Nzw5ydZWt9g5h/s320/%25D8%25A7%25D9%2584%25D8%25AD%25D8%25B5%25D9%2588%25D9%2584-%25D8%25B9%25D9%2584%25D9%2589-%25D8%25A8%25D8%25A7%25D9%2583-%25D9%2584%25D9%258A%25D9%2586%25D9%2583+%25281%2529.webp" alt="mrbloggger"></a>

للفهم اكثر قم بكتابة هذه الاكواد بنفسك داخل محرر html اون لاين

واذا كتبت الكود في الاعلي سيظهر لك صورة لموضوع كيف تحصل على باك لينك قوي وعند النقر عليها ستذهب لرابط الموضوع . 

العنصر img يجوز ان تضع له خاصيات مثل Float , Width , Border

وايضا ممكن ان تضع للصور فيلتر ونحن شرحنا هذه الخاصية في مقال : كيفية عمل filter لصور المدونة باستخدام css

العنصر width هو عنصر لحجم عرض الصورة عند وضع كود الصورة ضع داخل الكود هذا العنصر width="70px" ويمكنك التعديل في الحجم ونفس الشي في ال height الارتفاع الخاص بالصورة مثال : 

 <img src="mrbloggger-logo.png" alt="mrbloggger Logo" height="70px"> 

 <img src="mrbloggger-logo.png" alt="mrbloggger Logo" height="70px"> 

وخاصية float هي تحدد العنصر يجب أن يوضع على يسار أو يمين الحاوية التي بها 

هناك ملاحظات , يجب الالتزام بصيغ الصور المسموحة في الانترنت وصيغ الصورة المسموحة و الاكثر استخداما هم : 

1. JPEG 
2. PNG
3. GIF (الصور المتحركة)
4. BMP 
5. WebP 

وعندما يحدث خطأ في محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث error، وهذا قد يحدث في عدِّة حالات مثل:

• الخاصية src غير موجودة أو قيمتها فارغة.
• قيمة رابط URL للصورة هي نفس قيمة رابط URL للصفحة الحالية.
• الصورة المُحدَّدة معطوبة بطريقةٍ ما تمنع عرضها.
• البيانات الوصفية للصورة معطوبة بشكلٍ يمنع الحصول على أبعادها، ولم تكن أبعادها مُحدَّدة عبر خاصيات العنصر <img>.
• صيغة الصورة المُحدَّدة ليست مدعومة في المتصفح.