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

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

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

תגית 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

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