תסתכל על כל דף אינטרנט באינטרנט היום תוכלו להבחין כי הם חולקים דברים מסוימים במשותף. אחד מאותם תכונות משותפות הוא דימויים. התמונות הנכונות מוסיפות כל כך הרבה למצגת של אתר אינטרנט. חלק מהתמונות האלה, כמו לוגו של חברה, מסייעות למותג האתר ומחברות את הישות הדיגיטלית לחברה הפיזית שלך.
כדי להוסיף תמונה, סמל או גרפיקה לדף האינטרנט שלך, עליך להשתמש בתג בקוד HTML של דף. אתה מציב את תג IMG ב- HTML שלך במקום שבו ברצונך להציג את הגרפיקה. דפדפן האינטרנט שמציג את קוד הדף יחליף את התג הזה בגרפיקה המתאימה לאחר הצגת הדף. אם נחזור לדוגמת הלוגו של החברה, הנה כיצד תוכל להוסיף תמונה זו לאתר שלך:
תכונות תמונה
כאשר מסתכלים על קוד ה- HTML לעיל, תראה שהאלמנט כולל שתי תכונות. כל אחד מהם נדרש עבור התמונה.
התכונה הראשונה היא "src". זה ממש ממש את קובץ התמונה שאתה רוצה להיות מוצג בדף. בדוגמה שלנו אנו משתמשים בקובץ בשם "logo.png". זהו הגרפיקה שדפדפן האינטרנט יציג בעת הצגת האתר.
תוכלו גם לשים לב כי לפני שם הקובץ, הוספנו קצת מידע נוסף, "/ images /". זהו נתיב הקובץ. סלאש קדימה הקדמי אומר השרת להסתכל לתוך השורש של הספרייה. זה יהיה ואז לחפש תיקייה בשם "תמונות" ולבסוף את הקובץ שנקרא "logo.png". באמצעות תיקייה בשם "תמונות" כדי לאחסן את כל הגרפיקה של האתר היא נוהג נפוץ למדי, אבל נתיב הקובץ שלך ישתנה מה רלוונטי עבור האתר שלך.
התכונה הדרושה השנייה היא הטקסט "alt". זהו "טקסט חלופי" שמוצג אם התמונה נכשלה מסיבה כלשהי. טקסט זה, אשר בדוגמה שלנו נקרא "לוגו החברה" יוצג אם התמונה נכשלת לטעון. למה זה יקרה? מגוון סיבות:
- נתיב קובץ שגוי
- שם קובץ שגוי או שגיאת איות שגויים
- שגיאת שידור
- הקובץ נמחק מהשרת
אלה הן רק כמה אפשרויות למה התמונה שצוין שלנו עשוי להיות חסר. במקרים אלה, טקסט alt שלנו יוצג במקום זאת.
טקסט Alt משמש גם תוכנת קורא מסך כדי "לקרוא" את התמונה למבקר בעל ראייה לקוי. מכיוון שהם לא יכולים לראות את התמונה כמו שאנחנו עושים, טקסט זה מאפשר להם לדעת מה התמונה עצמה. זו הסיבה alt טקסט נדרש ולמה זה צריך בבירור המדינה מה התמונה!
אי הבנה נפוצה של טקסט alt היא שזה נועד למטרות מנוע החיפוש. זה לא נכון. בעוד ש- Google ומנועי חיפוש אחרים קוראים את הטקסט הזה כדי לקבוע מה התמונה (זכור, הם לא יכולים "לראות" את התמונה שלך), אתה לא צריך לכתוב טקסט Alt לערער אך ורק על מנועי החיפוש. מחבר ברור טקסט alt המיועד לבני אדם. אם אתה יכול גם להוסיף כמה מילות מפתח לתוך התג כי לערער על מנועי החיפוש, זה בסדר, אבל תמיד לוודא את הטקסט alt משרתת המטרה העיקרית שלה על ידי הקובע מה התמונה היא עבור כל מי שלא יכול לראות את הקובץ הגרפי.
תכונות אחרות
תג IMG יש גם שתי תכונות אחרות שאתה עשוי לראות בשימוש כאשר אתה שם גרפיקה בדף האינטרנט שלך - רוחב וגובה. לדוגמה, אם אתה משתמש בעורך WYSIWYG כמו Dreamweaver, הוא מוסיף מידע זה באופן אוטומטי עבורך. הנה דוגמה:
תכונות WIDTH ו- HEIGHT מציינות לדפדפן את גודל התמונה. הדפדפן ואז יודע בדיוק כמה שטח בפריסה להקצות, וזה יכול לעבור אל האלמנט הבא בדף בזמן ההורדה של התמונה. הבעיה בשימוש במידע זה ב- HTML שלך היא שלא תמיד תרצה שהתמונה שלך תוצג בגודל המדויק. לדוגמה, אם יש לך אתר אינטרנט בעל יכולת תגובה משתנה, בהתאם למסך המבקרים ולגודל המכשיר, תרצה גם שהתמונות יהיו גמישות. אם אתה קובע ב- HTML שלך מה גודל קבוע, יהיה לך קשה מאוד לעקוף עם שאילתות מדיה CSS תגובה. מסיבה זו, וכדי לשמור על הפרדת סגנון (CSS) ומבנה (HTML), מומלץ לא להוסיף תכונות רוחב וגובה לקוד ה- HTML שלך.
הערה אחת: אם תעזוב את הוראות הגודל האלה ולא תציין גודל ב- CSS, הדפדפן יציג בכל מקרה את התמונה כברירת מחדל, בגודל טבעי.
בעריכת ג'רמי ג'יררד