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

תמונות <img>

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

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

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

 

לדוגמא:

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

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

HTML תמונות

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

תגיות: , ,

גיא בורשטיין

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

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

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!