ה HTML תג IMG מסדיר את הכנסת תמונות ועצמים גרפיים סטטיים אחרים בדף אינטרנט. תג נפוץ זה תומך בכמה תכונות חובה ואופציונליות המוסיפות עושר ליכולת שלך לעצב אתר מרתק וממוקד תמונה.
דוגמה לתג IMG של HTML מעוצב לחלוטין נראה כך:
תכונות תג IMG נדרשות
src = "/ path / to / image.jpg"
התכונה היחידה שאתה צריך כדי להציג תמונה בדף אינטרנט היא src תְכוּנָה. תכונה זו מזהה את השם והמיקום של קובץ התמונה שיוצג.
alt = "תיאור התמונה"
כדי לכתוב XHTML ו- HTML4 תקפים, ה- alt נדרש גם תכונה. תכונה זו משמשת לספק לדפדפנים שאינם חזותיים טקסט המתאר את התמונה. דפדפנים מציגים את הטקסט החלופי בדרכים שונות. יש המציגים אותו כחלון קופץ כשמניחים את העכבר מעל התמונה, אחרים מציגים אותו במאפיינים כאשר לוחצים לחיצה ימנית על התמונה, וחלקם כלל לא מציגים אותו.
להשתמש ב טקסט alt לתת פרטים נוספים על התמונה שאינם רלוונטיים או חשובים לטקסט דף האינטרנט. אך זכור כי בקוראי מסך ובדפדפני טקסט בלבד אחרים, הטקסט ייקרא בשורה עם שאר הטקסט בדף. כדי למנוע בלבול, השתמש בטקסט אלט תיאורי שאומר (למשל), "אודות עיצוב אתרים ו- HTML" במקום רק "לוגו".
ה alt טקסט חיוני גם עבור SEO (אופטימיזציה למנועי חיפוש). הרובוטים שמשתמשים בהם מנועי חיפוש, כמו גוגל, כדי לחקור את התוכן באתרים אינם יכולים "לראות" תמונות. הם מסתמכים על alt טקסט כדי לקבוע מה יש בדף.
ב HTML5, ה alt לא תמיד נדרש מאפיין מכיוון שאתה יכול להשתמש ב- כּוֹתֶרֶת להוסיף לו תיאור נוסף. אתה יכול גם להשתמש במאפיין זה כדי לציין מזהה המכיל תיאור מלא:
aria-describedby = "תיאור התמונה"
טקסט Alt אינו נדרש גם אם התמונה דקורטיבית בלבד, כגון גרפיקה בראש דף אינטרנט או סמלים. אך אם אינך בטוח, כלול טקסט חלופי לכל מקרה.
תכונות גודל
רוחב = "500"ו.
גובה = "500"בהתאם לעיצוב שלך, באמצעות. גוֹבַה ו. רוֹחַב
באופן כללי, תרצה להגדיר את גודל התמונה ב- CSS שלך. לעתים קרובות יותר מאשר לא, זו תהיה תוצאה של הממדים של מיכל האב של התמונה. גישה זו מאפשרת את הגמישות הרבה ביותר בהתאמה לגדלי מסך שונים. עם זאת, ישנם עדיין מקרים שבהם תרצה לציין ממדי תמונה כתכונות HTML.
תכונות שימושיות אחרות של IMG
title = "שם תמונה תיאורי"התכונה היא תכונה גלובלית שניתן להחיל על כל אחת מהן. אלמנט HTML. יתר על כן, ה. כותרת
רוב הדפדפנים תומכים ב- כותרת תכונה, אך הם עושים זאת בדרכים שונות. יש המציגים את הטקסט כחלון קופץ ואילו אחרים מציגים אותו במסכי מידע כאשר המשתמש לוחץ לחיצה ימנית על התמונה. אתה יכול להשתמש ב- כותרת תכונה לכתוב מידע נוסף על התמונה, אך אל תסמוך שמידע זה יוסתר אוֹ גלוי. אתה בהחלט לא צריך להשתמש בזה כדי להסתיר מילות מפתח עבור מנועי חיפוש. נוהג זה נענש כעת על ידי רוב מנועי החיפוש.
usemap = ""ו.
ismap = ""שתי תכונות אלה מגדירות צד לקוח () וצד שרת (ISMAP) מפות תמונה
longdesc = "תיאור מפורט יותר של התמונה שלך"ה. longdesc
מאפייני IMG שהוצאו משימוש ומיושנים
מספר מאפיינים מיושנים כעת ב- HTML5 או הוצאו משימוש ב- HTML4. לקבלת ה- HTML הטוב ביותר, עליך למצוא פתרונות אחרים במקום להשתמש בתכונות אלה.
גבול = "3"
align = "left"תכונה זו מאפשרת לך למקם תמונה בתוך הטקסט ולזרום את הטקסט סביבו. ניתן ליישר תמונה ימינה או שמאלה. הוא הוצא משימוש לטובת. רכוש CSS צף
hspcace = "10"ו.
vspace = "10"ה. hspace ו. vspace מאפיינים מוסיפים שטח לבן אופקית ( hspace) ואנכית ( vspace
lowsrc = "/ path / to / lowres.jpg"ה. נמוך יותר התכונה מספקת תמונה חלופית כאשר מקור התמונה שלך כל כך גדול שהוא מוריד לאט במיוחד. לדוגמה, ייתכן שיש לך תמונה בגודל 500KB שברצונך להציג בדף האינטרנט שלך, אך זמן ההורדה של 500KB ייקח. אז אתה יוצר עותק קטן בהרבה של התמונה, אולי בשחור לבן או פשוט מותאם במיוחד, ושם את זה בתמונה. נמוך יותר
ה נמוך יותר התכונה נוספה ל- Netscape Navigator 2.0 לתג. זה היה חלק מרמת DOM 1 אך לאחר מכן הוסר מרמת DOM 2. תמיכה בדפדפנים הייתה מתווה למאפיין זה, אם כי אתרים רבים טוענים שהיא נתמכת על ידי כל הדפדפנים המודרניים. זה לא הוצא משימוש ב- HTML4 או מיושן ב- HTML5 מכיוון שהוא מעולם לא היה חלק רשמי באף אחד מהמפרט.
הימנע משימוש במאפיין זה ובמקום זאת מיטוב התמונות שלך כך שהן נטענות במהירות. מהירות טעינת העמודים היא חלק קריטי בעיצוב אתרים טוב, ותמונות גדולות מאטות את העמודים בצורה עצומה - גם אם אתה משתמש ב- נמוך יותר תְכוּנָה.