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".