شرح وسم الـ Image
في عالم تطوير الويب، تلعب الصور دورًا حيويًا في تحسين تجربة المستخدم وجعل المحتوى أكثر جاذبية وفهمًا. يُستخدم وسم الصورة <img> في HTML كوسيلة لعرض الصور على صفحات الويب. يمكن تكوين هذا العنصر بعدة خصائص تسمح بتحديد مصدر الصورة، وتوفير نص بديل لإمكانية الوصول، وتحديد الأبعاد، وتخصيص المظهر، والعديد من الخصائص الأخرى التي تسهم في تعزيز أداء وظهور الصور.
في هذا الدرس، سنقوم بفحص بعض الخصائص الرئيسية لوسم الصورة في HTML، وكيفية استخدامها بشكل صحيح لتحسين تصميم وظهور الصور على مواقع الويب. سنتعلم كيفية تحديد المصدر، وتحديد الأبعاد، وتوفير نص بديل لضمان إمكانية الوصول، وكيفية استخدام بعض الخصائص الإضافية التي تتيح لنا تخصيص تجربة المستخدم بشكل أفضل.
هيا بنا نبدأ في استكشاف عالم وسم الصورة وكيفية الاستفادة القصوى من إمكانياتها في تطوير صفحات الويب!
شرح وسم الـ Image
وسم الصورة في HTML يُستخدم لعرض الصور على صفحات الويب، ويتم استخدام العنصر <img> لتحقيق ذلك
HTML إليك شرح لكيفية استخدام وسم الصورة في
<img src="رابط الصورة" alt="نص بديل" width="عرض" height ="ارتفاع">
Src
هو خاصية (attribute) تُستخدم لتحديد موقع الصورة. يكون القيمة لها عادةً عنوان URL للصورة أو مسار ملف الصورة على الخادم.
alt
هو خاصية تحدد نصًا بديلًا يُعرض إذا لم يتمكن المستعرض من تحميل الصورة. يعتبر هذا مهمًا لأغراض إمكانية الوصول (accessibility) ويُساعد أيضًا في فهم المحتوى إذا فشل تحميل الصورة.
width و height
هما خصائص يمكن استخدامهما لتحديد عرض وارتفاع الصورة بشكل صريح. يمكن تحديد القيم بالبكسلات أو بالنسبة المئوية من حجم العرض والارتفاع الأصلي للصورة.
على سبيل المثال:
<img src="صورة.jpg" alt="وصف الصورة" width="300" height="200">
في هذا المثال، يتم عرض صورة بعرض 300 بكسل وارتفاع 200 بكسل، وإذا فشل تحميل الصورة، سيظهر نص “وصف الصورة”
مثال كامل على كيفية استخدام وسم الصورة في صفحة HTML
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على وسم الصورة في HTML</title> </head> <body> <h1>مرحبًا بك في موقعنا!</h1> <p>هذه صورة للمثال:</p> <!-- وسم الصورة --> <img src="صورة.jpg" alt="وصف الصورة" width="300" height="200"> <p>هذا نص آخر يمكن أن يتبع الصورة.</p> </body> </html>في هذا المثال:
تم استخدام وسم الصورة <img> لعرض الصورة
تم استخدام الخاصية src لتحديد موقع الصورة، وهنا نفترض أن “صورة.jpg” هي اسم ملف الصورة في نفس المجلد الذي يحتوي على ملف الصفحة.
تم استخدام الخاصية alt لتوفير نص بديل للصورة
تم استخدام الخاصيتين width و height لتحديد أبعاد الصورة
.يمكنك تعديل قيم الخصائص واستبدال “صورة.jpg” بمسار الصورة الفعلي إذا كنت تستخدم ملف صورة آخر
استخدامات img tag
وسم <img> في HTML يُستخدم لعرض الصور على صفحات الويب، وهو جزء أساسي من تطوير المواقع.
إليك بعض الاستخدامات الشائعة لوسم الصورة مع أمثلة
عرض صورة بسيطة
يمكن استخدام وسم الصورة لعرض صورة بسيطة على الصفحة
<img src="example.jpg" alt="صورة توضيحية">
ربط الصورة بصفحة أخرى
مكنك استخدام وسم الصورة داخل عنصر <a> لجعل الصورة رابطًا
<a href="صفحة.html"> <img src="صورة.jpg" alt="وصف الصورة"> </a>
تستخدم الصور كأزرار
يمكن تحويل الصورة إلى زر يعمل كرابط أو ينفذ أمرًا
<a href="رابط.html"> <img src="زر.jpg" alt="زر الانتقال"> </a>
تحديد الأبعاد والحجم
يمكن استخدام خصائص width و height لتحديد أبعاد وحجم الصورة
<img src="صورة.png" alt="وصف الصورة" width="300" height="200">
صور متحركة (GIF)
يمكن عرض الصور المتحركة باستخدام وسم الصورة
<img src="تحريك.gif" alt="صورة متحركة">
تحسين إمكانية الوصول
يمكن استخدام خاصية alt لتوفير نص بديل يظهر إذا فشل تحميل الصورة أو لزيادة إمكانية الوصول
<img src="صورة.jpg" alt="وصف الصورة لأغراض إمكانية الوصول">
تذكر دائمًا استخدام الصور بشكل مسؤول، وتأكد من تحديد نص بديل مناسب لضمان تجربة مستخدم جيدة، خاصة للأشخاص الذين يعتمدون على تقنيات إمكانية الوصول.
مثال شامل على كيفية استخدام وسم الصورة <img> في صفحة HTML مع بعض الاستخدامات المختلفة
يمكنك نسخ ولصق هذا الكود في ملف HTML واستخدامه كنقطة انطلاق لتطوير صفحات الويب الخاصة بك. قم بتغيير أسماء الملفات والروابط والأبعاد حسب احتياجاتك الخاصة.
خصائص وسم img
وسم الصورة <img> في HTML يدعم مجموعة من الخصائص (Attributes) التي تساعد في تحديد وتخصيص سلوك الصورة على الصفحة. إليك شرح لبعض
الخصائص الرئيسية
Src source
يُستخدم لتحديد موقع أو مسار الصورة
مثال
<img src="صورة.jpg" alt="وصف الصورة">
alt (alternative text)
يُستخدم لتوفير نص بديل يُعرض إذا فشل تحميل الصورة أو لأغراض إمكانية الوصول.
مثال:
<img src="صورة.jpg" alt="وصف الصورة">
width و height
<img src="صورة.jpg" alt="وصف الصورة" width="300" height="200">
يُستخدمان لتحديد عرض وارتفاع الصورة بشكل صريح
يمكن تحديد القيم بالبكسلات أو بالنسبة المئوية
مثال:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على وسم الصورة في HTML</title> </head> <body> <h1>مرحبًا بك في موقع الصور!</h1> <!-- 1. عرض صورة بسيطة --> <img src="example.jpg" alt="صورة توضيحية"> <!-- 2. ربط الصورة بصفحة أخرى --> <a href="صفحة.html"> <img src="صورة.jpg" alt="وصف الصورة"> </a> <!-- 3. استخدام الصور كأزرار --> <a href="رابط.html"> <img src="زر.jpg" alt="زر الانتقال"> </a> <!-- 4. تحديد الأبعاد والحجم --> <img src="صورة.png" alt="وصف الصورة" width="300" height="200"> <!-- 5. صور متحركة (GIF) --> <img src="تحريك.gif" alt="صورة متحركة"> <!-- 6. تحسين إمكانية الوصول --> <img src="صورة.jpg" alt="وصف الصورة لأغراض إمكانية الوصول"> </body> </html>
title
يُستخدم لتوفير نص توضيحي إضافي يظهر عند تحويل المؤشر إلى الصورة.
مثال:
<img src="صورة.jpg" alt="وصف الصورة" title="انقر للتكبير">
style
يُستخدم لتحديد قواعد النمط (CSS) لتخصيص مظهر الصورة.
مثال
<img src="صورة.jpg" alt="وصف الصورة" style="border: 2px solid black;">
class و id
يمكن استخدامهما لتطبيق أنماط النمط (CSS) أو للرجوع إلى الصورة باستخدام الجافا سكريبت
مثال
<img src="صورة.jpg" alt="وصف الصورة" class="صورة-تصغير" id="صورة-رئيسية">
Loading
يستخدم لتحديد كيفية تحميل الصورة، مع قيمة “lazy” لتأجيل التحميل حتى يتم تحميل الصفحة أو “eager” للتحميل الفوري
مثال
<img src="صورة.jpg" alt="وصف الصورة" loading="lazy">
decoding
يُستخدم لتحديد كيفية فك تشفير الصورة، مع قيمة “async” للفك تشفير الصورة بشكل غير متزامن
مثال:
<img src="صورة.jpg" alt="وصف الصورة" decoding="async">
هذه بعض الخصائص الرئيسية المستخدمة مع وسم الصورة في HTML. يمكنك استخدام هذه الخصائص بمرونة لتخصيص تجربة الصور على صفحات الويب الخاصة بك.
مثال شامل لكل هذه الاخصائص
مثال شامل يستخدم معظم الخصائص المذكورة في وسم الصورة <img> في HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال شامل على وسم الصورة في HTML</title>
<style>
.تكبير {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<h1>مثال شامل على وسم الصورة في HTML</h1>
<!-- وسم الصورة مع معظم الخصائص المذكورة -->
<img
src="صورة.jpg"
alt="وصف الصورة"
width="500"
height="400"
title="انقر للتكبير"
style="border: 2px solid black;"
class="تكبير"
id="صورة-رئيسية"
loading="lazy"
decoding="async"
>
</body>
</html>
:في هذا المثال
تم استخدام src لتحديد موقع الصورة
alt توفير نص بديل
width و height تحديد أبعاد الصورة.
title إضافة نص توضيحي.
style لتخصيص مظهر الصورة باستخدام CSS.
class و id لاستخدام الصورة في CSS أو JavaScript.
loading لتأخير تحميل الصورة.
decoding لتحديد كيفية فك تشفير الصورة.
يمكنك تعديل القيم واستخدام هذا المثال كنقطة انطلاق لتضمين الصور بطريقة تناسب احتياجات مشروعك الخاص.
اختبار اختيار من متعدد عن هذا الدرس حول وسم الصورة في HTML
اختر الإجابة الصحيحة لكل سؤال:
السؤال 1:ما الخاصية التي يُستخدم تحديد موقع الصورة في وسم الصورة؟
أ) description
ب) location
ج) src
د) url
السؤال 2:لماذا يهم استخدام الخاصية alt في وسم الصورة؟
أ) لتحديد الحجم العرضي للصورة
ب) لتوفير نص بديل يعرض إذا فشل تحميل الصورة أو لأغراض إمكانية الوصول
ج) لتغيير لون الصورة
د) لتحديد عرض وارتفاع الصورة
السؤال 3:كيف يمكن تحديد أبعاد الصورة في وسم الصورة بشكل صريح؟
أ) باستخدام الخاصية size
ب) باستخدام الخاصية dimensions
ج) باستخدام الخاصية width و height
د) باستخدام الخاصية scale
السؤال 4:ما هي الخصائص المستخدمة لتوفير نص توضيحي إضافي يظهر عند تحويل المؤشر إلى الصورة؟
أ) tooltip
ب) hint
ج) title
د) caption
السؤال 5:ما الخاصية التي يُستخدم تحديدها لتحديد كيفية تحميل الصورة؟
أ) preload
ب) loading
ج) lazyload
د) download
السؤال 6:ما هي الخاصية التي تستخدم لتحديد كيفية فك تشفير الصورة؟
أ) decode
ب) decipher
ج) decrypt
د) decoding
الإجابات
ج)src
ب) لتوفير نص بديل يعرض إذا فشل تحميل الصورة أو لأغراض إمكانية الوصول
ج) باستخدام الخاصية width و height
ج) title
ب) loading
د) decoding
السؤال 7:ما هي الخاصية التي يمكن استخدامها لتطبيق أنماط النمط (CSS) أو للرجوع إلى الصورة باستخدام الجافا سكريبت؟
أ) style
ب) class
ج) id
د) design
السؤال 8:ما القيمة التي يمكن أن تأخذها الخاصية loading لتأجيل تحميل الصورة حتى يتم تحميل الصفحة؟
أ) preload
ب) eager
ج) lazy
د) deferred
السؤال 9:كيف يمكن تحديد أن الصورة ستتغير إلى رابط آخر عند النقر عليها؟
أ) <img link=”الرابط”>
ب) <a href=”الرابط”><img src=”الصورة.jpg” alt=”الوصف”></a>
ج) <img href=”الرابط” src=”الصورة.jpg” alt=”الوصف”>
د) <a link=”الرابط”><img src=”الصورة.jpg” alt=”الوصف”></a>
السؤال 10:ما هي الخاصية التي يمكن أن تستخدم لتوفير نص بديل إضافي يظهر عند تحميل الصورة بنجاح؟
أ) title
ب) alt
ج) caption
د) description
الإجابات
ب) class
ج) lazy
ب) <a href=”الرابط”><img src=”الصورة.jpg” alt=”الوصف”></a>
أ) title