الدرس الثالث: إدراج الصور في HTML

ما هي الصور في HTML؟

الصور تعد من العناصر الأساسية التي تستخدم في صفحات الويب لإضافة المحتوى البصري وجعل الصفحة أكثر جذبًا للمستخدمين. في HTML، يتم إدراج الصور باستخدام العنصر <img>.

كيفية إدراج صورة في HTML:

لإدراج صورة في HTML، نستخدم العنصر <img>، وهو عنصر غير مغلق (أي لا يحتوي على علامة إغلاق). يتم تحديد مكان الصورة باستخدام السمة src، والتي تحتوي على مسار الصورة (رابط الصورة).

مثال على إدراج صورة:

<img src="https://www.example.com/image.jpg" alt="وصف للصورة">

شرح الكود:

• <img>: هو العنصر الذي نستخدمه لإدراج الصورة في الصفحة.
• src="https://www.example.com/image.jpg": هي السمة التي تحدد مصدر الصورة.
• alt="وصف للصورة": هي سمة اختيارية تُستخدم لوضع وصف نصي للصورة في حالة عدم تحميلها.

تنسيق الصور:

يمكنك تنسيق الصور في HTML باستخدام بعض السمات مثل width و height لتحديد عرض الصورة وارتفاعها.

<img src="https://www.example.com/image.jpg" alt="وصف للصورة" width="300" height="200">

الصور داخل الروابط:

يمكنك أيضًا وضع صورة داخل رابط، بحيث عند النقر على الصورة يتم الانتقال إلى رابط معين.

<a href="https://www.example.com">

        <img src="https://www.example.com/image.jpg" alt="وصف للصورة">

    </a>

الصور من الملفات المحلية:

يمكنك أيضًا إدراج الصور المخزنة على جهازك المحلي (على سبيل المثال داخل نفس مجلد الموقع).

<img src="images/photo.jpg" alt="صورة من جهاز الكمبيوتر">

الصور كخلفية:

يمكنك أيضًا استخدام الصور كخلفية لعنصر معين باستخدام CSS.

<div style="background-image: url('https://www.example.com/image.jpg'); height: 300px; width: 300px;">

        محتوى النص داخل العنصر

    </div>

النص البديل (alt) وأهميته:

النص البديل (alt) يعتبر جزءًا مهمًا في تحسين الوصولية (Accessibility) للمستخدمين الذين يعانون من ضعف البصر، حيث يتمكنون من قراءة الوصف النصي للصورة باستخدام قارئات الشاشة. كما أن النص البديل يساعد في تحسين محركات البحث (SEO) أيضًا.

الخلاصة:

في هذا الدرس تعلمنا كيفية إدراج الصور في صفحات HTML باستخدام العنصر <img>، وتعرفنا على كيفية تحديد مصدر الصورة باستخدام السمة src، وكيفية تحديد وصف للصورة باستخدام السمة alt. كما تعلمنا كيفية تنسيق الصورة باستخدام السمات width و height، وأيضًا كيفية وضع الصورة داخل رابط أو استخدامها كخلفية لعنصر.