מדריך HTML – תמונות

תמונות <img>

כדי להוסיף תמונות למסמך שלנו נשתמש ברכיב <img> שהוא רכיב מיוחד מכיוון שאין לו תגית סגירה. מכיוון שעלינו לומר לדפדפן היכן למצוא את קובץ התמונה ומה המימדים שלה עלינו להוסיף לרכיב התמונה מאפיינים המציינים מידע זה. המאפיינים של תגית HTML הם צמדים של שם + ערך הנכתבים כחלק מתגית הפתיחה של הרכיב.

לתגית התמונה יש ארבעה מאפיינים (attributes בלעז) עיקריים המאפשרים לנו לציין את המידע הדרוש לדפדפן להציג את התמונה כראוי:

  • src – הנתיב המלא או היחסי לקובץ התמונה באתר
  • width – רוחב התמונה בפיקסלים (לא חובה)
  • height – גובה התמונה בפיקסלים (לא חובה)
  • alt – טקסט חלופי לתמונה עבור קוראי מסך המשמשים גולשים הסובלים מלקות ראיה

 

לדוגמא:

<img src="https://www.webmaster.org.il/images/logo.gif" 
     width="254" height="63" alt="webmaster logo" 
/>

אם נריץ את הדף בדפדפן, נקבל את התוצאה הבאה:

HTML תמונות

חשוב לשים לב לכך שאופן כתיבת מאפיין לרכיב HTML הוא מאפיין="ערך" כאשר שם המאפיין תמיד יהיה באנגלית ובאותיות קטנות וערך המאפיין תמיד יהיה בתוך מרכאות כפולות. כמו כן יש לשים לב לכך שלרכיב img אין תגית סגירה ולכן נסגור אותו ע"י צירוף התווים רווח ולוכסן קדמי לפני סימן הסגירה של התגית (סימן <).

תגיות: , ,

גיא בורשטיין

גיא בורשטיין הוא מומחה טכנולוגיות פיתוח בחברת מיקרוסופט ואחראי על הקשר בין מיקרוסופט לקהילת המפתחים בארץ.

תגובות בפייסבוק