الدرس الخامس: الصور في HTML

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

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

كيفية إضافة صورة في HTML:

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

مثال على صورة:

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

شرح الكود:

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

تحديد عرض وارتفاع الصورة:

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

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

مثال آخر مع صورة محلية:

إذا كانت لديك صورة مخزنة على جهازك، يمكنك استخدام المسار المحلي لتحديد مصدر الصورة.

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

استخدام الصورة كخلفية:

يمكنك استخدام صورة كخلفية لعنصر HTML باستخدام CSS. على سبيل المثال، لتعيين صورة كخلفية لعنصر <div>.

<div style="background-image: url('background.jpg'); height: 300px;">

    <p>هذه النصوص تظهر فوق الصورة الخلفية</p>

    </div>

النص البديل للصورة:

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

الخلاصة:

في هذا الدرس تعلمنا كيفية إضافة الصور في HTML باستخدام العنصر <img>، واستخدام السمات src و alt، كما تعلمنا كيفية تحديد عرض وارتفاع الصورة، واستخدام الصور كخلفية باستخدام CSS.