פתח את קובץ ה-HTML של דף האינטרנט שאליו ברצונך להוסיף תמונה בעורך טקסט כמו פנקס רשימות או תוכנת פיתוח אתרים.
הוסף תג לקובץ. מקם את התג אחרי האלמנט שמתחתיו תרצה שתמונה תופיע כאשר קובץ ה-HTML נפתח בדפדפן. לתג אין תג סגירה נפרד. בתוך התג, עליך לציין את מקור התמונה שברצונך להציג על ידי הקלדת מיקום התמונה באינטרנט באמצעות src תְכוּנָה. אם התמונה מאוחסנת באותה תיקיה כמו קובץ ה-HTML, הקלד את השם והסיומת של התמונה. אם התמונה מאוחסנת במקום אחר, הקלד את כתובת האתר המלאה של התמונה.
תוסיף את ה alt לייחס לתג שלך. ב-HTML5, תכונת alt נדרשת. השתמש בתכונה זו כדי לתאר את התמונה למקרה שלא ניתן לטעון אותה. אם תמונה לא יכולה לטעון, הדפדפן מציג את הטקסט שאתה מזין אחרי תכונת alt. בנוסף, תכונת alt חשובה עבור תוכנות קוראי מסך המשמשות אנשים עם לקויות ראייה. התוכנה קוראת את הטקסט בתכונת alt כך שהאדם עם מוגבלות הראייה שצופה באתר שלך יוכל לשמוע את מה שבתמונה למרות שהוא לא יכול לראות אותו.
ציין את מידות התמונה בפיקסלים באמצעות ה- גוֹבַה ו רוֹחַב תכונות. אם לא תציין את המידות, הדפדפן לא יודע כמה מקום להשאיר לתמונה בזמן שהדף נטען. זה גורם לטעינת עמוד בצורה חלקה, כאשר הטקסט נטען ראשון, משאיר מקום קטן לתמונה, ואז מתפרק עם הטעינת התמונה וגורם לרווח להתרחב. עם המידות שצוינו, הדפדפן משאיר בדיוק את הרווח המתאים בין שאר האלמנטים בעמוד כדי שהתמונה תמלא לאחר סיום הטעינה.
בדוק את הקוד שלך כדי לוודא שהתמונה מוצגת במיקום הנכון על ידי פתיחת קובץ ה-HTML שלך בדפדפן.
השתמש ב-CSS כדי להזיז תמונה לצד שמאל או ימין של המסך או לעטוף טקסט סביבה. לדוגמה, אתה יכול להשתמש style="float: left;" או style="float: right;" בתוך התג.
אם אינך יודע את הגובה והרוחב של תמונה, זה בסדר פשוט להשתמש בתכונת הגובה או הרוחב בלבד. אתה יכול גם להשתמש ב-CSS כדי לציין את הגובה והרוחב; לדוגמה, עם תמונה של 100 על 100 פיקסלים, השתמש בתכונת style: style="height: 100px; רוחב: 100 פיקסלים."
הפוך את התמונה לקישור הניתן ללחיצה על ידי הצבת התג בתוך צמד תגיות "a href". לדוגמה, אם אתה רוצה שתמונה תקשר לפייסבוק, הקלד את הדברים הבאים.
אל תשתמש בתכונה alt כדי לנסות להגביר את ה-SEO של הדף שלך. מנועי חיפוש כבר מזמן מודעים לכך שחלק ממעצבי האינטרנט מנסים למלא את תכונת alt במילות מפתח נוספות, ולכן הם מתעלמים מהטקסט בתכונת alt.
