توجد اخطاء حاليا في جوجل مشرفي الموقع

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

ماهو عنصر <img> وماهي خاصياته ؟ الدرس الثاني من لغة HTml

ماهو عنصر <img> وماهي خاصياته ؟ الدرس الثاني من لغة HTml

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiWXmbR8p2zKyUD0nhJavsduSIc1bqGPh3Dl6ZVwQFfsG3Hyi275cUWD2HZxcdkY9V8mFJ9bY5w0raXmtgMcMWST6KRCrcNMAQE_f78seYjl5Fbsp4Kaju37u5n0B4XpVXq_SXdh8ad4/s1600/html.png" alt="arabko" />

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

وممكن ايضا وضع رابط للصورة عند الضغط عليها عن طريق هذا الكود 
<a href="رابط الموقع">
وهذا مثال علي الكود بــ الرابط 

<a href="https://www.nsafr.com/2018/12/seo-trends-in-2019.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6iWm5vkqLkdwIUZMLWA7zaU2Dbs81U2VAGNaB8KhZn1SI9IEXCK9XXr59bX81MjfmLi9rwrHRR4dcLV2OY4USS8li1prgQNfkHKCW9Pqs_DSUShG1ECqMRT2FEFwYjCHJ58oPehs9l4/s1600/3o.png" alt="Arabko"></a>

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


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

العنصر img يجوز ان تضع له خاصيات مثل Float , Width , Border
وايضا ممكن ان تضع للصور فيلتر ونحن شرحنا هذه الخاصية في مقال : كيفية عمل filter لصور المدونة باستخدام css

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

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

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

هناك ملاحظات , يجب الالتزام بصيغ الصور المسموحة في الانترنت وصيغ الصورة المسموحة و الاكثر استخداما هم : 
1-JPEG 
2-PNG
3- GIF (الصور المتحركة)
4- BMP 
5- WebP (خاصية جديدة سنشرحها في الدروس المقبلة)
وعندما يحدث خطأ في محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث error، وهذا قد يحدث في عدِّة حالات مثل:

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

المصادر :- 

wiki.hsoub
wikipedia-WebP