Images · الصور
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
Images
- Show a picture with the
<img>tag. <img>is a single tag — no closing tag, like<br>.- It needs two attributes:
src(where the picture is) andalt(a description).
العربية
الصور
- اعرض صورة باستخدام وسم
<img>. - وسم
<img>هو وسم مفرد — بدون وسم إغلاق، مثل<br>. - يحتاج إلى خاصيتين:
src(مكان الصورة) وalt(وصف).
<img src="/static/code/web-basics/cat.svg" alt="A cartoon cat">
English
Why alt text matters
altis text that describes the picture.- It shows if the image cannot load, and screen readers read it aloud.
- Always add a short, clear
alt— it makes your page kinder to everyone.
العربية
لماذا نص البديل مهم
altهو نص يصف الصورة.- يظهر إذا لم تتمكن الصورة من التحميل، وتقوم قارئات الشاشة بقراءته بصوت عالٍ.
- أضف دائماً
altقصيراً وواضحاً — هذا يجعل صفحتك أكثر تعاطفاً مع الجميع.
English
Common mistakes
- An image needs
src(the file) andalt(a description). <img>has no separate closing tag.
العربية
أخطاء شائعة
- الصورة تحتاج إلى
src(الملف) وalt(وصف). - لا يوجد لـ
<img>وسم إغلاق منفصل.
English
Now you try
- The picture lives at
/static/code/web-basics/cat.svg. - Show it, then add
alttext to an image.
العربية
الآن جرب بنفسك
- الصورة موجودة عند
/static/code/web-basics/cat.svg. - اعرضها، ثم أضف نص
altللصورة.
Show the cat picture. Add an <img> with src="/static/code/web-basics/cat.svg". · اعرض صورة القطة. أضف <img> مع src="/static/code/web-basics/cat.svg".
This image has no description. Add an alt attribute that describes it, like alt="A cartoon cat". · هذه الصورة ليس لها وصف. أضف سمة alt تصفها، مثل alt="A cartoon cat".