كل ما تحتاج معرفته عن وسم الصورة <img> في HTML

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

1. إضافة الصورة باستخدام وسم <img>

يتيح لك وسم <img> إضافة الصور إلى صفحات الويب الخاصة بك بسهولة. في هذا المثال، ستتعلم كيفية تحديد مصدر الصورة باستخدام السمة src، وكيفية تحسين الوصولية باستخدام السمة alt، والتي توفر نصًا بديلاً يظهر في حال تعذر تحميل الصورة. كما يمكنك استخدام السمة title لإضافة نص يظهر عند تمرير مؤشر الفأرة فوق الصورة، مما يعزز من تجربة المستخدم.

2. استخدام السمة src لتحديد مصدر الصورة

السمة src هي التي تحدد مصدر الصورة التي سيتم عرضها على صفحة الويب. من المهم أن تكون مسار الصورة صحيحًا لضمان عرض الصورة بشكل صحيح على الصفحة.

3. تحسين محركات البحث (SEO) باستخدام السمة alt

تعتبر السمة alt من العوامل الهامة في تحسين محركات البحث، حيث تساعد في تعريف محركات البحث بمحتوى الصورة. بالإضافة إلى ذلك، توفر هذه السمة نصًا بديلاً يظهر في حال تعذر تحميل الصورة، مما يعزز من الوصولية للمستخدمين الذين يعانون من ضعف البصر.

4. إضافة نص توضيحي باستخدام <figuare> و <figcaption>

لإضافة نص توضيحي تحت الصورة، يمكنك استخدام وسمي <figuare> و <figcaption>. يتيح لك ذلك توفير معلومات إضافية حول الصورة، مما يساعد في توضيح محتوى الصورة بشكل أفضل للمستخدمين.

---

كلمة عن الدرس:

إذا كنت ترغب في إتقان أساسيات HTML وإنشاء مواقع ويب جذابة، فإن هذه الدورة هي ما تبحث عنه. ستتعلم كيفية استخدام وسم <img> بفعالية، وكيفية تحسين موقعك لمحركات البحث (SEO)، بالإضافة إلى تقنيات تحسين تجربة المستخدم من خلال الصور والنصوص التوضيحية. لا تفوت فرصة تطوير مهاراتك والانضمام إلى محترفي تطوير الويب. احجز مكانك الآن وابدأ رحلتك نحو التميز في عالم تطوير الويب!