الصور في HTML
الإشارات المرجعية تنقلك داخل النص. الصور تدخل الصور الفوتوغرافية والرسوم والشعارات إلى الصفحة. أداة HTML الأساسية هي عنصر img الفارغ: في الاستخدام العادي لا يلف تعليقًا بين وسمَي فتح وإغلاق. يشير إلى ملف عبر src ويقدّم بديلاً نصيًا عبر alt.
ماذا يفعل img
img عنصر مستبدل (replaced). يجلب المتصفح المورد من src ويرسمه في التخطيط. إذا كان الملف مفقودًا أو محظورًا، ما زال الزائر يحتاج alt مفيدًا (أو، للزينة الخالصة، alt="" صريحًا). المسارات تتبع نفس قواعد النسبية والمطلقة التي تستخدمها أصلًا للروابط والأيقونات المفضلة.
إجابة مباشرة
اكتب <img src="path/to/file.jpg" alt="وصف قصير">.
src— مكان ملف الصورةalt— بديل نصي عندما لا تُرى الصورة أو تفشل في التحميل
يمكن لـwidthوheightالاختياريين حجز مساحة وتقليل قفز التخطيط. فضّل ضغط الصور الكبيرة بدل إرسال ملفات متعددة الميجابايت لكل متعلم على اتصال بطيء.
السمات الأساسية في لمحة
📊 سمات img الشائعة
| السمة | المهمة |
|---|---|
| src | مسار أو عنوان URL لملف الصورة |
| alt | بديل نصي / المعنى في السياق |
| width | تلميح اختياري لعرض العرض (بكسل في أمثلة HTML) |
| height | تلميح اختياري لارتفاع العرض |
| loading | تلميح اختياري للتحميل الكسول في المتصفحات الحديثة (متقدم لاحقًا) |
صورة إعلامية أساسية
ضع الصور في مجلد واضح مثل images/ واوصف ما يهم في alt.
صورة أساسية
html<img src="images/team.jpg" alt="Three teammates at a desk">قراءة العينة الأساسية
src="images/team.jpg"مسار نسبي من ملف HTMLaltيشرح معنى الصورة لقارئات الشاشة وللتحميل الفاشل- لا يوجد
</img>إغلاق منفصل في كتابة HTML العادية — السمات على الوسم الواحد - إذا كان المجلد أو اسم الملف خاطئًا، تنكسر الصورة حتى لو بدا الوسم مثاليًا
تلميحات العرض والارتفاع
إعطاء عرض وارتفاع يساعد المتصفح على حجز مساحة قبل وصول البايتات. طابق نسبة أبعاد الملف الحقيقي قدر الإمكان حتى لا تبدو الصورة ممدودة. تصغير صورة ضخمة بسمات HTML فقط ما زال يحمّل الملف الضخم — غيّر حجم الأصول واضغطها للويب.
صورة مع عرض وارتفاع
html<img src="images/logo.png" alt="Site logo" width="120" height="40">الصور الزخرفية وalt الفارغ
عندما لا تضيف الصورة معلومات — زخرفة خالصة يغطيها نص قريب بالفعل — استخدم alt="". لا تحذف السمة. حذف alt وكتابة alt="" الفارغ مختلفان: الفارغ يعني «تجاهلني في شجرة إمكانية الوصول»، والمفقود غالبًا يعني «حدث خطأ في الوسم».
صورة زخرفية مع alt فارغ
html<img src="images/divider.png" alt="" width="240" height="8">اكتب alt للمعنى لا للبريد المزعج
alt الجيد بديل قصير للصورة في السياق: ما يحتاجه المستخدم المبصر لفهم الصفحة. alt السيئ يحشو كلمات مفتاحية، أو يكرر تعليقًا مطبوعًا بجانب الصورة، أو يقول «صورة» بلا محتوى. إذا كانت الصورة مخططًا، لخّص الخلاصة؛ إذا كانت شعارًا يعمل أيضًا كرابط للرئيسية، فالاسم المتاح للرابط يأتي عادة من alt الصورة أو النص المحيط — ابقَ صادقًا.
صيغ الملفات التي يلتقيها المبتدئ
JPEG (.jpg) يناسب الصور الفوتوغرافية. PNG يناسب الرسوم ذات الحواف الحادة أو الشفافية. SVG يناسب الأيقونات والشعارات البسيطة عندما تريد تحجيمًا حادًا (سترى أنماط SVG أكثر لاحقًا). اختر صيغة تناسب المحتوى، ثم أبقِ وزن الملف معقولًا.
تمرّن في محررك
- ضع ملف
.jpgأو.pngصغيرًا في مجلدimages. - أضف
imgبـsrcنسبي صحيح وaltواضح. - أضف عرضًا وارتفاعًا يطابقان نسبة الأبعاد.
- اكسر المسار عمدًا مرة — تأكد أن
alt(أو واجهة الصورة المكسورة) يساعدك على ملاحظة الخطأ، ثم أصلح المسار. - أضف صورة زخرفية واحدة بـ
alt=""وتأكد أنك لم تحذف السمة بالكامل.
أخطاء سهلة
- غياب
altعلى الصور الإعلامية - مجلد أو إملاء خاطئ في
src - إرسال صورة كاميرا متعددة الميجابايت بينما يكفي ملف ويب أصغر
- معاملة
altكمكبّ كلمات مفتاحية - تمديد الشعارات بعرض/ارتفاع غير متطابقين
- الخلط بين
src(الصور) وhref(الروابط)
ملخص
- الصور تستخدم
imgمعsrcوalt - المسارات تتبع نفس قواعد ملفات الموقع الأخرى
altيدعم إمكانية الوصول والتحميل الفاشل؛ استخدمalt=""فقط للزينة الخالصة- العرض والارتفاع يمكنهما حجز مساحة؛ ما زال عليك تحسين حجم الملف الحقيقي
- اختر صيغة معقولة وأبقِ التنزيلات خفيفة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى