انتقل إلى محتوى الدرس

Src Attribute with Images in HTML خاصية Src مع عنصر img لإضافة الصور في لغة HTML

في هذا الدرس، ستتعلم كيفية التعامل مع الصور في HTML، بما في ذلك كيفية بناء الجملة لإضافة الصور وخصائصها مثل [src] و [alt] و [title]، ومعرفة الفرق بينها، بالإضافة إلى ضبط أبعاد الصور واستخدامها كرابط واضافة الصور المتحركة. سنستعرض أيضاً عنصر <picture> وكيفية استخدامه بفعالية.
1 صفوف تعليمية
لغة HTML
35,364 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

خاصية [src]، اختصارًا لكلمة مصدر [source]، تُستخدم مع عنصر <img> لتحديد مسار الصورة على صفحة الويب. توجه هذه الخاصية المتصفح إلى عنوان الصورة لتحميلها وعرضها. يجب توفير src أو srcset؛ يمكن أن يوفر srcset مصدر الصورة حتى عند غياب src.

يمكن أن يكون المسار محليًا إذا كانت الصورة مخزنة في نفس المجلد أو بالقرب من ملف HTML، أو قد يكون رابطًا خارجيًا للإشارة إلى صورة على الإنترنت. إذا كان هناك خطأ في رابط الصورة، فإن المتصفح سيعرض النص الموجود في خاصية النص البديل [alt].

Src Attribute

طريقة كتابة src attribute داخل عنصر <img>.

HTML
<img src="image_path">

Adding an Image Using a Local Source

إضافة وعرض صورة باستخدام مسار محلي مرتبط بمستند HTML في نفس المجلد أو ضمن مسار فرعي، سواء على الكمبيوتر المحلي أو الخادم المحلي.

HTML
<img src="images/mountain.jpg">

Adding an Image Using an External Source

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

HTML
<img  src="https://www.closetag.com/images/mountain.jpg">