יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

שימוש בתמונות, תגית img

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. שימוש בתמונות, תגית img
כיצד מכניסים תמונה במסמך HTML5 ולמה חשוב להגדיר לה ערך alt חלופי?

התגית img משמשת על מנת להכניס תמונה לעמוד באתר אינטרנט. תגית זו הינה תגית ריקה, כלומר, יש בתוכה רק מאפיינים, ואין לה תגית סגירה (כלומר היא סוגרת את עצמה).

מאפיין src של תגית img

בכדי שתמונה כלשהי תוצג במסמך html, יש להשתמש במאפיין src בתוך תגית img. מאפיין זה מגדיר את המקור של התמונה, כלומר, המקום בו היא שמורה, כאשר הערך value של המאפיין src הוא כתובת ה-url שבה נמצאת התמונה. כך תיראה למשל התגית img להוספת תמונה בשם "play.webp":

<img src="https://www.mgweb.co.il/themes/default/images/play.webp" alt="play" />

מאפיין alt של תגית img

המאפיין alt משמש להגדרת ערך חלופי לתמונה. ערך ה-alt הוא למעשה טקסט חלופי (alternative), אשר מופיע למשל במקרה שהתמונה לא עולה בדפדפן מסיבה כלשהי (עוד על מאפיין alt ניתן לקרוא במאמר אופטימיזציית תמונות באתר).

כך מגדירים בקוד ערך חלופי לתמונה:

<img src="book.webp" alt="pink book" />

במקרה זה, הטקסט "pink book" הוא הערך החלופי לתמונה. בד"כ מקובל לבחור טקסט המתאר את התמונה בצורה תמציתית. כדאי להתחשב בעובדה שמנוע החיפוש גוגל לוקח בחשבון את הערך החלופי בכדי ללמוד ממנו על התוכן של התמונה, ושערך זה מוקרא במקום התמונה עבור גולשים בעלי מוגבלות ראייה המשתמשים בתוכנות הקראה, ולכן יש חשיבות לבחירה נכונה של הטקסט.

מאפיין alt הינו מאפיין חובה בתקן HTML5, בניגוד לתקנים ישנים שאיפשרו שימוש בתגיות img ללא מאפיין alt.

הגדרת גודל התמונה ב-HTML5

המאפיינים height ו-width משמשים להגדרה של גובה ורוחב התמונה. הערכים המספריים מתייחסים לפיקסלים:

<img src="book.webp" alt="pink book" width="311" height="253" />

חשוב להגדיר את מאפייני הגובה והרוחב של התמונה, כי אז המקום של התמונה יישמר בזמן טעינת הדף (בניגוד למצב שבו מבנה הדף משתנה בזמן הטעינה בגלל שגודל התמונה איננו מוגדר בקוד).

 

הוספת תגובה

תודה!

(ל"ת)
12/03/2013 21:32
אני אני

מאפיין src

09/03/2013 0:21
דוד כהן
למרות שתמיד יופיע src, עדין src הוא מאפיין של התגית img (ולא תגית), כיוון שהוא חייב לקבל ערך (אתה משווה אותו לערך כלשהו שזה מיקום התמונה). לתגית אין ערך, אלא רק למאפיינים שלה.

שאלה!

06/03/2013 17:59
אני אני
אבל src תמיד יופיע! אז זה תגית, לא?
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

בניית חנות אינטרנטית של מיזם גרופ תעזור לך ביצירת סיסטם עוצמתי שמגדיל מכירות.

ההצלחה מבוססת על בניית חנות וירטואלית בחוד החנית עם הקמת מערך שיווק אפקטיבי שמגדיל חשיפה והמרות.

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: