عنصر <img> في HTML: لعرض الصور
ما هو عنصر <img>؟
عنصر <img> في لغة HTML هو عنصر خاص يستخدم لعرض الصور على صفحات الويب. هذا العنصر لا يحتوي على محتوى نصي، ولكنه يشير إلى مصدر الصورة (عنوان URL) الذي سيتم عرضه.
كيف يعمل عنصر <img>؟
* خاصية src: هي الخاصية الأساسية لعنصر <img>. تحدد عنوان URL للصورة التي تريد عرضها.
* خاصية alt: هذه الخاصية مهمة جداً لـSEO وقابلية الوصول. تقدم وصفًا بديلاً للصورة، يتم عرضه إذا لم تتمكن الصورة من التحميل أو إذا كان المستخدم يستخدم قارئ شاشة.
مثال بسيط:
<img src="image.jpg" alt="صورة لقطة" />
في المثال أعلاه:
* src="image.jpg": يشير إلى أن الصورة موجودة في الملف "image.jpg".
* alt="صورة لقطة": يوفر وصفًا للصورة.
خصائص أخرى لعنصر <img>:
* width: لتحديد عرض الصورة بالبكسل.
* height: لتحديد ارتفاع الصورة بالبكسل.
* title: يعرض نصًا توضيحيًا عند تمرير مؤشر الماوس فوق الصورة.
* style: لتطبيق أنماط CSS على الصورة.
أمثلة أخرى:
* صورة ذات عرض محدد:
<img src="landscape.jpg" alt="صورة طبيعية" width="500" />
* صورة مع نص بديل طويل:
<img src="profile.png" alt="صورة شخصية للمؤلف، يظهر فيها مبتسماً مرتديًا قميصًا أزرق" />
لماذا هو مهم؟
* عرض الصور: هي الطريقة الأساسية لعرض الصور على صفحات الويب.
* تحسين المظهر: تساعد الصور على جعل صفحات الويب أكثر جاذبية وسهولة الفهم.
* SEO: تساعد خاصية alt محركات البحث على فهم محتوى الصورة وتحسين ترتيب الصفحة في نتائج البحث.
* قابلية الوصول: تساعد خاصية alt الأشخاص الذين يستخدمون قارئات الشاشة على فهم محتوى الصورة.
ختامًا:
عنصر <img> هو أداة أساسية في HTML لعرض الصور. من خلال فهم خصائصه المختلفة، يمكنك استخدام الصور بشكل فعال لتحسين مظهر ووظائف صفحات الويب الخاصة بك
