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